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;
});
Related
I need to add active class to my li list and it works perfectly but I don't want to remove active class if someone click already selected li.
Here is my code.
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
So tried this way but no any luck.
$('.nav li.active').click(function() {
$(this).addClass('active');
});
Any ideas?
You can try with this:
$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
By removing active class from all li items, then adding new active class for current item.
try this. Goodluck
$('.nav').on('click', 'li', function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
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);
});
}
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
/* accordion_head.first().addClass('active').next().slideDown('normal'); */
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
I have tried a few attempts # getting the active accordion header to close on click but cant seem to work it out :(
Thanks in advance
Steven
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
/* accordion_head.first().addClass('active').next().slideDown('normal'); */
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
} else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
});
After searching awhile and not being any type of voice on Javascript, I eventually figured it out. This is a working version :) for peeps like me :) enjoy
It appears you remove the active class from accordion_head with this line:
accordion_head.removeClass('active');
and then add it back immediately afterward with this line:
$(this).addClass('active');
I suspect you don't want to re-add the active class?
Try:
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
else {
// Other code that applies when accordion_head is not active
accordion_head.removeClass('active');
}
});
I'm building a sidenavigation bar for my dashboard and in the process of building it, found a good tutorial which has built something similar. I'm planning to use this as a base work and will customise it afterwards. In the tutorial, the dynamic things have been handled using Jquery. Since I'm using Angularjs for my development, I want to do it Angular way. Can anyone please explain me how can I accomplish it.
Following is the link to tutorial.
Code snippets:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
How can I convert it to do line Angular way ?
Thanks
Replace this bind event with a View/Controller mapping
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
In the view
<div id="menu-toggle" ng-click="toggleClass"></div>
Then in your angular controller
$scope.toggleClass = function(){
angular.element('#wrapper').toggleClass('toggled')
};
You can do the same for this one
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
initMenu can be triggered in your main controller, just replace the $ with angular.element
If there are no old browser compatibility requirement, you should start using CSS3 class for transition instead of JS due to css perf vs js perf
function initMenu() {
angular.element('#menu ul').hide();
angular.element('#menu ul').children('.current').parent().show();
}
initMenu();
For the $('#menu li a').click() event, same, use the View/Controller mapping
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');
});
});