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);
Related
I have a Javascript imported a snow.js file that displays "Snow falling" across the screen for when it's winter. But If I choose a summer theme on the same page it will still display the Snow falling.
<script src="js/snow.js" type="text/javascript"><script>
Is their a way to create a Javascript code so if i click on a summer theme it will remove/comment the imported file and add/re-move commenting on the imported file when I click on a winter theme?
Edit:
I am using snowstorm.JS plugin realized I can call a function "snowStorm.toggleSnow()" via script. But I need to adjust it, so if they click on my css button "Summer" whilst on the theme summer it will do nothing.
I created this Jquery/JS code but it doesn't work. I believe it's the brackets but not sure. It should solve the problem.
Update:
I got it working, so If the user clicks a button it will "Toggle" the snowstorm effect on and off.
$("#Summer").click(function(){
snowStorm.toggleSnow()
});
$("#Winter").click(function(){
snowStorm.toggleSnow()
});
Is there a way of introducing if loops, so if the user clicks on the same button, eg: ID "Summer" whilst on the same ID/CSS "Summer" it will not toggle the snowstorm?
Use JS or jQuery to remove the tag.
For example, in jQuery:
$("#summerThemeButton").click(function() {
$("script[src=js/snow.js]").remove();
});
However, as #IgorRaush commented, there's probably a better way to change the theme (probably by a JS API) than to remove the script for it completely.
EDIT
As the comments suggest, it's not so easy to remove a JS file by removing the <script> tag. It is already executing code. The best way is to use the functions that came with it to stop it. Maybe you want to check if there are functions, such as:
var stopSnow = function() { /* ... */ };
var changeTheme = function(newTheme) { /* ... */ };
If there are truly no API functions (if you found an API; if you wrote it yourself just write a function!) then your best bet might be to remove all relevant/global variables and functions:
// for example, if you had a running function `snow()` or a global variable to make it snow:
snow = null;
theme = null;
Sorry there's no better way (I know of) to remove a script.
you can use $.getScript in jQuery to conditionally load the file. See more at http://api.jquery.com/jQuery.getScript/
I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});
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
I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).
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.)