I'm working on this website, and have a little thorn in my side. When I click a link in the sticky note on this page, then hit the back button, the link still appears to be hovered-over.
What would be the least script-intensive way to prevent the link from thinking it's still being hovered over? The problem appears in Safari, Firefox, and Opera, but not in IE8 or Chrome. Tested on both Mac and Windows with same results (excepting IE8, of course... Windows only.)
I was thinking that it would probably be not efficient to attach any kind of mouseover event to the document, since it would fire quite often, unless I sorely misunderstand the way events bubble up through the DOM.
Here's some javascript and html source if you don't want to wade through what I've linked you to:
/* Link hover effects */
//Fix Opera quirk:
$('.tooltip a').css('left', '0px');
// jQuery hover, animating color smoothly.
// If it's in the #tooltip, bump it to the right 5 pixels while hovered.
$('a').hover(function(){
if ($(this).is('.tooltip a')) {
$(this).stop().animate({
color: '#D42B1D',
left: 5
},{
duration: 'fast'
});
} else {
$(this).stop().animate({color: '#D42B1D'},{
duration: 'fast'
});
}
},function(){
if ($(this).is('.tooltip a')) {
$(this).stop().animate({
color: '#005B7F',
left: 0
},{
duration: 600
});
} else {
$(this).stop().animate({color: '#005B7F'},{
duration: 600
});
}
});
--------------------------------------------------
<div class="tooltip transp">
<ul>
<li>About Us</li>
<li>News / Events</li>
<li>Contact Us</li>
<li>Directions</li>
<li>Links</li>
</ul>
</div>
This will get rid of your problem.
$(window).bind('beforeunload', function(){
$('a.tooltip').css({color: '#005B7F', left: 0});
});
However I would ask yourself if all this js is worth it for something that can mostly be achieved using css and the :hover pseudo class.
Can't give a you a quickfix but a suggestion. Just try to edit your code for a use of mouseenter und mouseleave events. As of jQuery 1.4.1 the hover event can be specified (mapping to "mouseenter mouseleave"). In most cases this works better.
Tested Code
Works for me.
$('.tooltip').delegate('a', 'mouseenter', function() {
$(this).stop().animate({
color: '#D42B1D',
left: '5px'
},{
duration: 'fast'
});
});
$('.tooltip').delegate('a', 'mouseleave', function() {
$(this).animate({
color: '#005B7F',
left: '0'
},{
duration: 'fast'
});
});
Related
I am struggling to see why this leaves slight text fragments at the top of where an element has had the HTML replaced and then faded back in. This is the code:
$('.current-station-services li').on('click', function() {
$(this).find('.status').velocity({
opacity: 0
},{
duration: 100,
complete: function() {
$(this).html(data.test);
$(this).velocity({
opacity: 1
})
}
});
});
Here is an image also of the output (artefact above the 'yo!'):
This is a browser issue, not Velocity. Feel free to submit a bug report to webkit/gecko.
So, I'm sure there is a simple answer to this, but after 2 days of research I cannot find a solution.
The Story:
I have a dynamic page. When you get to one section and click on one of the 6 options it pulls up some info (name, place, etc.). I have a jQuery function that makes that info hide about half way after a few seconds. When you hover over that section with the mouse it also will animate up and back down as the mouse leaves it.
The Problem:
How do I make the whole function run again if another of those 6 option is clicked? Each time an option is selected the class with that info comes up, but after this function runs once (the delay part and animate down part) it just stays minimized unless you hover over it. I want it to appear every time and then run through the function. I have tried a number of things, and I'm sure there is a simple solution, just not sure what it is.
Here is a link to my codepen with a sample: http://codepen.io/jsegarra/pen/GxByr
I have also tried to wrap that all in a click function, for clicking on one of those 6 options and thought that would do the trick, but still the same thing:
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').delay(5000).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Just reset the div css before re-running the function
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').css('height', '100px').delay(500).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Here is the html I used with that javascript
<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>
I used the same CSS of your code pen, and the result was a full reclickable option
I don't see the problem. Your code seems to works fine. You've just typed an error while transfering to CodePen. Replace $('this').hover( with $('.bottomTab').hover(.
This .js works perfectly in the fiddle
function animationLoop() {
$("#ToBeAnimated").css({
top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
}).rotate(270);
$("#ToBeAnimated").animate({
top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
}, 1000, function() {
$(this).animate({
rotate: "180deg"
}, function() {
$("#ToBeAnimated").animate({
left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
}, 1000, function() {
$(this).animate({
rotate: "90deg"
}, function() {
$("#ToBeAnimated").animate({
top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
}, 1000, function() {
$(this).animate({
rotate: "0deg"
}, function() {
$("#ToBeAnimated").animate({
left: $("#ToBeAnimated").width() / 2
}, 1000, function() {
setTimeout(animationLoop, 1000);
});
});
});
});
});
});
});
}
animationLoop();
But on the actual site the scissor rotation isn't working or is somehow broken... I have inspected it... guessed and checked... researched possible conflicts...But Im stuck! Maybe I am missing something obvious?
Thanks a million for helping!... To see the animation on the live site just click the "Clip It!!!" button at the bottom of the 1st coupon!
extreme coupon network
UPDATE: It's something to do with having multiple instances of the animation on the page... When I look at a page with one result it works for me... HOWEVER... I am still unable to make it work with many items on the page (which is what I am really after).... Ideally... Whichever coupon you click on will have the animation appear on it... Currently the animation only works on the 1st coupon... and very shakey
Thanks again!
The fiddle you are testing with is using jQuery version 1.8.2. On your webpage, however, you are using version 1.7.2. If you change your jQuery version in the fiddle to 1.7.2, you get exactly the same buggy behavior (jerky animation in FF, no rotation in IE or Chrome) as on your page.
Solution: Update the version of jQuery you're using in your project!
I'm using a jquery navigation menu that has the line follow when you hover over an element and highlights it. It works now, but I'm having a bunch of quirky issues that I can't figure out for the life of me.
I'll show you my code first and then explain the issues I'm having.
$(document).ready(function()
{
$('#nav2 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav2 li.ybg').stop().animate({left:offset.left+12+"px",width:thiswidth+"px"},400,function(){
$(this).animate({height:"28px"},150);
});
},
function()
{
$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
var offset=$(this).offset();
$(this).animate({left:offset.left+40+"px",width:"55px"},600,'easeOutBounce');
});
});
});
Also, here is the DIV for the ybg if it helps:
ul.nav li.ybg { background-color:#5222B4; position:absolute; z-index:50; width:55px; height:4px; margin-top:6px; }
The main problem is that when you move your mouse off of the menu it stops where it is and shrinks instead of going back to the left most item (Home).
There are other quirks but I'm hoping that if I can figure this out I'll be able to work out the rest.
Hopefully that makes sense (the URL is www.buildagokart.com if you want to see what I'm talking about - it's just a random URL I'm using to test).
...
$(this).animate({ left: "0px", width: "55px" }, 600, 'easeOutBounce');
...
Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>
I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/
It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.