[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
Hi,
You can use effects queues[1] to handle that. Either use one queue
for all of your effects, or -- and I think this probably makes more
sense if I understand what you're doing -- use a queue for each
element, so the fade can't stomp on the appear.
So where you're creating the appear effect, you might do something
like this:
// Assuming 'element' has a reference to the extended element, and
// that your elements have ids (if they don't, use element.identify()
// instead of element.id)
new Effect.Appear(element, {
queue: {
scope: element.id,
position: 'end'
}
});
...and then when you're creating the fade, it's exactly the same
except for the effect you use. That way, the fade will allow the
appear to complete before it starts doing the fade, but by using the
element's ID as the queue scope, you don't prevent other effects on
other elements.
[1] http://wiki.github.com/madrobby/scriptaculous/effect-queues
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On May 21, 7:44 pm, BB Design bradbans...@gmail.com wrote:
Here is my test page:
http://secure.bbdesign.com/lenoradame/history.asp
You can see that if you mouse over and off the links at the top, the
appear/fade work nicely. But if you do it too quickly, you get
undesirable results. Sometimes the effect is temporarily disabled,
until you mouseover some other link, then it works again. Here is how
I'm doing it:
a onmouseover=$('navicon1').appear({duration: 0.3}); return false;
onmouseout=$('navicon1').fade({duration: 0.3}); return false;
href=index.aspHOME/a
Is there some way to make it so the effects won't interrupt each
other? My Javascript skills are not what they should be.
Thanks!
-Brad
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
Thanks, perfect! Can that be done with my inline code, though?
Or if not, for some reason I am having trouble understanding how to
setup the effect in a Javascript and then call the effect with
onmouseover and onmouseout. What would be the equivalent of a
Javascript version of the same thing as this:
a onmouseover=$('navicon1').appear({duration: 0.3}); return false;
onmouseout=$('navicon1').fade({duration: 0.3}); return false;
href=index.aspHOME/a
I'm really getting confused as to how to name things, reference
elements, etc.
Thanks!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
For example, this is what I'm trying, but it isn't working:
script type=text/javascript language=javascript
function navicon1on {
effect.appear('navicon1', {duration: 0.3});
}
function navicon1off {
effect.fade('navicon1', {duration: 0.3});
}
/script
div class=posnavtext1a onmouseover=navicon1on();
onmouseout=navicon1off(); href=index.aspHOME/a/div
div id=navicon1 class=posnavicon1 style=display: none;img
src=art/ic_homeHover.gif alt=Home width=71 height=55
border=0 //div
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
I would give each navigation element an ID, but that's just me.
Working with the HTML you have here, you could do this to hook into
TJ's elegant code.
$$('div. posnavtext1 a').each(function(element){
element.observe('mouseover',function(evt){
new Effect.Appear(element, {
queue: {
scope: element.identify(),
position: 'end'
}
});
});
element.observe('mouseout',function(evt){
new Effect.Fade(element, {
queue: {
scope: element.identify(),
position: 'end'
}
});
});
});
Get rid of all the onwhatever event handlers in your HTML. They aren't
needed any more.
Walter
On May 22, 2009, at 9:07 AM, BB Design wrote:
For example, this is what I'm trying, but it isn't working:
script type=text/javascript language=javascript
function navicon1on {
effect.appear('navicon1', {duration: 0.3});
}
function navicon1off {
effect.fade('navicon1', {duration: 0.3});
}
/script
div class=posnavtext1a onmouseover=navicon1on();
onmouseout=navicon1off(); href=index.aspHOME/a/div
div id=navicon1 class=posnavicon1 style=display: none;img
src=art/ic_homeHover.gif alt=Home width=71 height=55
border=0 //div
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
Hi,
Thanks, perfect!
No worries!
Can that be done with my inline code, though?
It _can_, yes, just put the queue parameter in your existing options
blocks. But as Walter indicates, you really don't need to be using
inline event attributes anymore.
For example, this is what I'm trying, but it isn't working:
script type=text/javascript language=javascript
function navicon1on {
effect.appear('navicon1', {duration: 0.3});
}
function navicon1off {
effect.fade('navicon1', {duration: 0.3});
}
/script
A couple of things. Case (capitalization) is significant in
JavaScript, so you need to be sure you're using exactly the right
capitalization. Script.aculo.us makes each effect available in two
ways: A constructor that takes the element to act on as a parameter,
or as a method of an extended element. You're using the constructor
there, and script.aculo.us' constructors and Effect namespace are both
initially capped (the first letter is capitalized). You're also
missing the new operator. It might help to go back and review the
demos and examples on the script.aculo.us documentation site[1].
Looking at the source of the page you linked, I think you might want
to review your use of IDs and class names. IDs are for uniquely
identifying elements; class names are for marking elements (usually
more than one) that share common characteristics. You seem to be
using class names a bit like IDs.
I'm really getting confused as to how to name things, reference
elements, etc.
It's pretty straightforward. There are basically three ways to
reference an element:
1. By its ID, if it has one. You're already doing that in your code:
$('navicon1').appear({duration: 0.3});
That's referencing an element with the ID 'navicon1', using
Prototype's $ function. So you're on the way. Read up on $ here[2]
2. Via CSS selectors. Prototype provides very powerful CSS selector
functionality. For instance, suppose you want to get an array of
every element in your document with the CSS class foo. You can use
Prototype's $$ function[3] to do that:
var a = $$('.foo');
The syntax supported is (nearly all of) CSS3, so that's pretty
powerful stuff.
3. By its relationship with some other element you already have a
reference to. So say you have this structure:
div
spanBlah blah blah/span
spanHumdee doo/span
/div
Now, suppose you have a reference to the first span element, and you
want to refer to the span that follows it. You can do that using DOM
traversal, and Prototype provides some very nice DOM traversal stuff,
including the Element#next function[4], which finds the next sibling
of the element that matches the selector you give it. Since the spans
in the example above are siblings (they have the same parent),
assuming 's1' is a reference to the first span, I can get a reference
to the second span using s1.next():
var s2 = s1.next('span');
This is useful for when you know the relationship between elements,
and if you know that relationship is stable. There's also
Element#down to find descendant elements, Element#up to find
ancestors, etc.
Let's bring a few of these things together. Suppose I have this
structure which I'll call an item:
div class='item'
a href='...'Blah blah/a
div class='icon'.../div
/div
And let's suppose the structure of each item is stable; I'm not likely
to change it without expecting to make code changes as well. Suppose
there are several items on a page, and I want the link within each
item to do something to the div that follows it. I *could* put an
onclick attribute on each link, but that's a lot of work and I'm
lazy. Instead, I'll use Prototype's dom:loaded event (which happens
when the page has been loaded, but without waiting for the images to
load -- so, sooner than window.load):
script type='text/javascript'
document.observe('dom:loaded', function() {
// ...my code here...
});
/script
Okay, so now I have code being called when the page loads. What do I
want to do? First, find all the item links:
var links;
links = $$('.item a');
(That selector matches any anchor within an element with the item
class.)
Then I want to loop through the array of links and hook up a couple of
event handlers on each of them. I could use a normal for loop and
there's nothing wrong with that, but Prototype extends arrays with a
function called Enumerable#each[5] which makes things like this pretty
easy:
links.each(function(link) {
// ...my code here...
});
#each will call the function you give it for each item in the array,
passing it as the first parameter to the function. It's just a
shorthand way of writing this:
var n, link;
for (n = 0; n links.length; ++n) {
link = links[n];
// ...my code here...
}
So, for each link I want to set up a couple of event handlers -- one
for mouseover, another for mouseout. I can use
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
This is over my head at the moment, so I will need to start out small
and work my way up. I'm trying to do something really simple, which is
just to add the queue to my inline event. If I can be confident that
that works, then I'll try the no-inline-event method. Here is my
existing code:
div class=posnavtext1a onmouseover=$('navicon1').appear
({duration: 0.3}); return false; onmouseout=$('navicon1').fade
({duration: 0.3}); return false; href=index.aspHOME/a/div
div id=navicon1 class=posnavicon1 style=display: none;img
src=art/ic_homeHover.gif alt=Home width=71 height=55
border=0 //div
I tried adding this:
, queue:{scope: element.identify(), position: 'end'}
...in various places, but I can't get it to work. The effect doesn't
happen at all, it must be a syntax problem? What must I do to simply
implement the queue, by sending the event to the end of the queue?
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: using fade and appear on the same object concurrently, interrupt one another, unwanted behavior
Hi,
You want to use a queue for each icon; since your inline code already
use the icon element's ID literally, you can just supply that
literally as the scope.
, queue: {scope: 'navicon1', position: 'end'}
E.g., in this case, you don't need Element#identify. (The reason it
wasn't working was that element was not defined anywhere.)
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On May 22, 5:14 pm, BB Design bradbans...@gmail.com wrote:
This is over my head at the moment, so I will need to start out small
and work my way up. I'm trying to do something really simple, which is
just to add the queue to my inline event. If I can be confident that
that works, then I'll try the no-inline-event method. Here is my
existing code:
div class=posnavtext1a onmouseover=$('navicon1').appear
({duration: 0.3}); return false; onmouseout=$('navicon1').fade
({duration: 0.3}); return false; href=index.aspHOME/a/div
div id=navicon1 class=posnavicon1 style=display: none;img
src=art/ic_homeHover.gif alt=Home width=71 height=55
border=0 //div
I tried adding this:
, queue:{scope: element.identify(), position: 'end'}
...in various places, but I can't get it to work. The effect doesn't
happen at all, it must be a syntax problem? What must I do to simply
implement the queue, by sending the event to the end of the queue?
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
