tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2007-Dec-13 17:20 UTC
Effect.Scale onMousOver and Out on Textelement
Hell all,
I hope Iam nt totally in the wrong group or so. I am Using the
uptodate sciptaculous class.
I am trying to scale a Link onMouseOver a little bigger, and to scale
it back to the original Size onMouseOut.
Its seems to more difficult than I thought. The Thing I want to have
is some sort of fisheye effect on a Textelement.
The problem is, that the element usually grows very big or very small
after some time, so its actually totally out of control.
is there any way to get this clean and calm, to a nice an smooth
effect, or am I totally on the wrong way? Ive tried ques, and I also
tried to not set of a Effect, when a certain value is set, but this
all didnt solved the behavoir.
here is a zip of the code:
<inpt type="hidden" name="scaleset"
id="scaleset" value="0">
<script language="javascript">
function ScaleBig()
{
if(document.getElementById(''scaleset'').value!=1)
{
document.getElementById(''scaleset'').value = 1;
new Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''front'',
scope: ''menuxscope''}, scaleMode:{originalWidth: 200} });
}
}
function ScaleSmall(element)
{
if(document.getElementById(''scaleset'').value!=0)
{
document.getElementById(''scaleset'').value = 0;
new Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX:
true, scaleY: true, scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope: ''menuxscope2''} });
}
}
</script>
<div id="mainmenu" style="width:450px;<? echo
$style_add_mainm ?>">
<div id="fisheyeMenu" style="width:450px;"
onmouseover="JavaScript:ScaleBig();"
onmouseout="JavaScript:ScaleSmall();">
<div class="fisheyeItem" id="fisheyeItem1"
style="float:left"><a
id="fisheyeItem12" class="<? echo $class_exhibit_c ?>"
href="index.php?
site=exhibitions&action=current">CURRENT</a> </div>
</div>
</div>
I hope somebody can help me. I am already trying for more than two
days to get this to work.
Thanks for any conclusions.
Best
Tobias
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Nicolás Sanguinetti
2007-Dec-13 18:51 UTC
Re: Effect.Scale onMousOver and Out on Textelement
Something like this? http://demos.prototype-ui.com/Dock You may want to read the source code of the Dock component, that might give you some insight as to how to handle it :) Best, -Nicolas On Dec 13, 2007 3:20 PM, tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org <tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> > Hell all, > > I hope Iam nt totally in the wrong group or so. I am Using the > uptodate sciptaculous class. > I am trying to scale a Link onMouseOver a little bigger, and to scale > it back to the original Size onMouseOut. > Its seems to more difficult than I thought. The Thing I want to have > is some sort of fisheye effect on a Textelement. > The problem is, that the element usually grows very big or very small > after some time, so its actually totally out of control. > is there any way to get this clean and calm, to a nice an smooth > effect, or am I totally on the wrong way? Ive tried ques, and I also > tried to not set of a Effect, when a certain value is set, but this > all didnt solved the behavoir. > > here is a zip of the code: > > <inpt type="hidden" name="scaleset" id="scaleset" value="0"> > <script language="javascript"> > function ScaleBig() > { > if(document.getElementById(''scaleset'').value!=1) > { > document.getElementById(''scaleset'').value = 1; > new Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY: > true, scaleFromCenter:true, duration: .2, queue: {position:''front'', > scope: ''menuxscope''}, scaleMode:{originalWidth: 200} }); > } > } > > function ScaleSmall(element) > { > if(document.getElementById(''scaleset'').value!=0) > { > document.getElementById(''scaleset'').value = 0; > new Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX: > true, scaleY: true, scaleFromCenter:true, duration: .2, queue: > {position:''end'', scope: ''menuxscope2''} }); > } > } > > </script> > <div id="mainmenu" style="width:450px;<? echo $style_add_mainm ? > >"> > <div id="fisheyeMenu" style="width:450px;" > onmouseover="JavaScript:ScaleBig();" > onmouseout="JavaScript:ScaleSmall();"> > <div class="fisheyeItem" id="fisheyeItem1" style="float:left"><a > id="fisheyeItem12" class="<? echo $class_exhibit_c ?>" href="index.php? > site=exhibitions&action=current">CURRENT</a> </div> > </div> > </div> > > I hope somebody can help me. I am already trying for more than two > days to get this to work. > Thanks for any conclusions. > > Best > > Tobias > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2007-Dec-13 20:05 UTC
Re: Effect.Scale onMousOver and Out on Textelement
hm, well right now cannot test this with text, but the essential difference to all the fisheye dock scripts is, that i want to use a text and not a image. anyways. i didnt know the example youve posted before, so I will check if it will work with this one. other examples that ive tested, onley worked with images and not with text properly. thanks so far for the answer. best tobias On 13 Dez., 19:51, "Nicolás Sanguinetti" <godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Something like this?http://demos.prototype-ui.com/Dock > You may want to read the source code of the Dock component, that might > give you some insight as to how to handle it :) > > Best, > -Nicolas > > On Dec 13, 2007 3:20 PM, tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > Hell all, > > > I hope Iam nt totally in the wrong group or so. I am Using the > > uptodate sciptaculous class. > > I am trying to scale a Link onMouseOver a little bigger, and to scale > > it back to the original Size onMouseOut. > > Its seems to more difficult than I thought. The Thing I want to have > > is some sort of fisheye effect on a Textelement. > > The problem is, that the element usually grows very big or very small > > after some time, so its actually totally out of control. > > is there any way to get this clean and calm, to a nice an smooth > > effect, or am I totally on the wrong way? Ive tried ques, and I also > > tried to not set of a Effect, when a certain value is set, but this > > all didnt solved the behavoir. > > > here is a zip of the code: > > > <inpt type="hidden" name="scaleset" id="scaleset" value="0"> > > <script language="javascript"> > > function ScaleBig() > > { > > if(document.getElementById(''scaleset'').value!=1) > > { > > document.getElementById(''scaleset'').value = 1; > > new Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY: > > true, scaleFromCenter:true, duration: .2, queue: {position:''front'', > > scope: ''menuxscope''}, scaleMode:{originalWidth: 200} }); > > } > > } > > > function ScaleSmall(element) > > { > > if(document.getElementById(''scaleset'').value!=0) > > { > > document.getElementById(''scaleset'').value = 0; > > new Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX: > > true, scaleY: true, scaleFromCenter:true, duration: .2, queue: > > {position:''end'', scope: ''menuxscope2''} }); > > } > > } > > > </script> > > <div id="mainmenu" style="width:450px;<? echo $style_add_mainm ? > > >"> > > <div id="fisheyeMenu" style="width:450px;" > > onmouseover="JavaScript:ScaleBig();" > > onmouseout="JavaScript:ScaleSmall();"> > > <div class="fisheyeItem" id="fisheyeItem1" style="float:left"><a > > id="fisheyeItem12" class="<? echo $class_exhibit_c ?>" href="index.php? > > site=exhibitions&action=current">CURRENT</a> </div> > > </div> > > </div> > > > I hope somebody can help me. I am already trying for more than two > > days to get this to work. > > Thanks for any conclusions. > > > Best > > > Tobias--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Nicolás Sanguinetti
2007-Dec-13 20:07 UTC
Re: Effect.Scale onMousOver and Out on Textelement
This one is also meant to be used with images, but that doesn''t mean you can''t look at the source code and see how it''s implemented :) Best, N. On Dec 13, 2007 6:05 PM, tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org <tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> > hm, well right now cannot test this with text, but the essential > difference to all the fisheye dock scripts is, that i want to use a > text and not a image. anyways. i didnt know the example youve posted > before, so I will check if it will work with this one. other examples > that ive tested, onley worked with images and not with text properly. > thanks so far for the answer. > > best > > tobias > > On 13 Dez., 19:51, "Nicolás Sanguinetti" <godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Something like this?http://demos.prototype-ui.com/Dock > > You may want to read the source code of the Dock component, that might > > give you some insight as to how to handle it :) > > > > Best, > > -Nicolas > > > > On Dec 13, 2007 3:20 PM, tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org > > > > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > > > Hell all, > > > > > I hope Iam nt totally in the wrong group or so. I am Using the > > > uptodate sciptaculous class. > > > I am trying to scale a Link onMouseOver a little bigger, and to scale > > > it back to the original Size onMouseOut. > > > Its seems to more difficult than I thought. The Thing I want to have > > > is some sort of fisheye effect on a Textelement. > > > The problem is, that the element usually grows very big or very small > > > after some time, so its actually totally out of control. > > > is there any way to get this clean and calm, to a nice an smooth > > > effect, or am I totally on the wrong way? Ive tried ques, and I also > > > tried to not set of a Effect, when a certain value is set, but this > > > all didnt solved the behavoir. > > > > > here is a zip of the code: > > > > > <inpt type="hidden" name="scaleset" id="scaleset" value="0"> > > > <script language="javascript"> > > > function ScaleBig() > > > { > > > if(document.getElementById(''scaleset'').value!=1) > > > { > > > document.getElementById(''scaleset'').value = 1; > > > new Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY: > > > true, scaleFromCenter:true, duration: .2, queue: {position:''front'', > > > scope: ''menuxscope''}, scaleMode:{originalWidth: 200} }); > > > } > > > } > > > > > function ScaleSmall(element) > > > { > > > if(document.getElementById(''scaleset'').value!=0) > > > { > > > document.getElementById(''scaleset'').value = 0; > > > new Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX: > > > true, scaleY: true, scaleFromCenter:true, duration: .2, queue: > > > {position:''end'', scope: ''menuxscope2''} }); > > > } > > > } > > > > > </script> > > > <div id="mainmenu" style="width:450px;<? echo $style_add_mainm ? > > > >"> > > > <div id="fisheyeMenu" style="width:450px;" > > > onmouseover="JavaScript:ScaleBig();" > > > onmouseout="JavaScript:ScaleSmall();"> > > > <div class="fisheyeItem" id="fisheyeItem1" style="float:left"><a > > > id="fisheyeItem12" class="<? echo $class_exhibit_c ?>" href="index.php? > > > site=exhibitions&action=current">CURRENT</a> </div> > > > </div> > > > </div> > > > > > I hope somebody can help me. I am already trying for more than two > > > days to get this to work. > > > Thanks for any conclusions. > > > > > Best > > > > > Tobias > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2007-Dec-13 22:50 UTC
Re: Effect.Scale onMousOver and Out on Textelement
ok - makes sense. the problem is a bit that I am not a JS genius, so I actually whanted a class to essentially handle the more diffficult part (the scaling). anyways: i tried to find out how to get the dock script to work on my site and kind of get confused how to implement the class (I am already using scritaculous, which is based on prototype?). then I find out the the dock script is actually only a implementation of a script from http://www.safalra.com/web-design/javascript/mac-style-dock/ which seems to be more logical to implement (I dont whant to load 10 diffrent classes into my site). so i tried that one and it worked fine with images. now it comes to the other part: changing the script from images to text. as far as i can see, the whole script works essetially for images. so its not really easy for me to change something, because i dont really understand the whole script. so I am stuck again. now I come to the point where I think: is the dock script really any solution, or might it be easier to keep on trying with the scale effect of scriptaculous? it actually does what i want, exept i cannot control it really. any conclusions from someone? I would really appreciate if someone could point me into the right direction.... even with the dock script. if someone could show me what essetially must be changed about the script to work with text elements.... would be great. thanks a million. best tobias On Dec 13, 9:07 pm, "Nicolás Sanguinetti" <godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> This one is also meant to be used with images, but that doesn''t mean > you can''t look at the source code and see how it''s implemented :) > > Best, > N. > > On Dec 13, 2007 6:05 PM, tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > hm, well right now cannot test this with text, but the essential > > difference to all the fisheye dock scripts is, that i want to use a > > text and not a image. anyways. i didnt know the example youve posted > > before, so I will check if it will work with this one. other examples > > that ive tested, onley worked with images and not with text properly. > > thanks so far for the answer. > > > best > > > tobias > > > On 13 Dez., 19:51, "Nicolás Sanguinetti" <godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Something like this?http://demos.prototype-ui.com/Dock > > > You may want to read the source code of the Dock component, that might > > > give you some insight as to how to handle it :) > > > > Best, > > > -Nicolas > > > > On Dec 13, 2007 3:20 PM, tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org > > > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > > > Hell all, > > > > > I hope Iam nt totally in the wrong group or so. I am Using the > > > > uptodate sciptaculous class. > > > > I am trying to scale a Link onMouseOver a little bigger, and to scale > > > > it back to the original Size onMouseOut. > > > > Its seems to more difficult than I thought. The Thing I want to have > > > > is some sort of fisheye effect on a Textelement. > > > > The problem is, that the element usually grows very big or very small > > > > after some time, so its actually totally out of control. > > > > is there any way to get this clean and calm, to a nice an smooth > > > > effect, or am I totally on the wrong way? Ive tried ques, and I also > > > > tried to not set of a Effect, when a certain value is set, but this > > > > all didnt solved the behavoir. > > > > > here is a zip of the code: > > > > > <inpt type="hidden" name="scaleset" id="scaleset" value="0"> > > > > <script language="javascript"> > > > > function ScaleBig() > > > > { > > > > if(document.getElementById(''scaleset'').value!=1) > > > > { > > > > document.getElementById(''scaleset'').value = 1; > > > > new Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY: > > > > true, scaleFromCenter:true, duration: .2, queue: {position:''front'', > > > > scope: ''menuxscope''}, scaleMode:{originalWidth: 200} }); > > > > } > > > > } > > > > > function ScaleSmall(element) > > > > { > > > > if(document.getElementById(''scaleset'').value!=0) > > > > { > > > > document.getElementById(''scaleset'').value = 0; > > > > new Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX: > > > > true, scaleY: true, scaleFromCenter:true, duration: .2, queue: > > > > {position:''end'', scope: ''menuxscope2''} }); > > > > } > > > > } > > > > > </script> > > > > <div id="mainmenu" style="width:450px;<? echo $style_add_mainm ? > > > > >"> > > > > <div id="fisheyeMenu" style="width:450px;" > > > > onmouseover="JavaScript:ScaleBig();" > > > > onmouseout="JavaScript:ScaleSmall();"> > > > > <div class="fisheyeItem" id="fisheyeItem1" style="float:left"><a > > > > id="fisheyeItem12" class="<? echo $class_exhibit_c ?>" href="index.php? > > > > site=exhibitions&action=current">CURRENT</a> </div> > > > > </div> > > > > </div> > > > > > I hope somebody can help me. I am already trying for more than two > > > > days to get this to work. > > > > Thanks for any conclusions. > > > > > Best > > > > > Tobias--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2007-Dec-13 23:43 UTC
Re: Effect.Scale onMousOver and Out on Textelement
hmm, ive been trying it a bit further with the scale effect. the
problem seems to be that js seems to get a lot of onmousover and
onmouseout action, when iam moving the mouse over the div area. now it
actually looks like ive chaked the font and it schakes a bit untill it
stops after ive left my mouse somewhere else.
is there any trick around to only scale once big, when the mouse
scrolls over the area and then scale small again, when the mouse
leaves the area again?
just like in all those mac os x dock scripts - the seem to take care
about this with some listening handles - dont hwat this is.
here is my right now example:
<inpt type="hidden" name="scaleset"
id="scaleset" value="2">
<inpt type="hidden" name="scaleset2"
id="scaleset2" value="2">
<script language="javascript">
function ScaleBig()
{
if(document.getElementById(''scaleset'').value!=1)
{
document.getElementById(''scaleset'').value = 1;
new Effect.Scale("fisheyeItem1",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope''} });
new Effect.Scale("fisheyeItem2",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope''} });
new Effect.Scale("fisheyeItem3",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope''} });
}
}
function ScaleSmall(element)
{
if(document.getElementById(''scaleset'').value!=2)
{
document.getElementById(''scaleset'').value = 2;
new Effect.Scale("fisheyeItem1",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope''} });
new Effect.Scale("fisheyeItem2",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope''} });
new Effect.Scale("fisheyeItem3",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope''} });
}
}
function ScaleBig2()
{
if(document.getElementById(''scaleset2'').value!=1)
{
document.getElementById(''scaleset2'').value = 1;
new Effect.Scale("fisheyeItem4",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope2''} });
new Effect.Scale("fisheyeItem5",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope2''} });
new Effect.Scale("fisheyeItem6",125,{scaleX: true, scaleY:
true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
scope: ''menuxscope2''} });
}
}
function ScaleSmall2(element)
{
if(document.getElementById(''scaleset2'').value!=2)
{
document.getElementById(''scaleset2'').value = 2;
new Effect.Scale("fisheyeItem4",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope2''} });
new Effect.Scale("fisheyeItem5",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope2''} });
new Effect.Scale("fisheyeItem6",80,{scaleX: true, scaleY: true,
scaleFromCenter:true, duration: .2, queue: {position:''end'',
scope:
''menuxscope2''} });
}
}
</script>
<div id="mainmenu" style="width:450px;<? echo
$style_add_mainm ?>">
<table border="0" cellpadding="0"
cellspacing="0"><tr><td>
<div id="fisheyeMenu" style="width:450px;"
onmouseover="JavaScript:ScaleBig();"
onmouseout="JavaScript:ScaleSmall();">
<div class="fisheyeItem" id="fisheyeItem1"
style="float:left"><a
class="<? echo $class_exhibit_c ?>" href="index.php?
site=exhibitions&action=current">CURRENT</a> </div>
<div class="fisheyeItem" id="fisheyeItem2"
style="float:left"><a
class="<? echo $class_exhibit_u ?>" href="index.php?
site=exhibitions&action=forthcoming">UPCOMING</a> </div>
<div class="fisheyeItem" id="fisheyeItem3"><a
class="<? echo
$class_exhibit_p ?>" href="index.php?
site=exhibitions&action=past">PAST</a> </div>
</div>
</td></tr><tr><td>
<div id="fisheyeMenu2" style="width:450px;"
onmouseover="JavaScript:ScaleBig2();"
onmouseout="JavaScript:ScaleSmall2();">
<div class="fisheyeItem" id="fisheyeItem4"
style="float:left"><a
class="<? echo $class_artist ?>" href="index.php?
site=artists">ARTISTS</a> </div>
<div class="fisheyeItem" id="fisheyeItem5"
style="float:left"><a
class="<? echo $class_gallery ?>" href="index.php?
site=gallery">GALLERY</a> </div>
<div class="fisheyeItem" id="fisheyeItem6"><a
class="<? echo
$class_news ?>"
href="index.php?site=newsletter">NEWS</a> </div>
</div>
</td></tr></table>
</div>
(sorry for all the div-in-table-in-div stuff. didnt get this clear any
other way.)
mybe somebody know how to get this "shaking" away?
thanks a million.
best
tobias
On Dec 13, 11:50 pm,
"tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org"
<tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:> ok - makes sense. the problem is a bit that I am not a JS genius, so I
> actually whanted a class to essentially handle the more diffficult
> part (the scaling).
> anyways: i tried to find out how to get the dock script to work on my
> site and kind of get confused how to implement the class (I am already
> using scritaculous, which is based on prototype?). then I find out the
> the dock script is actually only a implementation of a script
fromhttp://www.safalra.com/web-design/javascript/mac-style-dock/which
> seems to be more logical to implement (I dont whant to load 10
> diffrent classes into my site).
> so i tried that one and it worked fine with images. now it comes to
> the other part: changing the script from images to text. as far as i
> can see, the whole script works essetially for images. so its not
> really easy for me to change something, because i dont really
> understand the whole script.
> so I am stuck again.
> now I come to the point where I think: is the dock script really any
> solution, or might it be easier to keep on trying with the scale
> effect of scriptaculous? it actually does what i want, exept i cannot
> control it really.
> any conclusions from someone? I would really appreciate if someone
> could point me into the right direction.... even with the dock script.
> if someone could show me what essetially must be changed about the
> script to work with text elements.... would be great.
>
> thanks a million.
>
> best
> tobias
>
> On Dec 13, 9:07 pm, "Nicolás Sanguinetti"
<godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > This one is also meant to be used with images, but that
doesn''t mean
> > you can''t look at the source code and see how it''s
implemented :)
>
> > Best,
> > N.
>
> > On Dec 13, 2007 6:05 PM,
tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
>
> > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
>
> > > hm, well right now cannot test this with text, but the essential
> > > difference to all the fisheye dock scripts is, that i want to use
a
> > > text and not a image. anyways. i didnt know the example youve
posted
> > > before, so I will check if it will work with this one. other
examples
> > > that ive tested, onley worked with images and not with text
properly.
> > > thanks so far for the answer.
>
> > > best
>
> > > tobias
>
> > > On 13 Dez., 19:51, "Nicolás Sanguinetti"
<godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > > Something like this?http://demos.prototype-ui.com/Dock
> > > > You may want to read the source code of the Dock component,
that might
> > > > give you some insight as to how to handle it :)
>
> > > > Best,
> > > > -Nicolas
>
> > > > On Dec 13, 2007 3:20 PM,
tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
>
> > > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:
>
> > > > > Hell all,
>
> > > > > I hope Iam nt totally in the wrong group or so. I am
Using the
> > > > > uptodate sciptaculous class.
> > > > > I am trying to scale a Link onMouseOver a little
bigger, and to scale
> > > > > it back to the original Size onMouseOut.
> > > > > Its seems to more difficult than I thought. The Thing I
want to have
> > > > > is some sort of fisheye effect on a Textelement.
> > > > > The problem is, that the element usually grows very big
or very small
> > > > > after some time, so its actually totally out of
control.
> > > > > is there any way to get this clean and calm, to a nice
an smooth
> > > > > effect, or am I totally on the wrong way? Ive tried
ques, and I also
> > > > > tried to not set of a Effect, when a certain value is
set, but this
> > > > > all didnt solved the behavoir.
>
> > > > > here is a zip of the code:
>
> > > > > <inpt type="hidden"
name="scaleset" id="scaleset" value="0">
> > > > > <script
language="javascript">
> > > > > function ScaleBig()
> > > > > {
> > > > >
if(document.getElementById(''scaleset'').value!=1)
> > > > > {
> > > > >
document.getElementById(''scaleset'').value = 1;
> > > > > new
Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY:
> > > > > true, scaleFromCenter:true, duration: .2, queue:
{position:''front'',
> > > > > scope: ''menuxscope''},
scaleMode:{originalWidth: 200} });
> > > > > }
> > > > > }
>
> > > > > function ScaleSmall(element)
> > > > > {
> > > > >
if(document.getElementById(''scaleset'').value!=0)
> > > > > {
> > > > >
document.getElementById(''scaleset'').value = 0;
> > > > > new
Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX:
> > > > > true, scaleY: true, scaleFromCenter:true, duration: .2,
queue:
> > > > > {position:''end'', scope:
''menuxscope2''} });
> > > > > }
> > > > > }
>
> > > > > </script>
> > > > > <div id="mainmenu"
style="width:450px;<? echo $style_add_mainm ?
> > > > > >">
> > > > > <div
id="fisheyeMenu" style="width:450px;"
> > > > > onmouseover="JavaScript:ScaleBig();"
> > > > > onmouseout="JavaScript:ScaleSmall();">
> > > > > <div
class="fisheyeItem" id="fisheyeItem1"
style="float:left"><a
> > > > > id="fisheyeItem12" class="<? echo
$class_exhibit_c ?>" href="index.php?
> > > > >
site=exhibitions&action=current">CURRENT</a> </div>
> > > > > </div>
> > > > > </div>
>
> > > > > I hope somebody can help me. I am already trying for
more than two
> > > > > days to get this to work.
> > > > > Thanks for any conclusions.
>
> > > > > Best
>
> > > > > Tobias
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
tvielmetter-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2007-Dec-14 11:42 UTC
Re: Effect.Scale onMousOver and Out on Textelement
ok, it seems like the onmouse over and onmouseof events are set of,
when i move over a div element inside of the div element.
so what i dit then is to put the onmouseover and out on last element.
now its working quit ok, not perfekt but somehox like i wanted it.
if someone is interested in the solutition, heres the code:
<inpt type="hidden" name="scaleset"
id="scaleset1" value="2">
<inpt type="hidden" name="scaleset"
id="scaleset2" value="2">
<inpt type="hidden" name="scaleset"
id="scaleset3" value="2">
<inpt type="hidden" name="scaleset"
id="scaleset4" value="2">
<inpt type="hidden" name="scaleset"
id="scaleset5" value="2">
<inpt type="hidden" name="scaleset"
id="scaleset6" value="2">
<script language="javascript">
function ScaleBig(element)
{
if(document.getElementById(''scaleset''+element).value!=1)
{
document.getElementById(''scaleset''+element).value = 1;
new Effect.Scale(''fisheyeItem''+element,125,{scaleX:
true,
scaleY: true, scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope: ''menuxscope''} });
}
}
function ScaleSmall(element)
{
if(document.getElementById(''scaleset''+element).value!=2)
{
document.getElementById(''scaleset''+element).value = 2;
new Effect.Scale(''fisheyeItem''+element,80,{scaleX:
true,
scaleY: true, scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope: ''menuxscope''} });
}
}
</script>
<div id="mainmenu" style="width:450px;<? echo
$style_add_mainm ?>">
<table border="0" cellpadding="0"
cellspacing="0"><tr><td>
<div id="fisheyeMenu" style="width:450px;">
<div class="fisheyeItem" id="fisheyeItem1"
style="float:left"><a
onmouseover="JavaScript:ScaleBig(1);"
onmouseout="JavaScript:ScaleSmall(1);" class="<? echo
$class_exhibit_c ?>" href="index.php?
site=exhibitions&action=current">CURRENT</a> </div>
<div class="fisheyeItem" id="fisheyeItem2"
style="float:left"><a
onmouseover="JavaScript:ScaleBig(2);"
onmouseout="JavaScript:ScaleSmall(2);" class="<? echo
$class_exhibit_u ?>" href="index.php?
site=exhibitions&action=forthcoming">UPCOMING</a> </div>
<div class="fisheyeItem" id="fisheyeItem3"><a
onmouseover="JavaScript:ScaleBig(3);"
onmouseout="JavaScript:ScaleSmall(3);" class="<? echo
$class_exhibit_p ?>" href="index.php?
site=exhibitions&action=past">PAST</a> </div>
</div>
</td></tr><tr><td>
<div id="fisheyeMenu2" style="width:450px;">
<div class="fisheyeItem" id="fisheyeItem4"
style="float:left"><a
onmouseover="JavaScript:ScaleBig(4);"
onmouseout="JavaScript:ScaleSmall(4);" class="<? echo
$class_artist ?>"
href="index.php?site=artists">ARTISTS</a> </div>
<div class="fisheyeItem" id="fisheyeItem5"
style="float:left"><a
onmouseover="JavaScript:ScaleBig(5);"
onmouseout="JavaScript:ScaleSmall(5);" class="<? echo
$class_gallery ?>"
href="index.php?site=gallery">GALLERY</a> </div>
<div class="fisheyeItem" id="fisheyeItem6"><a
onmouseover="JavaScript:ScaleBig(6);"
onmouseout="JavaScript:ScaleSmall(6);" class="<? echo
$class_news ?>"
href="index.php?site=newsletter">NEWS</a> </div>
</div>
</td></tr></table>
</div>
all the best
tobias
On 14 Dez., 00:43,
"tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org"
<tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:> hmm, ive been trying it a bit further with the scale effect. the
> problem seems to be that js seems to get a lot of onmousover and
> onmouseout action, when iam moving the mouse over the div area. now it
> actually looks like ive chaked the font and it schakes a bit untill it
> stops after ive left my mouse somewhere else.
> is there any trick around to only scale once big, when the mouse
> scrolls over the area and then scale small again, when the mouse
> leaves the area again?
> just like in all those mac os x dock scripts - the seem to take care
> about this with some listening handles - dont hwat this is.
>
> here is my right now example:
>
> <inpt type="hidden" name="scaleset"
id="scaleset" value="2">
> <inpt type="hidden" name="scaleset2"
id="scaleset2" value="2">
> <script language="javascript">
> function ScaleBig()
> {
>
if(document.getElementById(''scaleset'').value!=1)
> {
>
document.getElementById(''scaleset'').value = 1;
> new
Effect.Scale("fisheyeItem1",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope''} });
> new
Effect.Scale("fisheyeItem2",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope''} });
> new
Effect.Scale("fisheyeItem3",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope''} });
>
> }
> }
>
> function ScaleSmall(element)
> {
>
if(document.getElementById(''scaleset'').value!=2)
> {
>
document.getElementById(''scaleset'').value = 2;
> new
Effect.Scale("fisheyeItem1",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope''} });
> new
Effect.Scale("fisheyeItem2",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope''} });
> new
Effect.Scale("fisheyeItem3",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope''} });
>
> }
> }
>
> function ScaleBig2()
> {
>
if(document.getElementById(''scaleset2'').value!=1)
> {
>
document.getElementById(''scaleset2'').value = 1;
> new
Effect.Scale("fisheyeItem4",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope2''} });
> new
Effect.Scale("fisheyeItem5",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope2''} });
> new
Effect.Scale("fisheyeItem6",125,{scaleX: true, scaleY:
> true, scaleFromCenter:true, duration: .2, queue:
{position:''end'',
> scope: ''menuxscope2''} });
>
> }
> }
>
> function ScaleSmall2(element)
> {
>
if(document.getElementById(''scaleset2'').value!=2)
> {
>
document.getElementById(''scaleset2'').value = 2;
> new
Effect.Scale("fisheyeItem4",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope2''} });
> new
Effect.Scale("fisheyeItem5",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope2''} });
> new
Effect.Scale("fisheyeItem6",80,{scaleX: true, scaleY: true,
> scaleFromCenter:true, duration: .2, queue:
{position:''end'', scope:
> ''menuxscope2''} });
>
> }
> }
>
> </script>
> <div id="mainmenu" style="width:450px;<?
echo $style_add_mainm ?
>
> >">
>
> <table border="0"
cellpadding="0" cellspacing="0"><tr><td>
> <div id="fisheyeMenu"
style="width:450px;"
> onmouseover="JavaScript:ScaleBig();"
> onmouseout="JavaScript:ScaleSmall();">
> <div class="fisheyeItem"
id="fisheyeItem1" style="float:left"><a
> class="<? echo $class_exhibit_c ?>" href="index.php?
>
site=exhibitions&action=current">CURRENT</a> </div>
> <div class="fisheyeItem"
id="fisheyeItem2" style="float:left"><a
> class="<? echo $class_exhibit_u ?>" href="index.php?
>
site=exhibitions&action=forthcoming">UPCOMING</a> </div>
> <div class="fisheyeItem"
id="fisheyeItem3"><a class="<? echo
> $class_exhibit_p ?>" href="index.php?
>
site=exhibitions&action=past">PAST</a> </div>
> </div>
> </td></tr><tr><td>
> <div id="fisheyeMenu2"
style="width:450px;"
> onmouseover="JavaScript:ScaleBig2();"
> onmouseout="JavaScript:ScaleSmall2();">
> <div class="fisheyeItem"
id="fisheyeItem4" style="float:left"><a
> class="<? echo $class_artist ?>" href="index.php?
> site=artists">ARTISTS</a> </div>
> <div class="fisheyeItem"
id="fisheyeItem5" style="float:left"><a
> class="<? echo $class_gallery ?>" href="index.php?
> site=gallery">GALLERY</a> </div>
> <div class="fisheyeItem"
id="fisheyeItem6"><a class="<? echo
> $class_news ?>"
href="index.php?site=newsletter">NEWS</a> </div>
> </div>
> </td></tr></table>
> </div>
>
> (sorry for all the div-in-table-in-div stuff. didnt get this clear any
> other way.)
>
> mybe somebody know how to get this "shaking" away?
>
> thanks a million.
>
> best
>
> tobias
>
> On Dec 13, 11:50 pm,
"tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org"
>
> <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
> > ok - makes sense. the problem is a bit that I am not a JS genius, so I
> > actually whanted a class to essentially handle the more diffficult
> > part (the scaling).
> > anyways: i tried to find out how to get the dock script to work on my
> > site and kind of get confused how to implement the class (I am already
> > using scritaculous, which is based on prototype?). then I find out the
> > the dock script is actually only a implementation of a script
fromhttp://www.safalra.com/web-design/javascript/mac-style-dock/which
> > seems to be more logical to implement (I dont whant to load 10
> > diffrent classes into my site).
> > so i tried that one and it worked fine with images. now it comes to
> > the other part: changing the script from images to text. as far as i
> > can see, the whole script works essetially for images. so its not
> > really easy for me to change something, because i dont really
> > understand the whole script.
> > so I am stuck again.
> > now I come to the point where I think: is the dock script really any
> > solution, or might it be easier to keep on trying with the scale
> > effect of scriptaculous? it actually does what i want, exept i cannot
> > control it really.
> > any conclusions from someone? I would really appreciate if someone
> > could point me into the right direction.... even with the dock script.
> > if someone could show me what essetially must be changed about the
> > script to work with text elements.... would be great.
>
> > thanks a million.
>
> > best
> > tobias
>
> > On Dec 13, 9:07 pm, "Nicolás Sanguinetti"
<godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > This one is also meant to be used with images, but that
doesn''t mean
> > > you can''t look at the source code and see how
it''s implemented :)
>
> > > Best,
> > > N.
>
> > > On Dec 13, 2007 6:05 PM,
tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
>
> > > <tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:
>
> > > > hm, well right now cannot test this with text, but the
essential
> > > > difference to all the fisheye dock scripts is, that i want
to use a
> > > > text and not a image. anyways. i didnt know the example
youve posted
> > > > before, so I will check if it will work with this one. other
examples
> > > > that ive tested, onley worked with images and not with text
properly.
> > > > thanks so far for the answer.
>
> > > > best
>
> > > > tobias
>
> > > > On 13 Dez., 19:51, "Nicolás Sanguinetti"
<godf...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > > > Something like this?http://demos.prototype-ui.com/Dock
> > > > > You may want to read the source code of the Dock
component, that might
> > > > > give you some insight as to how to handle it :)
>
> > > > > Best,
> > > > > -Nicolas
>
> > > > > On Dec 13, 2007 3:20 PM,
tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
>
> > > > >
<tvielmet...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
>
> > > > > > Hell all,
>
> > > > > > I hope Iam nt totally in the wrong group or so. I
am Using the
> > > > > > uptodate sciptaculous class.
> > > > > > I am trying to scale a Link onMouseOver a little
bigger, and to scale
> > > > > > it back to the original Size onMouseOut.
> > > > > > Its seems to more difficult than I thought. The
Thing I want to have
> > > > > > is some sort of fisheye effect on a Textelement.
> > > > > > The problem is, that the element usually grows
very big or very small
> > > > > > after some time, so its actually totally out of
control.
> > > > > > is there any way to get this clean and calm, to a
nice an smooth
> > > > > > effect, or am I totally on the wrong way? Ive
tried ques, and I also
> > > > > > tried to not set of a Effect, when a certain value
is set, but this
> > > > > > all didnt solved the behavoir.
>
> > > > > > here is a zip of the code:
>
> > > > > > <inpt type="hidden"
name="scaleset" id="scaleset" value="0">
> > > > > > <script
language="javascript">
> > > > > > function ScaleBig()
> > > > > > {
> > > > > >
if(document.getElementById(''scaleset'').value!=1)
> > > > > > {
> > > > > >
document.getElementById(''scaleset'').value = 1;
> > > > > > new
Effect.Scale("fisheyeItem12",120,{scaleX: true, scaleY:
> > > > > > true, scaleFromCenter:true, duration: .2, queue:
{position:''front'',
> > > > > > scope: ''menuxscope''},
scaleMode:{originalWidth: 200} });
> > > > > > }
> > > > > > }
>
> > > > > > function ScaleSmall(element)
> > > > > > {
> > > > > >
if(document.getElementById(''scaleset'').value!=0)
> > > > > > {
> > > > > >
document.getElementById(''scaleset'').value = 0;
> > > > > > new
Effect.Scale("fisheyeItem12",100,{scaleFrom:120, scaleX:
> > > > > > true, scaleY: true, scaleFromCenter:true,
duration: .2, queue:
> > > > > > {position:''end'', scope:
''menuxscope2''}
>
> ...
>
> Erfahren Sie mehr >>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---