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/
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 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 placed all my javascript calls inside jQuery.ready() to ensure the DOM is fully loaded before accessing them. But for function definitions (ones that I wrote myself), what's the best practice in placing them (before their corresponding called of course). At the beginning of <body>? Or at the end of <body>? Or inside jQuery.ready()? Or it simply doesn't matter? Thanks.
Do not place functions inside the ready() function.
You should declare them above the ready call and ideally all of your js is handled at the bottom of the html.
If you place your JavaScript in the head or top of the body, you will need to use jQuery ready IF they rely on some part of the DOM. As a shortcut, you can just pass your code to $, like so:
$(function(){
$("#domID").method();
});
However, you can forego this whole mess by putting your script at the bottom. The browser reads your HTML top to bottom. If the script that accesses domID, appears below the DOM element with id domID then it will work fine. So the above code snippet can be further simplified via:
$("domID").method();
As a note, this is not always the case. I have noticed you can not access canvas elements immediately. It may be safer to use $ or $.ready, then remove them as you become more comfortable with how the DOM and JavaScript are loaded.
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.
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.