I am working on a dot navigation for sections in a one page layout. It currently will go to the sections on click. I also have been able to get the labels and dot change to show on hover. But I am struggling to have the navigation reflect the section when scrolling. I have added bootstrap to jsfiddle external resources and added the recommended body code, but something is still apparently missing. Any assistance would be greatly appreciated.
http://jsfiddle.net/carincamen/ram0Ly92/27/
<body data-spy="scroll" data-target=".Vnav">
$(document).ready(function($){
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
});
With lots of research, I was able to get all the functions working properly. The final key was using parPosition. Here is the final code.
http://jsfiddle.net/carincamen/ram0Ly92/
$(document).ready(function($){
var parPosition = [];
$('.par').each(function() {
parPosition.push($(this).offset().top);
});
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
$(document).scroll(function(){
var position = $(document).scrollTop(),
index;
for (var i=0; i<parPosition.length; i++) {
if (position <= parPosition[i]) {
index = i;
break;
}
}
$('.vNav ul li a').removeClass('active');
$('.vNav ul li a:eq('+index+')').addClass('active');
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Related
If you go to the JSFiddle, and click "About" and then "Contact" in rapid succession, the drop-down options (which appear to the right of the parents) appear appended to each other although only one parent is selected - this is not desired. I'm trying to only allow a new selection to be made once the appear/disappear animation has been completed, avoiding any appending of the children's content.
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
console.log("A");
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
});
} else {
console.log("B");
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
});
I tried adding this code after the opening of the function, but it only gave me the alert.
$('#nav .nav-ul li').click(function(){
var $this = $(this);
if(!$this.data('disabled')){
$this.data('disabled', true);
alert('next click enable only in 5 seconds');
setTimeout(function(){
$this.data('disabled', false);
}, 5000);
}
});
I recently bought a website and am having trouble with editing it to make it fit to my needs. The thing I'm trying to achieve is that making the side navbar toggle to hide the nav list when the window size gets smaller than 800 px. I'm sure this must be a ludicrously easy task to complete for many of you but I'm quite new in playing around with such codes. I hope you can take time to help with it.
Thanks in advance,
Here is the jQuery code needs to be edited.
$(document).ready(function() {
"use strict";
$("nav ul li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("nav ul").slideToggle(200);
});
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("nav ul").show();
} else {
$("nav ul").hide();
}
$("nav ul li").unbind('mouseenter mouseleave');
$("nav ul li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
});
if ($(window).width() < 800) {
$("nav ul li a").click(function() {
"use strict";
$("nav ul").slideToggle(200);
});
}
I'm developing a horizontal menu with submenus. I need to use Javascript to show the submenu when the user hovers over the parent menu.
I wrote an example in JSFiddle, but it appears to fail in FireFox! In Chrome, IE and Safari is running!
Here's the test page:
www.andreferreira.eu5.org
Here's the code:
jsfiddle.net/R2ySL/
<script>
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function() {
$('li', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"", "color":"#FFF"});
}
);
});
</script>
You can make that without changing css rules via javascript just add the following to your stylesheet
#menu li:hover > a {
color: #debe65;
background-color: #FFF;
text-decoration:none;
}
and javascript should looks like
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function () {
$('li', this).stop(true, true).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
I'm not that good with js. How do I get this to work with hoverIntent?
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
return false;
});
I have try searching around, but just not too sure how to do it. It's basically working now with hover. but how do I add in .hoverIntent into the code.
This is the Fiddle.
I can't just change .hover to .hoverIntent right?
For hoverIntend, see jQuery plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
(You just have to download the minified version and import it to your application: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js).
Here the jsFiddle: http://jsfiddle.net/Fmu8Y/1/
Also a helpful link: Delay jquery hover event?
$(document).ready(function () {
$('#nav > li > a').hoverIntent(function(){
if (!$(this).hasClass('active')){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
}, function() {
if ($(this).hasClass('active')){
$(this).next().slideUp(800);
$(this).removeClass('active');
}
});
return false;
});
I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
});
});
Using jQuery's one function is perfect for this.
$(function() {
$("#header-translate ul li").click(function(e) {
e.preventDefault();
var $toClose = $("#header-translate li ul")
$toClose.slideToggle(500, function() {
if($toClose.is(':visible')) {
$('body').one('click', function(e) {
e.preventDefault();
$toClose.slideUp(500);
});
}
else {
$('body').unbind('click');
}
});
});
});
What this will do is assure that this click handler will only get executed once, and only when the element is shown.
I believe you need to add a click() handler to the $('body'), and also event.stopPropagation() to your element.
$(function() {
$("#header-translate ul li").click(function(e) { // don't forget that 'e'
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
$("#header-translate").hide();
});
});
You'll want to check if
$(function()
{
var elToHideSelector = "#header-translate li ul";
$("body").click(function(e)
{
if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
{
$(elToHideSelector).hide();
}
});
});
I've used this code:
$(function() {
$("#header-translate ul li").click(function(e) {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
e.stopPropagation(); // so this doesn't register as a body click
});
$("body").click(function(e) {
if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
});
});
Add a click handler to BODY tag that will slide the element up and add event.stopPropagation() to the element that opens the element in the first place so the click to open is not send to BODY.
You can add a listener to the document (since the event bubbles up, you can capture it in a parent element)
$(function() {
$("#header-translate ul li").click(function() {
$("#header-translate li ul").toggle("slide", { direction: "up" }, 500);
$(document).one('click', function(){
$("#header-translate li ul").hide();
});
});
});