[jQuery] Re: Only Fire Mouseover If Not Already Active
Thanks ricardo.
It just got too buggy trying to do what I had original wanted so I
ended up just using the slide effect to show it, and then the drop
effect to hide it. It gives the same overall appeal but it avoids the
hassle with the popup div being covered.
Thanks again for your help!
For anyone who is interested, my modified code looks like:
// Hover function
$(nowIcon).hover(function(){
// Fade icon show popup
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).show(slide, {direction: up},
600);
},function(){
// Un-fade icon hide popup
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide(drop, {direction: down},
600);
});
Thanks again!
On Oct 20, 10:48 am, ricardobeat [EMAIL PROTECTED] wrote:
This helps a bit, but there are still many problems.. your best bet is
to avoid covering the button with the popup:
// Make icon fade
$(nowIcon).mouseover(function(){
if ( !$(nowPopup).is(':visible') ) {
$(this).fadeTo(outSpeed,
outOpacity);
$(nowPopup).show(drop,
{direction: up}, 600);
}
});
// Un-fade icon
$(nowIcon).mouseout(function(){
if ( !$(nowPopup).is(':animated') ) {
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide(drop,
{direction: down}, 1000);
}
});
- ricardo
On Oct 19, 11:44 pm, QuickScriptz [EMAIL PROTECTED] wrote:
Hey,
I have a row of icons that each have a mouseover function. I'm using
the drop animation to produce a popup below each icon on mouseover
of the icon. The problem is that the drop animation makes the popup
flow down over top of the icon and then it stops below the icon.
That being said, while the drop animation is happening, the popup
covers the icon which in turn makes the page think the user has just
mouseout and then when the popup stops below the icon, it thinks the
user has mouseover again. When this all happens, the animation just
continually repeats itself over and over. So, I just want to stop the
repeat. I've tried some stuff like having a variable for whether the
popup is hidden or visible but I just couldn't seem to make it work
properly. If anyone could help me out it'd be really appreciated!
I know my description may be a bit weak so visit the link below for an
example. It's the icons in the top corner and to see what the problem
is just mouseover near the bottom of the icons and just leave your
mouse there for a bit.
Example:http://dev.quickscriptz.ca/v4/
And here is my code:
function doFade(i){
// Variables
var nowIcon, nowPopup, nowIconPos, topPx, leftPx,
topPxS, leftPxS;
// Variable for icon id
nowIcon = #icon + i;
nowPopup = #popup + i;
nowIconPos = $(nowIcon).position();
// Height from top of icon
topPx = nowIconPos.top;
leftPx = nowIconPos.left;
// Popup showing position
topPxS = topPx + 70;
leftPxS = leftPx + 457;
// Position the popups (start as hidden)
$(nowPopup).css({position: absolute, top: topPxS,
left:
leftPxS}).hide();
// Make icon fade
$(nowIcon).mouseover(function(){
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).show(drop, {direction: up},
600);
});
// Un-fade icon
$(nowIcon).mouseout(function(){
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide(drop, {direction:
down}, 1000);
});
Any help is greatly appreciated!
[jQuery] Only Fire Mouseover If Not Already Active
Hey,
I have a row of icons that each have a mouseover function. I'm using
the drop animation to produce a popup below each icon on mouseover
of the icon. The problem is that the drop animation makes the popup
flow down over top of the icon and then it stops below the icon.
That being said, while the drop animation is happening, the popup
covers the icon which in turn makes the page think the user has just
mouseout and then when the popup stops below the icon, it thinks the
user has mouseover again. When this all happens, the animation just
continually repeats itself over and over. So, I just want to stop the
repeat. I've tried some stuff like having a variable for whether the
popup is hidden or visible but I just couldn't seem to make it work
properly. If anyone could help me out it'd be really appreciated!
I know my description may be a bit weak so visit the link below for an
example. It's the icons in the top corner and to see what the problem
is just mouseover near the bottom of the icons and just leave your
mouse there for a bit.
Example: http://dev.quickscriptz.ca/v4/
And here is my code:
function doFade(i){
// Variables
var nowIcon, nowPopup, nowIconPos, topPx, leftPx,
topPxS, leftPxS;
// Variable for icon id
nowIcon = #icon + i;
nowPopup = #popup + i;
nowIconPos = $(nowIcon).position();
// Height from top of icon
topPx = nowIconPos.top;
leftPx = nowIconPos.left;
// Popup showing position
topPxS = topPx + 70;
leftPxS = leftPx + 457;
// Position the popups (start as hidden)
$(nowPopup).css({position: absolute, top: topPxS,
left:
leftPxS}).hide();
// Make icon fade
$(nowIcon).mouseover(function(){
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).show(drop, {direction: up},
600);
});
// Un-fade icon
$(nowIcon).mouseout(function(){
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide(drop, {direction: down},
1000);
});
Any help is greatly appreciated!
[jQuery] Re: Variable Scope
I tried it out and it fixes the problem - thanks a ton Michael!
[jQuery] Get Location Of A Div
Hey, What I'm trying to do is create a popup that appears below an icon when you mouseover the icon. To do this I need to get the location of the icon (div) and then I can position the popup accordingly from there. The issue that I'm running into is if I don't actually directly assign the icon an absolute position using CSS, then when I use css(top) and such, it just returns a value of auto rather than an actual numerical value (pixels). I need to somehow get the location (in pixels from top and left - eg. left: 500px; top: 50px;) of the icon on the screen. The reason for this being that I can't really add/ subtract pixels to position the popup properly because it isn't giving me a numerical value to work with. So, is there any way to do this? For anyone who's wondering, my code currently looks something like this: var pixelsFromTop = $(#icon).css(top); // Value is auto Any help is greatly appreciated! P.S. jQuery rocks - I absolutely love it! Oh, and in case anyone was going to suggest a tooltip plugin: yes, I have heard of the various ones for jQuery and have tried a wide variety of them yet none can seem to accomplish what I'm looking for, so I figured I'd work some of my own magic, or attempt to anyway :)
[jQuery] Re: Get Location Of A Div
Nevermind, I've figured it out now. Turns out I just wasn't using the right search term for the jQuery Documentation. For anyone who is wondering, I ended up using the position() function. Thanks again.
[jQuery] Re: Variable Scope
Thanks Michael. I'll try that out and see where I get!
[jQuery] Variable Scope
So I've been over my code again and again and I've scoured through the
Wiki and Help Documentation but I still cannot seem to make it work. I
have a row of icons and the idea is when you mouseover, a popup (p)
appears below it and then when you mouseout, it fades again.
I've found the best way to do it is that start with all the popups to
the side of the icons (so you can still hover over the icons and the
popups don't just block your way) and the popups begin as hidden
(opacity: 0). When you mouseover the icons, it sets the top and
left attribute of the popup to just below the icon and then it
slowly fades the popup from 0 to .7 and then vice versa when mouseout.
So, here is my code. You can view the product at the site below. Any
suggestions?
http://dev.quickscriptz.ca/v4/index.php
script type=text/javascript //![CDATA[
$(document).ready(function(){
// PNG transparency fix
$(document).pngFix();
// Basic variables
var outSpeed = medium;
var outOpacity = .7;
var inSpeed = fast;
var inOpacity = 1;
// Variables for icons popups
var nowIcon, nowPopup, topPx, leftPx, topPxH, leftPxH, topPxS,
leftPxS;
// Loop it five times
for(var i = 1; i = 5; i++){
// Variable for icon id
nowIcon = #icon + i;
nowPopup = #popup + i;
// Height from top of icon
topPx = $(nowIcon).css(top);
leftPx = $(nowIcon).css(left);
// Popup hidden position
topPxH = topPx - 10;
leftPxH = leftPx - 150;
// Popup showing position
topPxS = topPx + 100;
leftPxS = leftPx - 50;
// Start by hiding popups
$(nowPopup).css({top: topPxH});
$(nowPopup).css({left: leftPxH});
// Set opacity to zero (invisible)
//$(nowPopup).animate({opacity: 0});
// Mouse over event
$(nowIcon).mouseover(function(){
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).css({top: topPxS});
$(nowPopup).css({left: leftPxS});
$(nowPopup).fadeTo(outSpeed, outOpacity);
})
// Mouse out event
$(nowIcon).mouseout(function(){
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).fadeTo(inSpeed, 0);
})
}
})
//]]/script
[jQuery] Re: Variable Scope
Sorry about that MorningZ. My original question actually had to do with whether somehow the value of the variable was being lost because of the fact that when I went to actually use the variable it was nested inside some other code blocks but what Dave said answers my question. The closure is working as it should, but there is only one nowPopup variable and by the time any of the mouseover/mouseout events fire it is the same value for all the elements you've attached it to. So, you're saying that basically, each time it runs through the for loop it doesn't actually like print out the code and replace the variables with their values, but it just cycles through the code X number of times and the variables only become actual values when the function (mouseover) is called? I see what you're saying but if that was in fact the case then shouldn't it be that the icons don't fade either? And I will look into the tooltip plugins.
[jQuery] Scope Of Variables Inside Functions
Okay, so first off, I recently started using jQuery, and it is by far
the best and easiest to use/understand framework that I have ever
used. Huge props to the developers and the community! You guys rock!
Anyway, I've read over the jQuery Documentation but I am left a bit
fuzzy as to the whole idea of the scope of variables within functions.
Say I have a variable (x) inside a for loop which is inside my $
(document).ready. If I want to create a function inside my for loop
(like a mouseover event), is it possible to access (x) from inside
this function?
Here is an example to clarify:
$(document).ready(function(){
// Loop it five times
for(var i = 1; i = 5; i++){
// Declaring the variable
x = 0;
$(.fade).mouseover(function(){
$(this).fadeTo(10, x);
})
}
}
Is there some type of shortcode or easy way to access the value of (x)
from within the mouseover function?
