I have a bit of javascript. I want to achieve that when you click on the menuBtn class that it changes 'nav' to fixed fixed.
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
//nav position fixed//
});
$('.menuBtn').click(function() {
$('.nav').css('position','fixed');
});
Not quite sure if nav is an ID or a class. # or . the code should look like this.
Related
On clicking .cart-contents-toggle the #cartplus-dropdown div should slide down and at the same time slide up without clicking on it a second time. Here is the URL where this is implemented: Website Link
jQuery(document).ready(function() {
jQuery('#cartplus-dropdown').hide();
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').slideToggle();
});
});
Please use the updated code below and let me know if you have any issue or query.
jQuery(document).ready(function() {
jQuery('.cart-contents-toggle').on("click", function() {
jQuery('#cartplus-dropdown').toggle();
jQuery('#cartplus-dropdown').slideToggle();
});
});
Hope this may be helpful to you.
Tried this and working now
jQuery('.c-btn').mouseenter(function(e) {
jQuery('.cartplus-dropdown').slideDown();
e.stopPropagation();
});
jQuery('.c-btn').mouseleave(function(e) {
jQuery('.cartplus-dropdown').slideUp();
e.stopPropagation();
});
I have a navigation menu, when i hover over the links i want to show each links sub menu then toggle or hide and show each individual one.
At the moment when I hover over the link on the navigation menu it displays all the sub menus for all the links.
I have attached a fiddle with a demo of my code so far: -
http://jsfiddle.net/QTm2c/1/
Here is the jQuery
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$("span.navmain__item--subnavholder").toggle();
})
})
Thanks
Use :
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).children("span.navmain__item--subnavholder").toggle();
});
});
Fiddle
Try this:
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
$(this).siblings().toggle();
})
})
You have to target the specific submenu. Inside the hover() handler, use:
$("span.navmain__item--subnavholder", this.parentElement).toggle();
You just have to get the subnavholder for the element you're hovering. In the callback, the element you're hovering over is stored in this (as an HTML Element).
Changing
$("span.navmain__item--subnavholder").toggle();
to
$(this).parent().find("span.navmain__item--subnavholder").toggle();
Will do the trick!
In your current setup this should do it
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).find(".navmain__item--subnavholder").toggle();
})
})
You could also add indexing to the script. Here is edited, working jssfiddle: http://jsfiddle.net/QTm2c/8/
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
var index = $( "li.navmain__item a" ).index( this );
$("span.navmain__item--subnavholder"+index).toggle();
})
})
I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});
I have tried to make a menu that collapses earlier expanded chioces but i cant make it work.
var currentId;
$(document).ready(function () {
$(":range").rangeinput({
progress: true
});
/* Slide Toogle */
$("ul.expmenu li > div.header").click(function () {
var arrow = $(this).find("span.arrow");
if (arrow.hasClass("up")) {
arrow.removeClass("up");
arrow.addClass("down");
} else if (arrow.hasClass("down")) {
arrow.removeClass("down");
arrow.addClass("up");
}
$('#' + currentId).parent().find("ul.menu").slideToggle();
$(this).parent().find("ul.menu").slideToggle();
currentId = $(this).attr('id');
});
});
You can find the homepage at this adress: http://admin.dq.se/kramers/nyamenyer.html
So if I press "BIL" i want "BIL" to expand .. and afterwards if i press "MC" i want BIL to collapse and MC to expand. Thanks for the help!
Slide up everything before sliding down
$("ul.expmenu li > div.header").click(function () {
$(this).parent().siblings().find('ul.menu').slideUp();
$(this).parent().siblings().find('span.arrow').removeClass('up').addClass('down');
....
});
This isn't quite right:
$(this).parent().find("ul.menu").slideToggle();
You need to go up higher:
$(this).closest('ul.expmenu').find("ul.menu").slideToggle();
I would do something roughly like this:
/* Slide Toogle */
$("ul.expmenu li > div.header").click(function () {
var arrow = $(this).find("span.arrow");
if (arrow.hasClass("up")) {
arrow.removeClass("up");
arrow.addClass("down");
} else if (arrow.hasClass("down")) {
$('.arrow.up.').parents('li').children('ul.menu').slideUp();
$('.arrow.up.').removeClass('up').addClass('down');
arrow.removeClass("down");
arrow.addClass("up");
}
Which basically looks for any 'up' arrows, and brings their menus up (note the DOM traversing), only in the event that the arrow in question is still "down".
My code is:
$(document).ready(function() {
$(".more").click(function(e) {
$(this).toggleClass("open");
if (!$(".more").hasClass(".icon-arrow-down")) {
// alert('Yep has class');
$(this).toggleClass("icon-arrow-down");
$(this).toggleClass('icon-arrow-up');
}
else {
// alert('all ok');
}
});
});
A little messy as i was testing some things out. Basically i have a menu, with a .more class added for dropdowns. People on mobile click the more, which adds a class of .open to the menu so people can see it. Now my problem is, this code doesn't seem to work 100% of the time.
Sometimes the classes get confused and i end up with a menu open, but a class of icon-arrow-down still.
And also, how would i add something in so that the open class gets removed if another more button is clicked?
Help appreciated as always.
In menus I always use something like this:
$(document).ready(function() {
$(".more").click(function(e) {
if($(this).hasClass("open")) {
// if it's open then just close it
$(this).removeClass("open");
} else {
// if it's closed, then close everything else and open it
$(".more").removeClass("open");
$(this).addClass("open");
}
/* TODO: now do something similar with icon-arrow */
});
});
Shouldn't you just be checking if the current element has the .icon-arrow-down class. So rather than
if (!$(".more").hasClass(".icon-arrow-down"))
this
if (!$(this).hasClass(".icon-arrow-down"))
Maybe consider using
$(".more").click(function(e) {
if( $(this).hasClass("open") ) {
$(this).removeClass("open").addClass("closed");
} else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("open").addClass("closed");
$(this).removeClass("closed").addClass("open");
}
});
Then use the .open and .closed class to set your arrow styles
Fiddle here.
Simple but shows you what you can do.
You could remove the class .open from all and then add it to the clicked one:
$(document).ready(function() {
var $more = $(".more");
$more.click(function(e) {
var $this = $(this);
if ($this.hasClass("open") {
$more.removeClass("open");
} else {
$more.removeClass("open");
$this.addClass("open");
}
});
});