PDA

View Full Version : Running a function on another page



RoRiddler
01-16-2012, 03:44 PM
Hi guys, I hope you can point me in the right direction.

I would like to have a link that runs a javascript command on another page on the site. The function would be to have a div that fades in color (to guide the user to where he/she is supposed to look at

Below is the code that works if it's all on the same page.




<html>
<head>
<script type="javascript">

function colorFade(id,element,start,end,steps,speed) {
var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
var target = document.getElementById(id);
steps = steps || 20;
speed = speed || 20;
clearInterval(target.timer);
endrgb = colorConv(end);
er = endrgb[0];
eg = endrgb[1];
eb = endrgb[2];
if(!target.r) {
startrgb = colorConv(start);
r = startrgb[0];
g = startrgb[1];
b = startrgb[2];
target.r = r;
target.g = g;
target.b = b;
}
rint = Math.round(Math.abs(target.r-er)/steps);
gint = Math.round(Math.abs(target.g-eg)/steps);
bint = Math.round(Math.abs(target.b-eb)/steps);
if(rint == 0) { rint = 1 }
if(gint == 0) { gint = 1 }
if(bint == 0) { bint = 1 }
target.step = 1;
target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
var target = document.getElementById(id);
var color;
if(target.step <= steps) {
var r = target.r;
var g = target.g;
var b = target.b;
if(r >= er) {
r = r - rint;
} else {
r = parseInt(r) + parseInt(rint);
}
if(g >= eg) {
g = g - gint;
} else {
g = parseInt(g) + parseInt(gint);
}
if(b >= eb) {
b = b - bint;
} else {
b = parseInt(b) + parseInt(bint);
}
color = 'rgb(' + r + ',' + g + ',' + b + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
target.r = r;
target.g = g;
target.b = b;
target.step = target.step + 1;
} else {
clearInterval(target.timer);
color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
}
}

// convert the color to rgb from hex //
function colorConv(color) {
var rgb = [parseInt(color.substring(0,2),16),
parseInt(color.substring(2,4),16),
parseInt(color.substring(4,6),16)];
return rgb;
}
</script>

</head>
<body>

<a href="javascript:colorFade('fade1','background','D7FFCC','ffffff',100,70)">Click here to see a div fade</a>
<br><br>

<div id="fade1"> This div will fade</div>

</body>
</html>




Can someone please tell me what I need to put on the other page? Is this an onLoad issue?

Thank you for all the help!

traq
01-16-2012, 04:21 PM
I'm not sure I completely understand your question.

1. Do you simply want to apply this effect on other pages? Just copy the script to those pages (or better yet, put the script in its own external file and use it on any page you like).

2. or, do you want page "A" to control what's happening on page "B"? This is not possible using standard javascript. You could use web sockets or cross-document messaging (HTML5 APIs), but these are not yet fully/widely supported.

please elaborate.

RoRiddler
01-16-2012, 04:36 PM
I'd like the final product to have a link on page 'A', and when you click on that link, a new page 'B' opens, and the javascript automatically runs on a div on page 'B'.

Thank you, let me know if I'm still being too vague :/


Edit:

Here is more of what I'm referring to. (http://sandbox.scriptiny.com/fader/fader.html) The second example, where you have to click on a link for the javascript to run, but I would like the div on another page.

traq
01-16-2012, 08:58 PM
would you want the javascript to run every time page "B" opens?
-- put the script on page "B" and run it onload.

or, only when the user opens page "B" by using the link on page "A"?
-- have page "A" pass some kind of token to page "B" (e.g., in the query string). run the script when you find the token.

RoRiddler
01-17-2012, 09:08 PM
Thank you very much!

traq
01-17-2012, 11:14 PM
you're welcome