SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast SkyNet's Avatar
    Join Date
    Sep 2003
    Location
    Europe/Slovenia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change iframe's content?

    Hi!

    It goes like this...i got a page with menus on top and an iframe in the middle of this page. Now what i want to know is how can i change iframe's content when i click on the menu's hyperlinks. Like when i click the "About" in the menu i want to see about.html in iframe.
    I hope you understood what i'm trying to do...

  2. #2
    . Ruchir's Avatar
    Join Date
    Feb 2002
    Location
    Sydney
    Posts
    1,863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this what u mean ? . then u could do what has been done in the page mentioned, and have links outside that part, and connect the two pages in that manner..

    -ruchir
    Peace.

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you keep the link IDs the same as the page names (minus the extention) then you could use this: DEMO
    Code:
    <html>
      <head>
    	<title>Change iFrame Contents</title>
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	  function changeFrame(newPage){
    		document.getElementById('myframe').src = newPage + ".html";
    	  }
    	//-->
    	</script>
      </head>
      <body>
    	<div align="center">
    	  <span id="menu">
    		<a href="#" id="default" onClick="changeFrame(this.id)">Home</a>
    		<a href="#" id="about" onClick="changeFrame(this.id)">About</a>
    		<a href="#" id="contact" onClick="changeFrame(this.id)">Contact</a>
    	  </span>
    	  <br><br>
    	  <iframe src="default.html" id="myframe">
    		You can't see iFrames  :(
    	  </iframe>
    	</div>
      </body>
    </html>
    If you really must have the IDs and page names different, then that would be a minor change but would mean that your code wasn't quite as generic.


    Andy
    From the English nation to a US location.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This builds on awestmoreland's script, but it's more accessible if Javascript and/or iframes are unavailable.
    Code:
    <html>
      <head>
    	<title>Change iFrame Contents</title>
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	  function changeFrame(newPage){
    		document.getElementById("myframe").src = newPage;
    	  }
    	//-->
    	</script>
      </head>
      <body>
    	<div align="center">
    	  <span id="menu">
    		<a href="default.html" id="default" onClick="changeFrame(this.href); return false;">Home</a>
    		<a href="about.html" id="about" onClick="changeFrame(this.href); return false;">About</a>
    		<a href="contact.html" id="contact" onClick="changeFrame(this.href); return false;">Contact</a>
    	  </span>
    	  <br><br>
    	  <iframe src="default.html" id="myframe">
    		You can't see iFrames  :(. Use the links above to get to our pages :).
    	  </iframe>
    	</div>
      </body>
    </html>

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    This builds on awestmoreland's script, but it's more accessible if Javascript and/or iframes are unavailable.
    Nice one! I like that


    Andy
    From the English nation to a US location.

  6. #6
    SitePoint Enthusiast SkyNet's Avatar
    Join Date
    Sep 2003
    Location
    Europe/Slovenia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help guys!
    Will try it first thing when i get back home...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •