We Keep Coding

FullPage JS: How to disable it for an unique page?

I have a problem with FullPage JS, and I come to ask for help :)
My problem is: I want to disable FullPage for a single page of my Website.
FullPage is made for little page, but my website has 1 long page, where I want to disable FullPage.
The file has the .ejs extension, instead of .html extension. The pages are in different EJS file.
I searched on the FullPage's Github, and it indicates me the destroy('all') method, but I've found a lot of way to write it, I tried 3 methods, and I don't know why, it doesn't work.
Does any of you know how to disable FullPage JS on a single page of the Website ?
I tried 3 methods.
1st Method tried:
document.querySelector('#destroy').addEventListener('click', function(e){
e.preventDefault();
fullpage_api.destroy('all');
});
2nd Method:
$('#destroy').click(function () {
$.fn.fullpage.destroy('all');
});
3rd Method:
function DestroyFullPage() { //default is 700.
$.fn.fullpage.destroy('all');
}
As Alvaro suggested, I tried something like this:
<script>
window.onload = function() {
alert('Ready ?');
fullpage_api.destroy('all');
alert('Done');
}
</script>
The first alert works fine, but the second never appear on my screen, and FullPage isn't destroyed.
Am I wrong in my syntax ?
Thanks
PS: Excuse my English, I'm french, but at least, I try :D

If you wonder how to use the destroy function, you can check the demo provided on the fullPage.js docs:
https://codepen.io/alvarotrigo/pen/bdxBzv
Which basically uses fullpage.js version 3 (no jQuery required) to do so:
fullpage_api.destroy('all');
There's no difference at all between your 2nd method and the 3rd one. In fact, 3rd method won't work until you call the DestroyFullPage somewhere else.
And the 1st one should only be used when initialising fullPage.js with jQuery. So, using $('#fullpage').fullpage(options) instead of new fullpage('#fullpage', options);

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!

Using # in anchors for javascript functionality

Like most things in CSS, there are ways that work, and there are the right ways. Unfortunately, I'm not so much of a CSS guru.
I set '#' I my hrefs for a number of things - for things like opening menus etc.
However, I recently found a need to scroll smoothly to a place on the page. After some investigation, I came up with this code:
$('a[href^="#"]').click(function (e) {
e.preventDefault();
$(".body-wrap").animate({
scrollTop: $(this.hash).offset().top
}, 300);
});
Nothing wrong with it - it works.
However, it also causes conflict with every other '#' based href on the page that I use for other javascript triggers - specifically a[href^="#"].
The question I have is, is there a better way to approach this that is still as generic? For instance, you might say - don't need to assign # to all hrefs - I'm not sure what the impact might be, or there might be ways of adding to the selector above to make it more specific - such as, starts with #,but has other characters following.
This kind of thing must challenge developers every day, so there must be preferred techniques, or patterns to deal with this cleanly.

My preferred solution is to give them a class
$(".scrollLink").on("click",function (e) {
e.preventDefault();
$(".body-wrap").animate({
scrollTop: $(this.hash).offset().top
}, 300);
});

The best practice is prefixing javascript specific classes with js-.
$(document).on('click', '.js-scroll-link', function(e) {
e.preventDefault();
$('.body-wrap').animate({
scrollTop: $(this.hash).offset().top
}, 300);
});

If you don't want/need to use classes, you can always check if this.hash is an empty string before animating. In that case you will need to add empty/invisible <a id="top"></a> to the top of your page and set href to #top for your "smooth scroll links" which are meant to scroll to the top of page.
However using classes is preferable.

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.

$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck

I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

How to make this grid work

I purchased a html5 theme that I am customizing for my church website. It has two cool features:
A tab script that allows for multiple items to displayed on one page.
a grid that will allow me to display sermons in a series in a neat and orderly way.
Both of these work well when used alone, but when I try to use the grid inside the tabs, no dice.
I am a design guy and know very little about Javascript functions and need help. Here is what the developer, who has not got back with me said to do:
"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"
$(".nav-tabs li")click(function(e){
ADORE.IsoTope();
e.preventDefault();
}
I do not know where to add this or even if something else needs to be added. I have also attached a link where you can download my code (html/php and .js file) so you can see what is going on. Any help would be appreciated. Remember, I know very little about Javascript.
https://www.dropbox.com/s/jypfjz3a89soxh7/example.zip?dl=0

Add:
$(".nav-tabs li a").click(function(e){
$('a[href="' + $(this).attr('href') + '"]').tab('show');
var IsoTopeCont = $(".isotope-grid");
IsoTopeCont.isotope({
itemSelector: ".grid-item",
layoutMode: 'sloppyMasonry'
});
});
at Line 469 of your init.js and it should work for you. Thanks

You can try the following: inside your init.js add the following:
$(".nav-tabs li").click(function(e){
e.preventDefault();
ADORE.IsoTope();
});
e.g. in the first line after var ADORE = window.ADORE || {};
As you mentioned that you don't know much about javascript: the first line starts with
jQuery(function($){ ...
This takes care about that everything inside the { will get executed when jQuery is loaded.
I'm not sure if the e.preventDefault(); is necessary - this is used e.g. to prevent links from getting executed and attach a different function to the click() event, so it could be possible that Isotope is working when a tab is clicked, but the tab is not working anymore.
If this won't work, you can check with web dev tools if there are any script errors. In case you're unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console