I have got a problem by applying Effect.Opacity on elements with a
background-image. Every time the opacity-status is updated, the
bg-image ist beeing reloaded from the server. Is there any workaround?
Thanks for your help, please see source below.
*******************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script src="js/prototype.js"
type="text/javascript"></script>
<script src="js/effects.js"
type="text/javascript"></script>
<style type="text/css">
#menu {
list-style: none;
font-size: 13px;
padding: 0;
height: 13px;
margin: 0;
}
#menu a{
text-decoration: none;
}
#menu a span{
visibility: hidden;
}
#menu li.m {
margin: 0;
padding: 0;
float: left;
background-image: url(images/menu1.gif);
background-repeat: no-repeat;
}
#m_1{background-position: -1px 50%;width:43px;}
#m_2{background-position: -99px 50%;width:45px;}
#m_3{background-position: -200px 50%;width:69px;}
</style>
</head>
<body>
<ul id="menu">
<li id="m_1" class="m" onmouseover="new
Effect.Opacity(this,
{to:1.0, duration:0.2});"
onmouseout="new Effect.Opacity(this, {to:0.15,
duration:0.2});"><a
href="#"><span>page1</span></a></li>
<li id="m_2" class="m" onmouseover="new
Effect.Opacity(this,
{to:1.0, duration:0.2});"
onmouseout="new Effect.Opacity(this, {to:0.15,
duration:0.2});"><a
href="#"><span>page2</span></a></li>
<li id="m_3" class="m" onmouseover="new
Effect.Opacity(this,
{to:1.0, duration:0.2});"
onmouseout="new Effect.Opacity(this, {to:0.15,
duration:0.2});"><a
href="#"><span>page3</span></a></li>
</ul>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Hey there, tttom a écrit :> I have got a problem by applying Effect.Opacity on elements with a > background-image. Every time the opacity-status is updated, the > bg-image ist beeing reloaded from the server. Is there any workaround?I''m not too sure about your specific case (you didn''t mention the browser you had an issue with, too), but the way you''re doing it has some issues anyhow. Especially, it is important to avoid a case where onMouseOut happens while your mouseOver-induced effect is still going on, which is done through independent effect queues. Also, you should load effects using the proper syntax, just to remain valid when script.aculo.us should decide to include common init code in the main script. Namely, don''t use "effects.js", use "scriptaculous.js?load=effects". You may find something very close to your need (although more complex, as it changes the image on hovering) on this former question: http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/thread/fe4b2abf3b6512de/79fbdf0ab9c6462d ''HTH -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Am 29.10.2006 um 13:10 schrieb Christophe Porteneuve:> > Also, you should load effects using the proper syntax, just to remain > valid when script.aculo.us should decide to include common init > code in > the main script. Namely, don''t use "effects.js", use > "scriptaculous.js?load=effects".Just FYI: scriptaculous.js is just a convenience script for loading stuff in, it won''t be extended to hold additional stiuff. so just including "effects.js" is fine. :) best, thomas --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Since you''re probably talking about IE6, you might want to have a look at this: http://www.mister-pixel.com/ best, thomas Am 29.10.2006 um 00:08 schrieb tttom:> > I have got a problem by applying Effect.Opacity on elements with a > background-image. Every time the opacity-status is updated, the > bg-image ist beeing reloaded from the server. Is there any workaround? > > Thanks for your help, please see source below. > > > ******************************************* > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> > <head> > <meta http-equiv="content-type" content="text/html; > charset=iso-8859-1" /> > <script src="js/prototype.js" type="text/javascript"></script> > <script src="js/effects.js" type="text/javascript"></script> > <style type="text/css"> > #menu { > list-style: none; > font-size: 13px; > padding: 0; > height: 13px; > margin: 0; > } > #menu a{ > text-decoration: none; > } > #menu a span{ > visibility: hidden; > } > #menu li.m { > margin: 0; > padding: 0; > float: left; > background-image: url(images/menu1.gif); > background-repeat: no-repeat; > } > #m_1{background-position: -1px 50%;width:43px;} > #m_2{background-position: -99px 50%;width:45px;} > #m_3{background-position: -200px 50%;width:69px;} > </style> > </head> > <body> > <ul id="menu"> > <li id="m_1" class="m" onmouseover="new Effect.Opacity(this, > {to:1.0, duration:0.2});" > onmouseout="new Effect.Opacity(this, {to:0.15, duration:0.2});"><a > href="#"><span>page1</span></a></li> > <li id="m_2" class="m" onmouseover="new Effect.Opacity(this, > {to:1.0, duration:0.2});" > onmouseout="new Effect.Opacity(this, {to:0.15, duration:0.2});"><a > href="#"><span>page2</span></a></li> > <li id="m_3" class="m" onmouseover="new Effect.Opacity(this, > {to:1.0, duration:0.2});" > onmouseout="new Effect.Opacity(this, {to:0.15, duration:0.2});"><a > href="#"><span>page3</span></a></li> > </ul> > </body> > </html> > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Thank you for your hints. Yes, I am talking about IE. But all these issues did not help ... :-( I''m trying to find out why. I''ll let you know about that. Best, Tom --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Hi, tttom, tttom <thunger-hi6Y0CQ0nG0@public.gmane.org> wrote:> I have got a problem by applying Effect.Opacity on elements with a > background-image. Every time the opacity-status is updated, the > bg-image ist beeing reloaded from the server. Is there any workaround? > > Thanks for your help, please see source below.This worked for me: .htaccess --------------------------------------------------------------- # from http://archivist.incutio.com/viewlist/css-discuss/30707 BrowserMatch "MSIE" brokenvary=1 BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 BrowserMatch "Opera" !brokenvary SetEnvIf brokenvary 1 force-no-vary --------------------------------------------------------------- hth! -dave --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---