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

jQuery remove twice function call

Please consider this very simplified sample.
Below code remove a fixed nav bar from pages when screen size is small. It is named removeFixedNavbar().
This should be done when document is loaded and when window is resized. Please see the code. Well, this code seems some how ugly (calling removeFixedNavbar() twice, is it a better way to write it (with less code).
$(document).ready(function() {
removeFixedNav();
$(window).resize(function(){
removeFixedNav();
});
});

$(document).ready(removeFixedNav);
$(window).resize(removeFixedNav);
This should work, but i think it should be doable using CSS Media Queries only (depends upon the use-case).
Even simpler could be:
$(function(){
$(window).resize(removeFixedNav).trigger("resize");
});
Placing it at bottom most part can get rid of $(function(){...})
An other equivalent version can be:
$(function(){
$(window).trigger("resize");
});
$(window).resize(removeFixedNav);

Well you call it twice in document.ready.
Place window. resize outside document.ready event.

How to check dynamic javascript value with Jquery with IE

I am stuck on this, please help!
I have an external Javascript that inserts code on my page. Among other things it inserts an image wrapped in a div. I do not have control over the script, but I would like to change the image path/url using Jquery.
This is what I have done:
$('.ProductImage img').attr('src',function(index,attr){
return attr.replace('small','original');
});
Works like a charm in all browsers except IE.
When checking the selector with alert(), IE returns %Thumbnail% which is the Javascript variable/object. I have tried wrapping my script in a timeout to allow IE to finish loading but no luck.
Any ideas?
Thanks in advance!

Have you tried wrapping your code inside $(function(){ .. }) so that it will run after the document finished loading?

If your script is not loaded by the time your code gets executed you could try putting the code inside window.onload
window.onload = function(){
replaceImages();
};
function replaceImages(){
$('.ProductImage img').attr('src',function(index,attr){
return attr.replace('small','original');
});
}

jquery tabs ajax problem

This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)

The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});

I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>