We Keep Coding

ScrollTo: targeting specific buttons in a navbar

Got an issue with a navbar I'm creating for a WordPress site. Some of the links are meant to scroll down to different places on the homepage and some are outside links to other places on the site. Something like this:
<div class="main-navigation">
<ul>
<li class="link1">Link 1
<li class="link2">Link 2
</ul>
</div>
Basic stuff.
So if I add the following Javascript in the footer....
jQuery(document).ready(function() {
jQuery('.main-navigation a' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
Link 2 will scroll down but since Link 1 isn't supposed to scroll, if you click on it, nothing happens like it's a null link.
I thought I could change the reference to something like
jQuery('.main-navigation a.link2' ).click(function(){
So only link 2 does the scrolling, but that just makes it jump to the page like an old anchor tag trick in the 1990's.
Tried a few variations of the same idea, and nothing clicked. Anyone know what the right code would be to target just the buttons that need to have the scrolling?

Building from itsgoingdown's answer. The animation is ignored because the default link event still fires. If you pass the event and also prevent the default, you'll be set. See below.
$(document).ready(function() {
$('.main-navigation a[href^="#"]' ).click(function(event) {
// Prevent default link action
event.preventDefault();
// Grab location to send to
var href = $(this).attr('href');
// Scroll the page, animated
$('html, body').animate({
scrollTop: $(href).offset().top
}, 700);
});
});
Here is a live JSFiddle to show as well.
https://jsfiddle.net/y3nutj22/5/

Thanks to the both of you. I finally figured it out and in a sense, you're both right. However, neither of your codes produced the scrollTo effect. While '.main-navigation a[href^="#"]' was partially correct, my issue....and I finally realized it this morning....was I hard coded in the URL's in WordPress' menu feature as a complete URL. So just using '#' wouldn't work. Also, since it's WP, I can't use $'s in the code, Have ot use jQuery, of course.
This is the code that did the trick.
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
with path.to.url representing the actual URL, of course.
Thanks again!

Multiple bootstrap carousels with different settings

There are multiple carousels in my page and they all work the same way.
I'd like to make one of them have different settings though (interval), but I can't make it happen.
Here is the fiddle.
I'd like to have "#slideshow" carousel work with interval/auto slide set to active, and the rest of them to have interval/auto slide disabled.
jQuery('.carousel').each(function () {
jQuery(this).carousel({
interval: false
});
jQuery('#slideshow').carousel({
interval: 3000
});
});

Just get rid of most of the jQuery you've written and leave only this:
$('#slideshow').carousel({
interval: 3000
});
FIDDLE
My solution is simply a fork of your code with the unneeded jQuery removed.
Also, note that you can simply type $ instead of jQuery all the time.
Finally, you forgot to choose a version of jQuery in your Fiddle. :P

jquery explode effect not working properly

Here I am creating nav menus using div and jquery. I tried few things here but didn't get the result what exactly I want. You can see in a fiddle when I click a link those two scrollbars (x & y) will appear (I don't want that) and I didn't get the jquery explode effect correctly. Its sliding from left. How to achieve the jquery explode effect properly? and I have done very lengthy code for jquery explode effects is that correct?
You can see my codes in JSFIDDLE. I tried this. But didn't get the result what exactly I want.
$(document).ready(function() {
$("#showhome").click(function(){
$("#firstdiv").show( "explode",
{pieces: 8 }, 600 );
});
$("#showhome").on('click', function() {
$("#seconddiv, #thirddiv, #fourthdiv, #fifthdiv, #sixthdiv").hide();
});
});
this is code i'm using for jquery explode effect. you can see remaining jquery, html, css codes in jsfiddle..

You have 2 functions doing the same thing.
$("#showhome").click();
and
$("#showhome").on('click', handler);
.click() is just a shortcut for .on('click', handler).
http://api.jquery.com/click/
You can add them together like so:
$("#showhome").click(function () {
$("#firstdiv").show("explode", {
pieces: 8
}, 600);
$("#seconddiv, #thirddiv, #fourthdiv, #fifthdiv, #sixthdiv").hide();
});

You have to use toggle like this:
$(document).ready(function() {
$("#showhome").click(function(){
$("#firstdiv").toggle( "explode",
{pieces: 8 }, 600 );
});
});

masonry.js div reset when select link

Hey so here's the website I'm working http://trevormsmith.com/linx/art.html
Trying to build a filter system (in the footer), and when you click on the specific categories (minimalist, typographic, abstract) masonry resets the images into a single column, instead of the grid. If you resize the browser, it'll readjust to normal.
This is what I have calling masonry to the containers with the images
Also, when I set the #minimalist, #typographic, #abstract to display:show instead of display:none (which it needs to be), the layout is fine and it works smoothly.
Any suggestions?
Edit: So here's the code that is working only for #minimalist, except the masonry is not being triggered and the images stay floated instead of tiling:
EditEdit: here's the current code, #containers fade in as a single column instead of grid layout: http://jsfiddle.net/T6SDb/1/
Calling the masonry:
$( function() {
$('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7 }); });
And then the fadein/fadeout for the filter:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
});
});});
$('#btn-m').click(function(e){
$('#container-all, #typographic').fadeOut('slow', function(){
$('#minimalist').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-t').click(function(e){
$('#container-all, #minimalist').fadeOut('slow', function(){
$('#typographic').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-a').click(function(e){
$('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
$('#abstract').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });

Try calling masonary('layout') after fading in the selected images, i.e. for the container-all (from your filter.js file) try this:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
});
});
I'm only testing this from the JavaScript console so you might need to tweak the timing / positioning. I'm doing it when the fade is complete, you might want to try doing just after the start of the fade.
Edit
It may be because of the way your containers are put together and how you start masonary, perhaps you can do this in your main source:
var mason;
$( function() {
mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7});
});
});
Then later you can use mason.masonary('layout') in each of your click functions rather than referring to a single container, i.e. for the first one try:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
mason.masonary('layout');
});
});
});
Depending when you want things to appear and rearrange you might want to fadeTo a certain value then do the layout and then complete the fade (or you could do that on a delay too).
Maybe look at the Masonary functions hide and reveal to remove given elements.
It may also make things easier to work with the items themselves rather than the containers (since everything gets rearranged) and just have one outside container for everything.
I'd also suggest trying a simpler example (maybe just colored divs or something), working with that, and posting it if you still have issues. There may be some interaction between the libraries you are using.
Edit 2
Added Fiddle, that uses the separate mason variable above. It works but, again, you might need to do something about the timing of the fade in / fade out -- of course you can't arrange the things until they're visible which is an issue. I'm not sure of the best way to fix that.

