View RSS Feed

molendijk

Loading files into divs having a custom src attribute

Rate this Entry
The HTML src attribute supports frame, iframe, img, input and script elements. It does not support the div element. But HTML 5 gives us the "data" attribute that lets us define custom attributes within HTML elements. We can create whatever we want: <div data-brand=..., <div data-mymusic=... etc. So we can also have <div data-src=...

We can retrieve the value of the "data-" attributes by using getAttribute() and then use the output in all sorts of javascript operations. I found that we can use javascript (jquery) to load a file into a div by just applying $("#some_div").load(document.getElementById('some_div').getAttribute("data-src")) to something like <div id="some_div" data-src="my_file.html"></div>. The result will be a div that loads my_file.html.

I developed this a little bit further and created a script for loading files into divs having data-src=... and an obligatory ID: <div id="some_div" data-src="some_file.html" ></div>. The script must be put after all the divs. It's best to put it immediately before the closing body tag:
<script>
function load_into_div(which)
{//load the file specified by data-src into the div (=which)
$("#"+which).load(document.getElementById(which).getAttribute("data-src"))
}
//do this for each div having the custom attribute data-src
$('[data-src]').each(function() {
load_into_div($(this).attr('id'));
});
</script>

It's a jquery-based script, so we must put the following line in the head:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


There we have it: divs that have a custom (data-)src attribute and that load files just like frames, iframes etc. do. More explanations and demos here.

EDIT August 17th:
I revised the script so as to make it possible to not only load files into divs on page load but also on click, using one and the same script.

Revised script:
<script>
function load_into_div(which_div, which_filename)
{
/* onload event: if the div has the attribute 'data-src' specifying a file name, load the file into the div (=which_div) */
if(!which_filename){$("#"+which_div).load(document.getElementById(which_div).getAttribute("data-src"))}

/* other event (click, normally): load the file represented by 'which_filename' into the div, whether or not the div has the attribute 'data-src' */
if(which_filename){$("#"+which_div).load(which_filename)}
}

/* do the onload for every div having the custom attribute data-src */
$('[data-src]').each(function() {load_into_div($(this).attr('id'));});
</script>

Submit "Loading files into divs having a custom src attribute" to del.icio.us Submit "Loading files into divs having a custom src attribute" to StumbleUpon Submit "Loading files into divs having a custom src attribute" to Google Submit "Loading files into divs having a custom src attribute" to Digg

Updated 08-16-2014 at 10:33 PM by molendijk

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. molendijk's Avatar
    I revised the script so as to make it possible to not only load files into divs on page load but also on click, using one and the same script.