Develop Reference

Initializing/Uninitialized a jQuery plugin on page change

I'm working with two jQuery plugins fullpage and ferromenu.
fullpage makes it so that the window scrolls by entire pages and ferromenu is a neat circular menu that expands and collapses.
The problem is that since fullpage makes my entire website one page, ferromenu is shown on every single page so I don't want to just initialize it with $(document).ready
This is what I have tried but the problem I have now is that it doesn't disappear when the page changes away from the url
$(window).on('hashchange', function(e){
var pageURL = $(location).attr("href");
if (pageURL === "https://www.example.com/index.php#thirdPage") {
$("#custom-nav").ferroMenu({
position : "center-center"
});
};
});

You should be using the callbacks provided by fullPage.js such as onLeave and afterLoad:
$(document).ready(function () {
$("#custom-nav").ferroMenu({
position: "center-center"
});
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
onLeave: function (index, nextIndex, direction) {
//going to section 3 ?
if (nextIndex == 3) {
$('.ferromenu-controller').show();
} else {
$('.ferromenu-controller').hide();
}
}
});
});
Or even by using the css3 class added to the body by fullpage.js as detailed in this tutorial.

I don't know if this is the best way to do it but I found the class for the html object it creates and just changed the display property in the else part of my if statement.
$(window).on('hashchange', function(e){
var pageURL = $(location).attr("href");
if (pageURL === "https://www.example.com/index.php#thirdPage") {
$("#custom-nav").ferroMenu({
position : "center-center"
});
} else {
$('.ferromenu-controller').css('display', 'none');
};
});

jQuery animate back when clicked anywhere on the page

<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.

well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});

Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});

Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/

jquery not working with more than 1 function

I have created a click function on an ASPX page which worked fine, when I moved the code to my site.master which has a existing J query function it doesn't seem to work.
this is my J query function I created:
var scrolled = 0;
$(document).ready(function () {
try {
$("#downClick").on("click", function () {
scrolled = scrolled + 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$("#upClick").on("click", function () {
scrolled = scrolled - 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click", function () {
scrolled = 0;
});
} catch (e) { }
});
However, when I tried adding this to my main site, in the site.master, it just refreshes the page when I click more booklets.
Clearly the code works but something in the site.master making the page refresh.
I have another J query function in the site.master which I think may be causing this:
$(document).ready(function () {
try {
$('.slider1').bxSlider({
slideWidth: 960,
captions: true,
auto: true,
autoControls: true
});
} catch (e) { }
});
This is a slider on the page, but with the previous code added it doesn't work.
Any ideas why the first code doesn't work in my main page, am assuming its because threes other Jquery functions but still not sure why it refreshes. any help would be much appreciated.

You're using buttons inside a form; the button is causing a postback. Perfectly normal.
Instead, use an input of type button. Rewrite:
<button id="downClick">More Booklets</button>
So that it reads:
<input id="downClick" type="button" value="More Booklets" />
Your jQuery selectors are based on the id, so it'll still handle the click events as you'd expect.

Unslider on Image Hover

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});

Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

How to slide down to show content of DIV using CSS/jQuery?

I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.

I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});

You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle