A div or iframe container with dynamic buttons linking to a dynamic box

Question

To be brief, I don't know exactly how dynamic html or .js or ajax or .as works, however, I have seen on many websites with dynamic content using an iframe or divisions (<div>). Basically, there is three buttons (divs that are w:150px h:30px) in a straight line with a box under it (iframe or div). If you click on button one the box underneath it will change to different content without actually changing pages or reloading the whole entire page. My question is how to do that successfully?

Thank you for taking the time to read and/or answer my question!

Have a great day,

Blane

body width is 800px height is 100% I have header and foot both at 50px in height and the main body is about 2400px in height. In the main body I have another container that is 700px in width with 50px margin on the left and right. There is 2 boxes inside floating to the left called column1 and column2. Column1 hold an image representing me which is 300px width and 300px in height, not necessarily the exact size of the image itself. The other column2 is 400px:w by 300px:h. And it is broken up into parts, at the bottom there is a container that is 400px:w by 30px:h. That has been broken up into 4 parts making each part 100px width. This houses my dynamic buttons. Underneath the columns and that div is a separate division that hold the content that will change. I have it set to the same attributes as the main-container (w:700px h:400px margin-left/right:50px). That is where I am stuck, I have Googled tutorials on dynamic content in HTML, but I haven't found what I was looking for. Everything was to fancy and advanced with loading screens and moving images and what not. I just want click change no refresh if that makes any sense.

Answer 1

In order to get the dynamic content you'll need to pull this data out of a database or another website or another web page using AJAX. I recommend reading up and learning JQuery as it's fairly simple and like any other language, follows a logical flow. JQuery syntax is also pretty simple so it shouldn't be too hard to pick up. But i digress.

If your HTML structure is as follows:

<div id="container">
    <div id="panel1" class="panel">
        <a href="#" class="button" id="btn-1">Button 1</a>
        <div id="iframe-1"></div>
    </div>
    <div id="panel1" class="panel">
        <a href="#" class="button" id="btn-2">Button 2</a>
        <div id="iframe-2"></div>
    </div>
    <div id="panel1" class="panel">
        <a href="#" class="button" id="btn-3">Button 3</a>
        <div id="iframe-3"></div>
    </div>
</div>

and your CSS roughly looks like:

.panel{
    float:left;
}

/* Initially hide all iframe divs */
.panel > div{
    display:none
}

/* Initially show only the first iframe div */
.panel > div:first-child{
    display:block;
}

Using JQuery, you can use:

//Run the code after the elements of the page have been downloaded. This is usually how most JQuery syntax starts. 
$(document).ready(function(){
    //When the button is clicked, run a function
    $('.button').click(function(e){
        e.preventDefault(); //Prevents default click behavior; similar to defining onclick='return false;' in the <a /> tag.
        $('.button').siblings('div').hide(); //Hide all open iframe divs
        $(this).siblings('div').show(); //Show the iframe div corresponding to clicked link
        var id = $(this).attr('id').replace('btn-','iframe-'); //Get the ID of the link clicked and replace 'btn-' with 'iframe-'
        $('#'+id).load('http://<url of the page you want to load>'); //Load the new web page or content into the iframe div. This could be an absolute or relative path.
    });
});

Similar to the .load() function, there is also the .ajax() function which is more comprehensive. Also remember, how Javascript works is that it is compiled on the client computer and is run once when the page is loaded. Thus, when fetching dynamic data which is being added to the HTML of a page, any actions such as clicks, hovers etc, need to be reloaded for the new content. You'll need to use JQuery's .on() or .delegate() event.

Hope this helps.

Answer 2

Here's a simple example using the jQuery plug-in for JavaScript. You can do this in plain JavaScript, but it's a lot more work.

<input class="btn"  type="button" id="A"  value="A">
<input class="btn" type="button"  id="B" value="B">
<input class="btn"  type="button" id="C"  value="C">
<div class="lower A">A</div>
<div class="lower B" style="display:none">B</div>
<div class="lower C" style="display:none">C</div>

JS:

$('.btn').click(function() {
     $('.lower').hide()     <-- this hides everything with a class of "lower"
     $('.'+ $(this).attr('id')).show()   <--- this grabs the ID of the button and shows everything that has a class matching the ID
})