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

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.

I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});

You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/

you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})

$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

Problems Implementing a Premade Javascript

I would first like to state that I started learning HTML 5 days ago, and therefore I am very new to everything.
I am trying to implement the code given here: http://jsfiddle.net/NFXzn/9/.
But for some reason the dropdown menu is blank. I have uploaded my code here: http://gbrowse2014.biology.gatech.edu/viru.html
Since I did not make the code, I am assuming the problems lies with how I implemented the code (specifically the javascript). I have narrowed the problem down to one particular function:
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
I am using firefox, and I have gone through www.w3schools.com to look for implementation tips, but I have not corrected the problem.
On a sidenote, does anyone know how to change the code to use the dropdown-checkboxes instead of the dropboxes?

That loop is working fine. The problem is that you're running the code before your select is loaded, so nothing is being appended to the page. Either wrap your code in $(document).ready( function() { ... });, or move your <script> blocks to the bottom of the page (after the HTML has completely loaded).
http://learn.jquery.com/using-jquery-core/document-ready/
(On the top-left corner of the jsFiddle page, you'll see a dropdown which displays onLoad -- which is automatically doing that job for you. Your page as it stands is the equivalent of No wrap - in <head> -- not what you want.)

javascript/jquery code not working - limit to how many calls can be made in a page?

Here is the code I am using from jquery ui tabs:
<script>
$(function(){
// Tabs
$('#tabs1').tabs();
$('#tabs2').tabs();
$('#tabs3').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(function(){
$(this).addClass('ui-state-hover');
},function() {
$(this).removeClass('ui-state-hover');
});
});
</script>
In this page: http://sekhu.net/charlie/index.php
Now Most of the jquery calls work, but this one in particular only works depending on where I place it amongst the other init. I'm using Sudo Slider jQuery Plugin and the jquery tabs to include the tabs in the slide. Is this not possible, or have I made an error somewhere? Perhaps missing a ; or something?
I'm new to jquery/script so I have no clue what's gone wrong.
Thanks

I think the last }); should be })();
But I might be confusing it with the self-executing anonymous functions

The order you do things is often critical in JavaScript, especially if you are adding events to anchors loaded dynamically. You need to do things in this order:
retrieve data with a dynamic AJAX call
process the data and display the results which may include a list of anchors
install listeners for events like click and hover on the anchors displayed
in #2.
If you try to install the listeners before you've displayed the data, they won't listen. So don't install the listeners in a document.ready() or init() function, install them in the callback of the function that loads the dynamic data the listeners apply to. Something like this
$.get('myUrl',function(data){ // get dynamic data
var anchorList = myProcess(data); // create a menu from the dynamic data
$('#myTarget').html(anchorList); // display the menu
$('#myTarget a').hover( ... ); // *now* install the listeners
$('#myTarget a').click( ... );
});

JQuery isn't recognising a #id selector, seems to be dependent on the URL

I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.
<script>
$(document).ready(function() {
$("#select_mailshot").click(function () {
alert('mailshot');
document.location.href = "/products/1";
});
$("#select_blog").click(function () {
alert('blog');
document.location.href = "/messages";
});
$("#select_contact").click(function () {
alert('contact');
document.location.href = "/contacts/1";
});
});
</script>
(the alert steps are in there for debugging)
The following html code in index.html.erb
<ul>
<li id="select_mailshot">Mailshot</li>
<li id="select_blog">Blog</li>
<li id="select_contact">Contact us</li>
</ul>
The intention is that this effectively creates 3 buttons.
When clicking on any button from http://myurl.com/ it all works.
When clicking on any button from http://myurl.com/messages (get to this via the middle button) it all works
When starting from http://myurl.com/products/1 it all stops working (the alerts do not trigger). In fact when starting from http://myurl.com/anything/id it stops working.
I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.
Can anyone shed any light as to what's going on here?

What does firebug tell you? Do you have javascript errors on the page? if so, what are they? Are you sure the jQuery library is included correctly in the deeper pages ( i.e. is it a relative path? )

Is this javascript inlined?
If not, then maybe the link is relative so when you try to load it from messages/40 you need ../script.js. Another solution is to use absolute URLs (http://myurl/script.js) or virtual (/script.js).

Thanks to cherouvim and digitaljoel.
This was due to javascript files being included relative to the current URL.
The following was included in the head tag
<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
I changed it to
<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>
(note the extra "/" in the src attribute) and everything works as expected.
I worked this out after checking the error logs on the server and in the browser.
Feeling a little dumb but a lesson well learned.

I was using FaceBox to create modal overlays and I couldn't figure out why I was having the same problem.
I turns out that the listener wasn't being attached to HTML elements until it was visible. (The items were available if I viewed source, but jQuery seemed not to attach a listener until it was visible.)
For anyone having the same problem, I'd suggest moving your click() code to a point where the HTML element you're attaching to is visible.
Also, I've found selecting by ID does give more problems than class. I have no idea why. (No, there were not duplicate IDs.)
Hope this helps someone with the same problem!