Action-dependant Javascript/Jquery - how to activate a command only AFTER another script has finished?

I'm working on my website and I decided it would be to my advantage to use 'designed' scroll bars instead of the ones browsers come with. I was lucky enough to come across this script http://www.hesido.com/web.php?page=customscrollbar which basically does exactly what I need.
The only problem I've got is that I am trying to apply the custom scrollbars to some divs which are initially hidden and then toggle via a link div between hide/show.
As the programming page (http://www.hesido.com/flexcroll/flexcroll-programming.htm) explains, sometimes the scrollbar needs to be updated and/or manually applied, because being in hidden divs they do not load when the page opens.
I've checked my CSS and my HTML and the code works fine if the div is not hidden, so I am 100% that this has to do with the way I am hiding my divs.
The basic format for that is
$(document).ready(function() {
$('#iddiv').hide();});
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000
);
});});
So I hide it initially, and then toggle it via a button.
Now, in this logic - the manual application of fleXenv.fleXcrollMain("your-div-id"); should be somewhere above the last line of script (the one containing }); ).
This, however, either makes the div unscrollable or messes up the rest of my Javascript (scrollTo functions stop working, etc...)
My question is, as a bit of a noobie JS user - WHERE do I need to place that piece of code that manually activates the custom scrollbar in my code AFTER the toggle is activate and WHAT is the structure?
By which I mean, does fleXenv.fleXcrollMain("your-div-id"); stand on its own, does it need its own separate function, does it get a $ before it?
Loads of thanks to anyone who can help me with this! Final bit stopping me from launching my website.
UPDATE!
HERE is the CSS/HTML and code for an example of what I am trying to achieve; because one of the files in the script needs to be downloaded to work, I think the only way is to copy and paste all the bits in a new HTML document.

The jQuery .animate() function accepts more arguments. One of them is a function that gets called when the animation completes.
function activateScrollbar () {
fleXenv.fleXcrollMain('iddiv');
}
$('#iddiv').animate({
height: 'toggle'
},
2000,
activateScrollbar
);
You can also use an anonymous function, like this:
$('#iddiv').animate({
height: 'toggle'
},
2000,
function () {
fleXenv.fleXcrollMain('iddiv');
}
);
Most functions in jQuery that include an animation, (like .hide() or .fadeOut()), allow you to pass a function that gets called when the animation completes. Most of these jQuery functions allow you to pass these extra arguments in a configuration object which can be more readable:
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
See the .animate() documentation for more details.
Here's a full example with the click behavior included:
$('#myButton').click(function () {
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
});

Try this:
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000,
function(){
fleXenv.fleXcrollMain( $(this).attr('id') );
}
);
});
That function is callback executed after animate function is complete.