Initializing/Uninitialized a jQuery plugin on page change - javascript

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

Related

Mobile navigation bar won't pull out?

I'm trying to create a mobile navigation menu, but for some odd reason, the code won't work. I feel like it's something with the css, but I'm not sure. I created a JS Fiddle to play with it. I want the menu to open when you click the little button. The JavaScript must not be reading the request...
Java Script
jQuery(document).ready(function () {
jQuery("#hamburger").click(function () {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
var contentWidth = jQuery('#content').width();
jQuery('#content').css('width', contentWidth);
jQuery('#contentLayer').css('display', 'block');
jQuery('#container').bind('touchmove', function (e) {
e.preventDefault();
});
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
jQuery("#contentLayer").click(function () {
jQuery('#container').unbind('touchmove');
jQuery("#container").animate({"marginLeft": ["-1", 'easeOutExpo']}, {
duration: 700,
complete: function () {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
});
It looks like you don't have jquery loaded in your jfiddle. When I loaded jQuery it worked for me.
Click on Javascript and then "FRAMEWORKS & EXTENSIONS" and add jQuery 1.12 at least.

Fullpage.js - Setting value for 'setFitToSection' option based on if a div has a certain class

I have the code partially written but I am not sure what to put after the if and else parts. What I'm trying to do - whenever a section has class "four" and "active" I want to disable FitToSection option for fullpage.js. Fullpage.js has a built in setFitToSection Boolean which I'm using. This is what I have so far, what else do I need?
$(document).ready(function () {
if ($('.four').hasClass('active') === true) {
$.fn.fullpage.setFitToSection(false);
}
else {
$.fn.fullpage.setFitToSection(true);
}
});
Just use the callbacks fullpage.js provides, such as afterLoad or onLeave:
$('#fullpage').fullpage({
autoScrolling:false,
onLeave: function(index, nextIndex, direction) {
var destination = $('.fp-section').eq(nextIndex - 1);
if(destination.hasClass('four')){
$.fn.fullpage.setFitToSection(false);
console.log("setting fitToSection off");
}else{
$.fn.fullpage.setFitToSection(true);
console.log("setting fitToSection on");
}
}
});
Example online
You don't need to check for the active class in this case because the destination section will always have it. Just check if it has the four class.
A shorter version of the same script can be:
$('#fullpage').fullpage({
autoScrolling:false,
onLeave: function(index, nextIndex, direction) {
var destination = $('.fp-section').eq(nextIndex - 1);
$.fn.fullpage.setFitToSection(!destination.hasClass('four'));
}
});

how could to change WCircleMenu options when you scroll down using jquery.fullPage

I have this code: http://jsfiddle.net/hevercking/t0qxavfc/
when you click the "&" button appear the social network links on the top of the button using the WCircleMenu effect, when someone sroll down the bar menu comes up using the jquery.fullPage effect, since here all works perfect, but now i want change the angle_start 180ยบ for show the menu in the oter page, because if i push the button in the otter page the social buttons appear on the other side, I tried to make some changes but everything stops working, someone could help me do this?
this is my js code
$(document).ready(function() {
//FULL PAGE CODE
$('#fullpage').fullpage({
verticalCentered: false,
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.barra').addClass('fixed');
}
//back to the 1st section
if(nextIndex == 1){
$('.barra').removeClass('fixed');
pag = 'nextIndex';
}
},
afterResize: function(){
windowsHeight = $(window).height();
}
});
//END FULL PAGE CODE
//WCircleMenu config
$(document).ready(function(){
$('#my-menu').WCircleMenu({
angle_start : -Math.PI/1.371,
delay: 50,
distance: 100,
angle_interval: Math.PI/6.5,
easingFuncShow:"easeOutBack",
easingFuncHide:"easeInBack",
step:15,
openCallback:true,
closeCallback:true,
itemRotation:360,
iconRotation:180,
});
});
//End WCircleMenu config});
you can change the parameters at the full page function
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.barra').addClass('fixed');
$('#my-menu').WCircleMenu({angle_start : Math.PI/4.371});
}
//back to the 1st section
if(nextIndex == 1){
$('.barra').removeClass('fixed');
pag = 'nextIndex';
$('#my-menu').WCircleMenu({angle_start : -Math.PI/1.371});
}
},
afterResize: function(){
windowsHeight = $(window).height();
}
//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
//css3:false
});
});

Change fullPage.js Options on Events

I am making a website using fullPage.js, I am in need to have a set of options on the first section only, I mean, in the first section I want to have a fullPage option set to true and in the second section I want it set to false, for that I am using fullPage events, altough seems like the options can not be changed on events, so I am asking for a method to do that.
My Java Script code, look at the afterLoad and onLeave events, I want slidesNavigation option to be changed:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7396FF', '#FFFFFF'],
controlArrows: false,
afterLoad: function(anchorLink, index){
if(index == 1){
slidesNavigation: true,
}
},
onLeave: function(index, nextIndex, direction){
if(index == 1){
slidesNavigation: false,
}
}
});
});
Thanks in advance.
You can not change options in that way.
If you dont want to show the slides navigation just hide it with jquery or with CSS.
I would recommend you to check this video about how to take advantage of the CSS class added to the body depending on the section you are in.
You could do it in this way as well, taking into account that the class active is added to the active section in the viewport.
#section2.active .fp-slidesNav{
display:none;
}
Online demo
Or by using events:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7396FF', '#FFFFFF'],
controlArrows: false,
onLeave: function(index, nextIndex, direction){
if(nextIndex == 2){
$('#section2').find('.fp-slidesNav').hide();
}
}
});
});
Online demo

Slider doesn't load when hidden div appears / shows

I'm working with Joomla 2.5 and am using this here:
http://www.code7.co.uk/joomla-responsive-slider
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav:false,
keyboardNav:false,
direction: "horizontal",
slideshowSpeed:3000,
animationSpeed:600,
randomize: false
});
});
</script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change:
function changeSection(section) {
if(activeSection != section) {
$('#'+activeSection).fadeToggle("slow");
$('#'+section).delay(500).fadeToggle("slow");
$('#menu-'+activeSection).removeClass('active');
$('#menu-'+section).addClass('active');
document.title = activeSectionTitle;
history.pushState({}, '', section);
activeSection = section;
}
}
Try (updated)
$(document).ready(function () {
$("div:not(:first)").hide(0);
var toggletwo = function (i) {
$("div:not(:nth-of-type(" + i + "))").fadeOut(125, function () {
$(this).siblings("div").fadeIn(250)
})
};
$("li a").on("click", function (e) {
return ($(e.target).is("a:first") ? toggletwo(1) : toggletwo(2))
});
});
jsfiddle http://jsfiddle.net/guest271314/68k7F/

Categories

Resources