I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});
You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle
I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/
Related
I have a "Steps" system where people can click a button to proceed to the next step. The problem is that when the content is really long, the page stays "down there" and then people have to scroll up to see the content of that next tab and back down to proceed to the next step again.
Is there a simple way to make it jump to a page anchor like # and back up to the <h4 class="list-group-item-heading">Step 2</h4> when the new tab is activated? Here is the jQuery:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
// DEMO ONLY //
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
// DEMO ONLY //
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(2)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});
And a jsFiddle: http://jsfiddle.net/asy4267m/1/
I tried to do something like $('.list-group-item-heading').focus(); but that didn't work.
Note it obviously works best if the browser window is not full size and therefor the scrolling is forced.
You can use animate and scrollTop to moving your favorite ID
$('html, body').animate({
scrollTop: $("#YourDiv").offset().top
}, 2000);
you can see here http://jsfiddle.net/Stratos123/qywaLszg/ the code for what i am trying to do. The isotope works perfectly and when you click the image the box opens up with the correct information but what happens is once the box is clicked the page scrolls to the top of the html page instead of scrolling to where the navigation is under the red box in example.
If i change the following code
// Portfolio Open and close
$(document).ready(function() {
$('.portfolio li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio').addClass('item_open');
to:
// Portfolio Open and close
$(document).ready(function() {
$('.gallery li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery').addClass('item_open');
the portfolio opens and closes perfectly but then the isotop wont work.
Any ideas? I have been working on this for almost 2 weeks now. Going insane.
I guess you want something like this http://jsfiddle.net/qywaLszg/6/embedded/result/
Update
To work with your ul list you need to adjust the classes when you call the filter
Working example here http://jsfiddle.net/qywaLszg/9/embedded/result/
$('#filter li a').click(function () {
$('#filter li.selected').removeClass('selected');
$(this).parent().addClass('selected');
var selector = $(this).parent().attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linea',
queue: false
}
});
return false;
});
Just add in CSS
#portfolio{
position: relative;
}
And in the jQuery
$(".portfolio ul li a").click(function () {
$('html, body').animate({
scrollTop: $("#top").offset().top
}, 400);
});
I guess, it because parseInt cannot be in a string
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
also, on every click function, you could
return false;
How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})
Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/
I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle
I purchased a theme off of http://themeforest.net and now the them was taken off.
The original theme functionality was to have all of the links pages inside of their own divs in the index page however I changed the functionality so that each link is on its own controller since I am using Codeigniter.
What I want to happen is when a new link is clicked it still rolls up the content div and goes to the clicked link and then rolls down the content of that page. As of right now it rolls up ALL the way up the page and doesn't even load the new page. The commented section of code is what the original code was from the template.
/*****************************************************
MENU TRANSITION EFFECTS
******************************************************/
$("#menu1 ul li a").click(function(e){
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart');
/*
var id = $(this).attr("href");
if(id == aid) return false;
$('#menu1 ul li a').removeClass('a');
$(this).addClass('a');
if($("#container > div:visible").size() > 0) {
$("#container > div:visible").animate({top:'-500px'},500,'easeInQuart',function(){ $("#container > div:visible").css({display:'none',top:'-500px'}); $('#container > div#' + id).css({display:'block'}).delay(400).animate({top:'500px'},800,'easeOutQuart');
$(function() {
$('.scroll').jScrollPane();
});
});
} else {
$('#container > div#' + id).css({display:'block'}).animate({top:'500px'},200,'easeOutQuart');
}
aid = id;
return false;
*/
});
Edit: I tried it on my regular site and for some reason it wasn't working the same. Here's the template. I uploaded it to one of my other sites for display. Keep in mind the difference is that each link is a new controller and each div is a new view. Does that explain any further the differences between the original template and what I"m trying to accomplish.
http://www.justmyfiles.me/
Does anybody have any ideas?
The "transition" javascript code could look like :
$("#menu1 ul li a").click(function(e){
var a = this;
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart',function() {
location.href = a.href;
});
});
And the document ready code :
$(document).ready(function() {
$('#container').animate({top:'0px'},500,'easeInQuart');
});
/*CSS*/
#container { top: -500px; }