jquery explode effect not working properly - javascript

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 );
});
});

Related

Collapsing menu content

I have a ul menu that collapses, but the content inside each menu li is going a little funny when it's width is toggled.
i tried .slideToggle but couldn't get it to operate to slide into the right button div.
It works well it is just a little clunky. I'm assuming there is a css rule that could fix my issue but I'm a little stuck
JSFIDDLE
this is the rule i am using which you can see in the jsfiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').animate({width: 'toggle'})
});
});
i'm new to javascript so I'm sure there is a better method that I'm unaware of.
Thanks.
I've made modifications on your codes. There are redundant $(document).ready(); and others. I've also modified your css code.
I just created an "illusion" in the modifications I've made and I hope this is what you're looking for.
Here's the updated jsfiddle.
Ok. Earlier i misunderstood your question. Here is the Updated answer with slide effect. But the thing is you need to use jquery ui also. check it out my fiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
$('#close').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
});
Working JSFIDDLE DEMO

Mobile Hidden Menu works on jsfiddle but not online. Any solution would be helpful.

So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?
It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/
You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery

Tweak smooth scrolling code

I am trying to learn jQuery and I'm having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it's only a one pager).
$(document).ready(function() {
$('a[href="#the-top"]').click(function (e) {
$("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
return false;
});
});
How can I change my code to achieve this?
jQuery(function($) {
$('a[href^=#]').bind('click', function (evt) {
var $what = $('#' + $(this).attr('href').split('#')[1]);
$('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
evt.preventDefault();
});
});
Changes suggested in this code:
Change global $ object to jQuery
Just jQuery(fn) as document.ready(fn)
Closure: use jQuery as $ inside that function
Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)
All of these are kind of optional. You get the idea. Feel free to change.
DEMO AT: http://jsfiddle.net/Nm3cT/
Take a look at Chris Coyier's smooth Scrolling script. It does exactly that and needs no further configuration. Plus, it updates the address on the browser.

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.

select box jquery transition not working

I am trying to use this: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
to add a transition by default to my select-box.
This is the bit of JavaScript:
$(document).ready( function() {
$("SELECT").selectBox()
$("SELECT").click( function() {
$("SELECT").selectBox('settings', {
'menuTransition': 'slide',
'menuSpeed' : 'fast'
});
});
});
I can't seem to make it slide by default. What am I doing wrong? I was able to get it to work by including a separate button exactly like in the demo page. But I want it to use the slide animation by default and can't see/figure out what is wrong?
The selectBox plugin looked interesting so I tried it out and I believe your issue is that you are trying to dynamically set the transition type to slide but you want to create the selectBox with different settings than the default ones, try this:
$(document).ready( function() {
$("SELECT").selectBox({
menuTransition : 'slide',
menuSpeed : 'fast'
});
});
Here is a working example of this solution: http://jsfiddle.net/jasper/APzDJ/

Categories