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;
Related
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/
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);
How do I get the callback function on the 2nd line to redirect the user after the animation runs? I want it to redirect to the link in the href of 'nav li a'.
If I leave the callback as "" the animation works fine but does nothing (as expected). But if I put anything I think will work it fails and most of the time also breaks the first line from working at all. I'm just trying to get the page to slide in from it's starting offscreen position on load (1st line). Then slide out first then reload the page (2nd line).
$('section').animate({"left":"0px"}, 450);
$('nav li a').click(function () { $('section').animate({ "left": "1000px"}, 1000, "");
return false;
});
Prevent the anchors default action, store a reference to the anchor as the callback for animate() creates a new scope, then just redirect :
$('section').animate({"left":"0px"}, 450);
$('nav li a').on('click', function(e) {
e.preventDefault();
var self = this;
$('section').animate({ "left": "1000px"}, 1000, function() {
window.location.href = self.href;
});
});
If I get your problem correctly, this code is doing what you need:
var $section = $('section');
$section.animate({left: '0px'}, 450);
$('nav li a').click(function(e) {
var self = this;
e.stopPropagation();
e.preventDefault();
$section.animate({left: '1000px'}, 1000, function() {
window.location = self.href;
});
});
I have a menu that when hovered, shows the subnav of the current hovered item by adding .stick to the submenu and removing it on mouseleave. If not hovering on another menu item I want the last hovered menu item to stay open for another 2 seconds before hiding.
Here's what I have. I know that the mouseleave() called on the container won't work since it's within the handlerOut of the ul#main-nav > li hover function but I left it to show you where I last left off.
$('ul#main-nav > li').hover(function() {
var $this = $(this);
clearTimeout(window.menustick);
$this.find('ul.submenu').addClass('stick');
}, function() {
var $this = $(this);
if($this.siblings().hover()) {
$this.find('ul.submenu').removeClass('stick');
} else if ($('#main-nav').mouseleave()) {
window.menustick = setTimeout(function(){
$this.find('ul.submenu').removeClass('stick');
}, 2000);
}
});
Here's the jsFiddle.
Thanks in advance!
JS:
$("ul#main-nav > li").hover(
function(){
$(this).children('ul').hide().fadeIn(500);
},
function () {
$('ul.submenu', this).fadeOut(2000);
});
Fiddle: http://jsfiddle.net/3F7bJ/3/
You had a couple of issues with your scripts and CSS.
Firstly, your CSS had the following rule:
nav ul#main-nav li:hover > ul.submenu {
display: block;
}
This needs to be modified to:
nav ul#main-nav li > ul.submenu.stick {
display: block;
}
This meant that your CSS was controlling the visibility rather than the class 'stick'.
As you mentioned the use of .hover() and .mouseleave() in the script code is incorrect and not required. As at that point you are already in the mouseleave (handlerOut) of the hover.
The below code appears to perform the desired effect you were looking for:
var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
$('#main-nav ul.submenu').removeClass('stick');
$this.find('ul.submenu').addClass('stick');
}, function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
menuStickTimeoutId = setTimeout(function () {
$this.find('ul.submenu').removeClass('stick');
}, 2000);
});
Working demo:
http://jsfiddle.net/3F7bJ/2/
I'm trying to create a grid that uses the following code to randomly apply an active "highlight" class to one of the child li elements
//add class "highlight" to random panel
var elements = $('ul#sliding_panels li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
Basically, the li element with the .highlight class will be 2x the size of the other panels.
The tricky part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.
I thought this code would do the trick but it's not returning anything when I hover .highlight (or doing anything else for that matter!)
EDIT: I've added the code to jsfiddle.net for people to see it live: http://jsfiddle.net/dxzqv/2/
<script>
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
$(".highlight").hover(
function(){$(this).animate({width: 400px, height:400px}, 1000);},
function(){$(this).animate({width: 200px, height:200px}, 1000);}
);
});
</script>
http://jsfiddle.net/dxzqv/3/
How's that?
Not sure if that is the effect you were going for, stuff is happening.
Going to fork and tweak some more.
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "400px", "height":"400px"}, 1000);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "200px", "height":"200px"}, 1000, function(){
$(this).removeClass('highlight');
});
});
});