Hi. I have the following code that is supposed to swap "on" and "off"
images for 3 ASP.NET link buttons. The effect is sort of like a
"moving" on/off neon sign:
<script>
var btn = 1;
function rotateDisplay()
{
if(btn == 1)
{
btn = 2;
}
else if(btn == 2)
{
btn = 3;
}
else
{
btn = 1;
}
new Effect.Fade('ctl00_DefaultContent_BottomCmsContent1_mainImg',
{ queue: { position:'end', scope:'fader'},
afterFinish: function()
{
$('ctl00_DefaultContent_BottomCmsContent1_mainImg').src
= '../
Images/invisible.gif';
Element.removeClassName('ctl00_DefaultContent_BottomCmsContent1_btn1','btnBottomCMS_active');
Element.addClassName('ctl00_DefaultContent_BottomCmsContent1_btn1','btnBottomCMS');
Element.removeClassName('ctl00_DefaultContent_BottomCmsContent1_btn2','btnBottomCMS_active');
Element.addClassName('ctl00_DefaultContent_BottomCmsContent1_btn2','btnBottomCMS');
Element.removeClassName('ctl00_DefaultContent_BottomCmsContent1_btn3','btnBottomCMS_active');
Element.addClassName('ctl00_DefaultContent_BottomCmsContent1_btn3','btnBottomCMS');
new
Effect.Appear('ctl00_DefaultContent_BottomCmsContent1_btn'+btn
+'', {queue: {position:'end',scope:'fader'} });
Element.addClassName('ctl00_DefaultContent_BottomCmsContent1_btn'+btn
+'','btnBottomCMS_active');
}});
}
function showGraph()
{
var val = Math.floor(Math.random()*3);
if(val == 0)
{
document.write("<h3 class=\"network_reach\"><span>Network Reach</
span></h3> <div><img src=\"images/nr_graph.png\" /></div> <p>We have
maintained the largest online reach for 31 consecutive months -
currently reaching over <strong>85% of the Internet universe</strong>,
according to comScore Media Metrix, December 2006.</p>");
}
else if(val == 2)
{
document.write("<h3 class=\"top_advertisers\"><span>Top
Advertisers</span></h3> <div><img src=\"images/nr_graph.png\" /></div>
<p>We have worked with <br/><strong>9 out of the top 10</strong>
online advertisers, according to Ad Age.</p>");
}
else
{
document.write("<h3 class=\"top_agencies\"><span>Top Agencies</
span></h3> <div><img src=\"images/nr_graph.png\" /></div> <p>We have
worked with <br/><strong>16 out of the top 20 agencies</strong>,
according to Ad Age.</p>");
}
}
onload = function()
{
var interval_name = setInterval(rotateDisplay, 6000);
}
</script>
What I have works as far as the effect goes, but the first time the
script runs, the link buttons are squished. The full text on the
button is still visible, but the rest of the button's space is
compressed. This only happens the first time the effect runs. When
it starts again at the 1st button, all is well. Here's what the CSS
looks like:
.btnBottomCMS{ background-image: url(../Images/h3_active.gif);
background-repeat: no-repeat; text-align:center;
height:28px; font-weight:bold; text-transform:capitalize;
padding-top:7px; text-align:center;color:#67870a;
}
.btnBottomCMS_active{ background-image: url(../Images/
h3_active_h.gif); background-repeat: no-repeat; text-align:center;
height:28px; font-weight:bold; text-transform:capitalize;
padding-top:7px; text-align:center;color:#ffffff;
}
.btnBottomCMS:hover{ background-image: url(../Images/h3_active_h.gif);
background-repeat: no-repeat; height:28px; font-weight:bold;
text-transform:capitalize;padding-top:7px; text-
align:center;color:White;
}
Any help is greatly appreciated, as I'm no JavaScript expert. Thanks.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
