I’m very new to jQuery and quite rusty with my web design in general. I have a page on my site with 5 buttons alongside an iframe which is embedded from Youtube showing a video. All I want is for each of the buttons to load a different video from Youtube into the iframe without simply reloading the whole page. I’ve searched and seen some examples of jQuery interaction with iframes, but all too complex for me to fully follow. Could someone please provide a simple example of what I need to do? I just need jQueary to change the src value and reload the iframe when the user clicks on one of the buttons.
That’s exactly what I needed. Thank you very much. I thought of using jQuery because I’d also like to be able to add a class to the button as it’s clicked to enable the active link to be styled differently.
Any chance you could provide an example of this behaviour also?
You can always cache your jQuery results yourself by storing a result set in a variable. So for example if you would loop over something, you wouldn’t want to get jQuery to perform a lookup and instantiate a new instance of itself.
e.g.
//This is *bad*
for( var i = 0; i < aLongDataSet.length; i++ ) {
$("a.someLink"); // ouch, jQuery needs to look this up *every* time.
//do stuff
}
// This is *much* better
var i = 0;
// we're also caching the length of the data set so it doesn't have to be requested each time
// it's a micro optimization, but a good habit to get in to nonetheless.
var len = aLongDataSet.length;
// I prefix my jQuery objects with a '$' so I instantly know that var contains a jQuery object
var $links = $("a.someLink");
for ( i = 0; i < len; i++ ) {
//you can now do something with $links
}
Ok, back to how jQuery performs a selection on an item with a class.
To performance enhance our selectors, you can give them a context. You can do this in several ways.
You can put all your elements in a container <div> with an ID on it as that will be quite fast to select and will reduce the amount of data subqueries have to go through.
e.g.
To then select them with jQuery we can do this in the following manners.
// use #myLinks before the class selector, jQuery will find "#myLinks" first
// and search for the remaining selector in its contents
$("#myLinks a.myClass");
// use a context parameter, the jQuery selector can take a context (Selector, DOM node, Document or jQuery)
var domNode = document.getElementById("myLinks");
var $jqObj = $("#myLinks");
// select with Selector
$("a.myClass", "#myLinks");
// select with DOM node
$("a.myClass", domNode);
// select with jQuery Object
$("a.myClass", $jqObj);
It’s not always necessary to do this, it depends on how many items you have across the page and if you’re trying to narrow them down to a particular part of the page.
For example, let’s say you wanted to only select links with a class in the sidebar of your page, you would use $(“#sidebar a.someClass”) or $(“a.someClass”, document.getElementById(“sidebar”)) as it would be a lot faster to only search the DOM of the sidebar than it would to search the DOM of the entire page.
Interesting. I never heard of document.querySelectorAll() before. Generally, I’m a bit hesitant to use an element’s id as in document.getElementById() because I imagine, that the browser has to run through ALL elements until it finds a match - but perhaps it keeps an index.
Anyway, I only ever get an element once and then I store a reference to that element in e.g. a property of an object for later use.
That’s a good practice to stick with :). While often it’s a bit of a micro-optimization, it can lead to massive performance gains, especially if you’re looping through a particularly long data set.
You just put that at the bottom of the page (or below the iFrame and links in any case) and it will set the href of the first link as the src of the iFrame
I’m debugging another task, I really appreciate if you can share your inputs;
within Lightbox am using iframe to load external html file. However, some user has noticed that iframe is taking time to load static html file. I have two blocks in lightbox one is with youtube link and another with html page. Any suggestions to load faster iframe src file?
Thus you don’t have to worry about putting the script tags at a specific place on the page. You can put it wherever you like - even in a separate js file.
Depending on what the application is, I tend to often put some JavaScript that is absolutely required for my application to work in the header, and most everything else can go in the footer. This way any time you write non-jQuery code you won’t have to worry about sticking things in an onLoad handler.
This will ensure your markup and CSS load and execute quicker as they don’t have to wait for scripts to load & execute.
My situation is much the same as Duckie’s. I have a page with an iFrame and four links to native files that each will appear within the iFrame when summoned. I’ve done this with straight HTML. The problem is that when I land on the page I have an empty iFrame until I click one of the links.
Not only would it be nice to have the iFrame populated with the first link upon arrival, but it would be a real bonus if there was a way to arrive at this page with any other of the remaining links appearing, if in fact that’s the content someone came looking for. For example, if I place anchors for my four links on another page, it would be ideal if someone could select the second item and find it populating the iFrame upon arrival at my-iFrame-page.php.
I’m not opposed to using jQuery nor javascripting of any kind, but I’m afraid that for a newbie, there’s a lot that I don’t grasp when I try to sort through everything above. I’d be over the moon if someone could post a working example that achieves what I’m after.
