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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---