I use the js-Plugin fullpage on my webpage and have a submit-button in the second section which should start a js-based demo-function. Unfortunately pressing the button just let's me jump back to section 1 without starting the function (or starting and immediately stopping it again, I'm not sure). This is the code:
HTML
<input type="submit" value="Start" id="btn1"/>
js
$('#btn1').click(function(){
$.WizDemo();
});
function WizDemo() {
some code;
};
From fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
From fullPage.js docs:
afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).
There you have your answer. Add the code in the afterRender callback.
OK, i got it.
<input type="submit"/>
reloads the page so you have to use
<input type="button"/>
which doesn't.
I found the answer here How do I make an HTML button not reload the page
Related
I'm having a weird bug where load() is breaking my carousel.
I have a Slick Slider with 3 slides. You can click the NEXT button to move to the next slide. You can also click the slide itself and it loads content into the div of a cat and some text using:
$('.frame').load(url);
The bug is that after you view the loaded content and click BACK, the NEXT button no longer works. Somehow it breaks the nav. I've tried show() and hide() but that doesn't help.
Please see my codepen demo
And this is the url I'm loading into that demo if you find that useful.
Thanks for taking the time to help me :)
As I stated in a comment to your question, the reason your Slick Slider plugin stops working after you load the other document is because the other document is re-including the jQuery library into your top-level browsing context.
jQuery plugins make themselves accessible by defining a new method and then attaching it to the jQuery.prototype (aliased as jQuery.fn) object.
When you include the jQuery library into your document via a script tag, you can call console.log(jQuery.fn); and you will see an object with all of the convenient methods that make up the jQuery library.
After you have similarly included the Slick Slider library, you can again call console.log(jQuery.fn); and you can find that it has a method property named slick.
The problem is that when you load the document that resides at url that document is inserting a fresh script tag into your parent document whose src is jQuery. This causes a fresh loading of the jQuery library which obliterates your initial instance. If you call console.log(jQuery.fn.slick); at this point, you will find that it is undefined.
I have never before seen an entire HTML document (as opposed to a snippet of HTML) loaded into a div of another document. This is inserting elements into the body of your top-level document that should not be there, like <head> and <body>. I am actually surprised that this is causing so few issues for you.
The way documents are normally nested within other documents is by the use of an iframe. The document within the iframe will be its own sandbox, and its styles and scripts will not be in conflict with those in the parent frame.
You could implement an iframe into your project by replacing $('.frame').load(url); with something like the following:
var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);
I am currently trying to implement an on-click search event, using Simple-Jekyll-Search on a page with SmoothState.
After following the suggestion written in this question: How do you simulate a button press in Javascript, to trigger searching in Simple-Jekyll-Search, and adding the following snippet to the library, it appears the onClick event no longer triggers a the search event after SmoothState loads a new page.
$('#yourbutton').click(function(){
render( searcher.search(store, opt.searchInput.value) );
})
Any suggestions would be appreciated.
There's a section in the FAQ section of the README that might help. Here's the excerpt:
Help! My $(document).ready() plugins work fine when I refresh but
break on the second page load.
smoothState.js provides the onAfter
callback function that allows you to re-run your plugins. This can be
tricky if you're unfamiliar with how AJAX works.
When you run a plugin on $(document).ready(), it's going to register
only on elements that are currently on the page. Since we're injecting
new elements every load, we need to run the plugins again, scoping it
to just the new stuff.
A good way to do this is to wrap your plugin initializations in a
function that we call on both $.fn.ready() and onAfter. You'll want to
specify the context each time you initialize the plugins so that you
don't double-bind them. This is called a "module execution
controller".
I have a fullpage.js site setup here.
The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes), for it to be a scrollable section.
The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section.
Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in that section without having the resize the window manually?
It's worth noting, I've been able to get the same thing working using the fullpage.js example page for scrollOverflow. That is setup right here. However, I haven't been able to figure out why it works there, but not in my original page!
That's probably because the content of your section or slide is being generated (or modified somehow) after fullPage.js gets initialized.
You should have used that javascript code inside the afterRender callback as fullPage.js documentation details:
afterRender()
This callback is fired just after the structure of the page is
generated. This is the callback you want to use to initialize other
plugins or fire any code which requires the document to be ready (as
this plugin modifies the DOM to create the resulting structure).
In any case, I believe you can solve it by calling the method reBuild provided by fullPage.js.
You can try to use it in the afterRender callback or directly after the code you use to generate the layout/content of the section to which you want to apply the scrollOverflow option.
$('#fullpage').fullpage({
//your options
});
//code used to generate the content of your section
//...
//re-building fullPage.js to detect the current content of each section
$.fn.fullpage.reBuild();
If that doesn't work, you can always try to use a timeout which should also solve it with some delay:
setTimeout(function(){
$.fn.fullpage.reBuild();
}, 1000);
I have this jsfiddle.
When I move the script from the upper panel to the lower panel, it does not work any more.
And why can't I use jQuery to target the buttons? Now, I have to use vanilla JavaScript, because jQuery does not work.
Any ideas?
In JSFiddle, at the left panel screenshot, you can choose where to place the script. By default, it's wrapped in an onload event within the head. By default, the Mootools library is loaded.
The reason that the YouTube Player API does not work with the default settings is that the API expects a global onYouTubePlayerAPIReady event to be defined. When the code is wrapped in an onload event, the function isn't global any more.
The solution is to properly use JSFiddle: Use no wrap (body) and jQuery 1.7.2: http://jsfiddle.net/4WPmY/12/.
Another solution, though less nice than the recommended one, is to globally define onYouTubePlayerAPIReady by setting it as a property of window: http://jsfiddle.net/4WPmY/13/
window.onYouTubePlayerAPIReady = function () {
From the left pane of jsFiddle, in the section titled "Choose Framework" you need to change the first setting to no wrap (body) so the JS panel is run after the DOM is loaded. You should also change the second option to jQuery 1.7.2 if you wish to use that library.
Your fiddle, updated: http://jsfiddle.net/Marcel/4WPmY/11/
Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)
There is a solution in here;
http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
$(window).load(function(){
$.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
$.getScript('/media/js/twitter.js', function(){
$('#twtr-widget-1').appendTo('#twitter_p')
})
})
})
To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.
Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.
In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.
In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.
You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).
I hope it didn't come out backwards :D.
The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.
The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.
You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.