I've created a hover effect for my website navigation. http://www.preview.brencecoghill.com/
I have got the effect to work as desired for all aspects accept one - I can't get the orange square to stay down for the currently selected page
for example if I click on "Contact", I am navigated to that page and initially the orange block stays down behind the contact link - however, if I hover over the "contact" link again it causes the block to hide itself again.
How can I make this effect sticky for the current page that I am on? I'm fairly new to javascript - so I'm sure this is something fairly straight forwards - but I can't figure out how to make this work.
The website is based in Wordpress, and is outputting a class ".current_page_item" on the menu - so I am sure that this could be used to identify the menu item and stop the javascript firing if this item is hovered over?
I based the technique on the details available here:
http://line25.com/tutorials/how-to-create-a-cool-animated-menu-with-jquery
I've pasted the javascript I have used on my website here to help you see what I'm doing:
jQuery(document).ready(function () {
jQuery("#main-nav > li > a").addClass("js");
jQuery("#main-nav > li > a").hover(
function () {
jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
},
function () {
jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
}
);
});
exclude current-menu-item class from selector:
jQuery(document).ready(function () {
var nav=jQuery("#main-nav > li:not(.current-menu-item) > a");
nav.addClass("js");
nav.hover(
function () {
jQuery(this).stop(true, true).animate({ backgroundPosition: "(0 -20)" }, 200);
jQuery(this).animate({ backgroundPosition: "(0 -5px)" }, 150);
},
function () {
jQuery(this).animate({ backgroundPosition: "(0 -100px)" }, 200);
}
);
});
Related
<ul style="#" class="hmenu">
<li class="active selected">Home</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
I have a menu with one link as active. I use this script to switch active class on hover
$('.hmenu li').on('mouseenter', function () {
$('.hmenu li').removeClass('active');
$(this).addClass('active');
});
$('.hmenu li').on('mouseleave', function () {
$(this).removeClass('active');
$('.hmenu li[class=selected]').addClass('active');
});
This work's but i want to change it so that when i hover any link, the link should fadeIn and fadeOut on mouseleave.
I can't get my head around this - How can i do this ?
Here is the fiddle : http://jsfiddle.net/GdSUg/
Add the:
transition: all 1s;
to the css code in the class .active
this is an example
See the reference for more information: Here
There you go
$('.hmenu li').hover(function () {
$(this).animate({
backgroundColor: "#89B908"
}, 300);
}, function () {
$(this).animate({
backgroundColor: "#FFF"
}, 1);
});
Fiddle
CSS transitions are one way. Another is to use jQuery UI's built in switchClass functionality. Using your demo:
$('.hmenu li').hover(function() {
if (!$(this).hasClass('active')) $(this).switchClass('','active', 200);
}, function () {
$(this).switchClass('active', '', 200);
});
Requires
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Reference: http://jqueryui.com/switchClass/
You may notice weird behavior when quickly hovering over elements that require a delayed transition (i.e. - fade, slide) -- Consider using hoverIntent:
What is hoverIntent?
hoverIntent is a plug-in that attempts to
determine the user's intent... like a crystal ball, only with mouse
movement! It is similar to jQuery's hover method. However, instead of
calling the handlerIn function immediately, hoverIntent waits until
the user's mouse slows down enough before making the call. Why? To
delay or prevent the accidental firing of animations or ajax calls.
Simple timeouts work for small areas, but if your target area is large
it may execute regardless of intent. That's where hoverIntent comes
in...
To animate colours reliably with JQuery, you need to use the JQuery Color Plugin (https://github.com/jquery/jquery-color). You can then do something like the following:
var active = {
backgroundColor: '#89B908',
color: '#FFF'
},
inactive = {
backgroundColor: '#FFF',
color: '#000'
};
$('.hmenu li').on('mouseenter', function () {
$(this).animate(active, function () {
$('.hmenu li').removeClass('active').css(inactive);
$(this).addClass('active').css(active);
}).find('a').animate({
color: '#FFF'
});
});
$('.hmenu li').on('mouseleave', function () {
$(this).animate(inactive, function () {
$(this).removeClass('active');
$('.hmenu li.selected').addClass('active').css(active);
}).find('a').animate({
color: '#000'
});
});
You can find a working jsFiddle here: http://jsfiddle.net/GdSUg/28/
How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});
Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle
It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect
I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});
Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});
I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.
When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.
Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({ width: "903px" });
});
}, function() {
$(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
$(".children").slideUp(300);
});
});
Working example: http://jsfiddle.net/varFS/
Titanium, you must use timeout for hiding your menu to get desired result:
$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({
width: "400px"
});
});
}, function() {
setTimeout(function() {
if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
$(".children").css("padding-top", "21px").hide();
}
$(".menu-line").stop(true, false).animate({
width: "0px"
}, function() {
$(".children").slideUp(300);
});
}, 400);
});
Working Example
Right now I have a div that slides right to left and then vice versa back to its original place. But overall its not really how I want it to work. My main goal: is for the user to hover over the main div which will then pull out the sliding div. The part that gets tricky is the following: If the user forgets to slide the dive back, I want to give it time frame that will cause it to close automatically after a certain time has passed. Here is my working code so far: jsfiddle.net/eMsQr/14/.
My JavaScript function:
$(document).ready(function() {
$("#arrow").hover(
function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
},
function(){}
);
});
$("#arrow").click(function(e){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});
Try this: http://jsfiddle.net/vansimke/cJ5pf/
I hooked into the mouseleave event and added a setTimeout. You might need to catch the timeout if you need to cancel it later (i.e. they reenter the arrow)
Here's a jsFiddle example that sets a 3 second delay via the setTimeout function.:
jQuery
var cto;
$("#arrow").hover(
function() {
clearTimeout(cto);
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});
$("#arrow").click(function(e) {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
});
Note that if the user moves his mouse away and then returns it to the div, the box remains open again until they leave at which point the 3 second countdown timer begins.
You need to make sure you utilize the second function() in jQuery's hover method.
At the moment you're only animating your slide-out div when the user hovers over the main div. You want it to also animate on hover out.
Here's the updated jsFiddle.
Inside the hover function you can add an additional line to trigger the click event using the below line:
setTimeout(function() { $("#arrow").trigger('click'); }, 5000);
the 5000 is the number of milliseconds to wait before triggering the click.
see the fiddle here: http://jsfiddle.net/eMsQr/51/
it uses the mouseleave jquery and also delay. Change the value in the delay to get the time you want.
$("#arrow").mouseleave(function(){
$("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});
You need to use setTimeout() to set the delay to closing the div. You also need to use clearTimeout() in the opening function to stop it auto closing if someone mousesout, then back over again:
var timeout;
$("#arrow").hover(
function() {
clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
timeout = setTimeout(function() {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
}, 1000); // close the open div 1 second after mouseout.
}
);
Example fiddle