I am trying to slide down li elements on mouseenter of ul and on mouseleave it will slideup its li elements. When I have varying number of li elements, when one slides up it automatically causes mouseenter on other ul
How can this be prevented to ensure a smooth expand/collapse experience?
This is what i have tried so far, i am using hovering variable to have a flag so that for next 2 seconds the mouseenter doesnt cause collapsing/expanding
var hovering=0;
$("ul").mouseenter(function (e) {
console.log(hovering + " " + Math.random());
setTimeout(function(){
clearHover();
}, 1000);
if (hovering == 0) {
hovering = 1;
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
}
});
$("ul").mouseleave(function (e) {
$(this).children("li").slideUp();
hovering = 0;
});
function clearHover(){
hovering = 0;
console.log(hovering + " " + Math.random());
};
This is the fiddle
Your problem is not that it automatically opens another ul, all your ul's are 100% width. No wonder you will hover over one of them when leaving another. Try adding this in the css:
ul {width: 50px;}
If you display the ul as a table, you'll get a width that flexes with the content of the header text (where you have "1st", "2nd", etc.)
ul {display: table;}
Related
At the moment,my navbar does the following using jquery on my WordPress site:
When I scroll at about 150 px,it gets fixed to the top
var num = 150; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav#site-navigation').addClass('fixed');
} else {
$('nav#site-navigation').removeClass('fixed');
}
});
Then as I scroll down to about, the about menu item get highlighted...then as I scroll down to products section,the products and services menu item gets highlighted,the about dehighlihts and so forth.
$("nav ul li a").addClass("marker");
var navLinks = $('nav ul li a'),
navH = $('nav').height(),
section = $('section'),
documentEl = $(document);
documentEl.on('scroll', function() {
var currentScrollPos = documentEl.scrollTop();
section.each(function() {
var self = $(this);
if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
var targetClass = '.' +self.attr('class') + 'marker';
navLinks.removeClass('active');
$(targetClass).addClass('active');
}
});
});
Now, How can I make the color of each menu item be different at my preference?
Eg:
If I scroll down to about,it should change the menu item color to green.
For products and services, the menu item should be orange...and so forth for the others.
You can update your scrolling function like this:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav#site-navigation').addClass('fixed');
$("a.marker.active:contains(About)").addClass('item-2');
$("a.marker.active:contains(Products)").addClass('item-3');
$("a.marker.active:contains(Scent)").addClass('item-4');
$("a.marker.active:contains(Clients)").addClass('item-5');
$("a.marker.active:contains(Contact)").addClass('item-6');
} else {
$('nav#site-navigation').removeClass('fixed');
}
});
In your stylesheet you can simply target each class that you added and play around with it.
Eg:
a.marker.item-2.active {
color: rgba(213, 221, 45, 0.6) !important;
}
Let me know if it does not work
Check out 'ScrollSpy'. It is a Bootstrap JS that does exactly what you want. I hope it answers your question. :)
i think this jquery script will help you
$(".colors .main-navigation ul.nav >li").each(function(i) {
$(this).addClass("colors"+(i+1));
});
This code help you to add you li element add a different class like color1, color2 color3 and then you style it on you own.
what to change:
$(".colors .main-navigation ul.nav >li")
change
your ul
Since you already toggle the the class active for the currently active item you could simply give each item an id (or a specific class like .item-1, .item-2 etc.) as well and style them through CSS:
#idOfItem1.active {
color: yellow;
}
#idOfItem2.active {
color: red;
}
// etc.
I am attempting to do some JS animation, but failing miserably.
Essentially I have 3 links placed next to each other.
The first two are simply links that open in a new window.
The third button when clicked needs to slide out to the left, and overlay it's neighbours, revealing a span which is hidden by default (a URL).
I've set up a basic codepen example:
http://codepen.io/anon/pen/EsojF
The idea is that the third button when pressed will fill the width of the entire UL, sitting on top of the other links or they could slide away to zero width and the URL inside the span should be then displayed (ideally the link would also copy to clipboard but not yet even considered that route).
Can anyone offer any pointers?
My client has a number of users still using IE9 so I believe javascript or jquery to be the best approach?
Edit, Updated
Try (v2)
jQuery(document).ready(function () {
jQuery('.get-url a').click(function (e) {
// cache selector
var elem = jQuery(this);
// `elem` parent sibling `li` elements
var parents = elem.parent("li").siblings();
// set `width` of `elem` parent `li`
var width = parseInt(elem.parents("ul").css("width")) * .6;
// toggle `parents` ,
// set `width` of `elem` parent `li`
// toggle `url-reveal` `span`
if (elem.find(".url-reveal").css("display") === "none") {
// added minimal slide effect
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(200)
, elem.parent("li").animate({width: width }, -200));
} else {
// reverse toggle
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(-2000, "linear")
, elem.parent("li").animate({width: "100"}, -1000, "linear"))
}
e.preventDefault();
});
});
jQuery(document).ready(function () {
jQuery('.get-url a').click(function (e) {
// cache selector
var elem = jQuery(this);
// `elem` parent sibling `li` elements
var parents = elem.parent("li").siblings();
// set `width` of `elem` parent `li`
var width = parseInt(elem.parents("ul").css("width")) * .6;
// toggle `parents` ,
// set `width` of `elem` parent `li`
// toggle `url-reveal` `span`
if (elem.find(".url-reveal").css("display") === "none") {
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(200)
, elem.parent("li").animate({width: width }, -200));
} else {
parents.toggle(-1000).promise()
.done(elem.children('span').toggle(-2000, "linear")
, elem.parent("li").animate({width: "100"}, -1000, "linear"))
}
e.preventDefault();
});
});
.url-reveal {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
ul li {
width: 100px;
padding: 10px;
display: inline-block;
background: #c50000;
margin: 0;
}
ul li a {
color: #fff;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Google
</li>
<li>Facebook
</li>
<li class="get-url"><span class="label">Get URL</span> <span class="url-reveal">http://www.longURLGoeshere.com</span>
</li>
</ul>
If you remember the by making something relative you can move it's position on the screen without moving it in the DOM, then remembering that by default overflow is visible you can work out the parents offset and make the span grow outside of it's parent.
I have amended your codepen to make it work: http://codepen.io/anon/pen/Czwlk
However my real answer would be to recode and take another viewpoint, instead of making the link grow why don't you cover all three links with a new temporary link:
jQuery('<span>Long Url</span>').insertAfter(this);
Assuming you aren't injecting a link but rather a plain text url for the user to manually share with.
Answer 2!
The way I would code it is as follows. Firstly I would set the parent UL to display inline-block so it wraps the links tightly, and then give it position relative. Then when the link is clicked I inject an input field into after the link with position absolute - this way I can make it fill the UL and completely cover all the links. As you can see for extra sugar I also focus and select the input so the user can copy and paste it where they want. All you would need to finish the code is decide how you want to close the tooltip afterwards. The easiest way would be to add a close icon to the tooltip which .remove() the tooltip on click. As it doesn't affect the link it would still work and inject a new div if required.
Demo here: http://codepen.io/anon/pen/dkGAy
Full animated demo here: http://codepen.io/anon/pen/iFmeu
The active class displays a dot icon above the list item. I would like it so that when you hover over another list item the icon slides left or right and stops in the correct position.
I have already added the JS to take the active class off and add it to the currently hovered item, but would very much appreciate help in animating this transition.
Fiddle: http://jsfiddle.net/WgszM/
$(".desktop-menu li").hover(function(){
$("ul li.active").removeClass('active');
$(this).stop().addClass('active');
})
Well in order to have the effect you want, that is: the dot moving to another element, you are going to need to create an extra element which will move to where you hover.
So I suggest doing something like this:
$('ul li').hover( function() {
var acl = $(this).offset();
var aw = $(this).width();
var ll = acl.left + parseInt( aw / 2 );
var tt = acl.top - 8;
$('#active').animate({
left : ll + 'px',
top : tt + 'px'
});
});
Here is the full example: http://jsfiddle.net/ec9cm/
Is this what you want to achieve?
The best thing is to replaced 'left' attribute to 'marginLeft' attribute.
You will see the difference and set pad/margin accordingly.
Have fun with that.
You have to add these style in your css then it only ANIMATE
header .desktop-menu .nav nav ul{
position:absolute;
}
header .desktop-menu .nav nav ul li{
position:relative;
}
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
What I'm trying to do is to fade in a div by rolling over a link. Once your mouse is over the link, you're able to mouse around the div that just faded in and you can click links inside the div.
Currently I have four links and each have a div with links and images in. On hover of the link the div fades in below the link then you can move your mouse over the div and use the images + links within. On roll out of the link or the div, it should fade out. Also, if you move your mouse to another main navigation link it should fade out the previous and fade in the new div.
The problem seems to be that the previous DIV will sometimes not fade out if you rapidly move to next link. I'm drawing a blank, any ideas?
Problem solved, answer is here: http://jsfiddle.net/UkneJ/3/
This is what I'm working with: http://jsfiddle.net/DemhU/17/
$('#div1, #div2, #div3, #div4').hide();
var is_over;
var hide_dropnav = function(a) {
setTimeout(function() {
if (is_over) {
return;
} else {
var a_name = $(a).attr('data-name');
$('#' + a_name).fadeTo(250, 0);
$('#nav li a').removeClass('active');
}
}, 10);
}
$('#nav li a').hover(function() {
var elem_name = $(this).attr('data-name');
$('#' + elem_name).stop(true,true).fadeTo(150, 1);
is_over = true;
$('#nav li a').removeClass('active');
$(this).addClass('active');
var that = this;
hide_dropnav(that);
}, function(){
is_over = false;
hide_dropnav(this);
});
$('#div1, #div2, #div3, #div4').hover(function() {
is_over = true;
}, function() {
is_over = false;
});
There are a lot of ways to do this, but I threw together a quick working example of the method I've used before:
http://jsfiddle.net/UkneJ/
In this example, I'm binding hover to both the A and the DIV, and using a slight delay to check is "is either element hovered?" state.
You can also just bind hover to the wrapping LI, which makes things much simple. This only works if both your link and your div are contained in each LI, though:
http://jsfiddle.net/UkneJ/1/
possible without javascript: http://jsfiddle.net/XENww/