Show 1 out of 3 iFrames by clicking corresponding button (3 iFrames, 3 buttons)

I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o

Here's my code:

Expand|Select|Wrap|Line Numbers

     <div id="tabs">  

    <div id="overview">  

    <a href="#wrapper">Overviews</a>  

    </div>  

    <div id="gallery">  

    <a href="#wrapper2">Gallery</a>  

    </div>  

    </span>  

    <div id="reviews">  

    <a href="#wrapper3">Reviews</a>  

    </div>  

    </div>

Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.

How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?

Thank you so much in advance!! :)

P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)

Jan 16 '10 #1

Subscribe Post Reply

✓ answered by Atli

Hey.

I would suggest one of two methods, to swap out the contents of an element.

#1 A single <iframe> who's contents are changes by <a> tags.
For example:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

    <title>Test</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

    <div>

        <div>

            <a target="searchFrame" href="page1.html">First</a> |

            <a target="searchFrame" href="page2.html">Second</a> |

            <a target="searchFrame" href="page3.html">Third</a>

        </div>

        <hr>

        <iframe name="searchFrame" width="550" height="400"></iframe>

    </div>

</body>

</html>

By specifying the target attribute of the <a> tag, it will open the link in the targeted <iframe>, rather than the browser window itself.

#2 Swapping the contents of a <div> using AJAX.
This is essentially the 2.0 version of the first suggestion. It uses more modern techniques, which give you more control over what happens, and give you a lot more options as to how the data is handled.

However, it requires that JavaScript is enabled, and it requires a little more code.

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

    <title>Test</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript">

    function swapContent(targetID, url) {

        var target = document.getElementById(targetID);
 
        var ajax = new XMLHttpRequest();

        ajax.open('GET', url, true);

        ajax.onreadystatechange = function() {

            if(ajax.readyState == 4) {

                target.innerHTML = ajax.responseText;

            }

        }

        ajax.send(null);

    }

    </script>

</head>

<body>

    <div>

        <div>

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page1.html');">First</a> |

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page2.html');">Second</a> |

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page3.html');">Third</a>

        </div>

        <hr>

        <div id="searchDiv" style="width: 550px; height: 400px; overflow: scroll;">Please select one...</div>

    </div>

</body>

</html>

3754

Atli

5,058

Expert 4TB

Hey.

I would suggest one of two methods, to swap out the contents of an element.

#1 A single <iframe> who's contents are changes by <a> tags.
For example:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

    <title>Test</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

    <div>

        <div>

            <a target="searchFrame" href="page1.html">First</a> |

            <a target="searchFrame" href="page2.html">Second</a> |

            <a target="searchFrame" href="page3.html">Third</a>

        </div>

        <hr>

        <iframe name="searchFrame" width="550" height="400"></iframe>

    </div>

</body>

</html>

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

    <title>Test</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript">

    function swapContent(targetID, url) {

        var target = document.getElementById(targetID);
 
        var ajax = new XMLHttpRequest();

        ajax.open('GET', url, true);

        ajax.onreadystatechange = function() {

            if(ajax.readyState == 4) {

                target.innerHTML = ajax.responseText;

            }

        }

        ajax.send(null);

    }

    </script>

</head>

<body>

    <div>

        <div>

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page1.html');">First</a> |

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page2.html');">Second</a> |

            <a href="javascript: void();" onclick="swapContent('searchDiv', 'page3.html');">Third</a>

        </div>

        <hr>

        <div id="searchDiv" style="width: 550px; height: 400px; overflow: scroll;">Please select one...</div>

    </div>

</body>

</html>

Jan 18 '10 #2

lauranoel

your 1st solution worked!! :) but i still have to click the 1st tab before it loads the frame. how do i set the 1st tab to be chosen as default upon loading the page? :) thanks so much again!! :)

Jan 19 '10 #3

Atli

5,058

Expert 4TB

You can set the src attribute of the tag.

Expand|Select|Wrap|Line Numbers

<iframe src="page1.html" ... >

P.S.
You can use that page I linked: w3schools.com, to check out how various elements work.

Jan 19 '10 #4

by: Pieter Linden | last post by:

In Access 2000, I would have sworn I could see the controltiptext of a button without clicking on it. Can this still be done in AccessXP? If so, does someone have a code snippet showing how to do...

Microsoft Access / VBA

TextChanged Event by clicking on button

by: gaurav | last post by:

hi, I have a problem, How do i use TextChanged Event by clicking on Button. When i changed the text in text box and moving the focus from there then it is working but i have one calender popup...

ASP.NET

TextChanged Event by clicking on button in C#.

by: gaurav | last post by:

hi, I have a problem, How do i use TextChanged Event by clicking on Button. When i changed the text in text box and moving the focus from there then it is working but i have one calender popup...

ASP.NET

How to set values dynamicaly to dropdown listbox while clicking the button

by: anand basha | last post by:

Hi, How to set values dynamicaly to dropdown listbox while clicking the button *** Sent via Developersdex http://www.developersdex.com ***

Javascript

using javascript to move text on clicking a button

by: Ian Davies | last post by:

I am trying to move some text by clicking a button. When clicked the button runs the java script and this will then take the value in the text field and add 10 to it to create a new value, this is...

Javascript

how to load powerpoint slide show when clicking a button

by: denvercr | last post by:

Hi Guys, If you can help me on this problem, how can i possibly call or run a powerpoint slideshow when clicking a button in an asp.net page? Thank you guys for your assistance..

.NET Framework

How to Reload a page when it is redirected by browser's back or foward button?

by: mjahabarsadiq | last post by:

I would like to reload the page when it is redirected by the browser's Back or Forward button. I tried the following but it does not works. <link rel="prev" href="url"> <link rel="next"...

Javascript

close user from site with clicking close button of browser

by: oranoos3000 | last post by:

hi i,m writing a script for chat room i,d like to with clicking close button of browser user is exited from site meaning of this say is with clicking close button all of session variable is...

Javascript

problem while clicking edit button in gridview

by: bala venkata siva ram kum | last post by:

I am facing a problem while clicking edit button of a gridview.after clicking edit button it is displaying empty textboxes. I need old values in that textboxes. Here i used 3-tier architecture....

.NET Framework

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Show 1 out of 3 iFrames by clicking corresponding button (3 iFrames, 3 buttons)

✓ answered by Atli

Similar topics