i have an accordion but i want the content to slide in from the left after the accordion has come down.
my code so far however this makes the original slide jumpy.
I also have a fiddle showing the original code...
$(function () {
$(".expand").on("click", function () {
$(this).next().toggle("slide", {
direction: "left"
});
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Try this fiddle.
$(".expand").on("click", function () {
$('.detail').toggle('slide');
})
Related
I'm trying to add a 'fixed' class to a menu once the scroller hits that menu. I've managed to get it working, but having problems removing the class once the user scrolls back to the top.
Here is the site I'm working on: http://www.allbyor.com/
Here's is my JS code:
$(window).bind('scroll', function () {
var menu = $('.bottom-row');
if ($(window).scrollTop() >= menu.offset().top) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
You need to register the original value of the menu.offset().top in a variable, because once you change its class to fixed the top value will be the same as the $(window).scrollTop().
JSFiddle demo.
var menu = $('.bottom-row');
var menu_top_value = menu.offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= menu_top_value) {
menu.addClass('menufix');
} else {
menu.removeClass('menufix');
}
});
I am building a template which can be seen here: http://www.alessandrosantese.com/aldemair-productions/
when you scroll down and you click on the hamburger menu to open the off-canvas menu (foundation 6) the page jumps up.
This is my js so faR:
$(document).foundation();
$(document).ready(function(){
function carouselInit() {
if($('.single-project').length > 4 && !$('.slick-initialized').length) {
$('.single-item').slick({
responsive: [
{
breakpoint: 1024,
settings: 'unslick'
}]
});
}
else {
console.log('4');
}
}
$('.hamburger').on('click', function(){
if($('header').hasClass('fixed')){
$('header').removeClass('fixed').addClass('absolute');
$(this).toggleClass('open');
}
else {
$('header').removeClass('absolute').addClass('fixed');
$(this).toggleClass('open');
}
});
carouselInit();
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(carouselInit, 500);
});
});
When clicking on the hamburger icon the all page shouldn't jump up.
This is the piece of code that makes the page jump:
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-toggle]', function () {
triggers($(this), 'toggle');
});
When you click on the hamburger menu it triggers 'toggle.zf.trigger' on the element with id 'sth'. This further goes into the open function that has this piece of code:
if (this.options.forceTop) {
$('body').scrollTop(0);
}
Guess what it does? :) I can only assume that setting OffCanvas forceTop option to false will remove this behaviour.
How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});
pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').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".