CODEWITHSUNDEEP
javascripthtmlcssiframe
Yasmin Khalaf
Yasmin Khalaf

Reputation: 3

I'd like to display content from different links in the same page

I have two divs. One on the left and one on the right.

The one on the left will display links and whenever clicked, the content will appear on the right div.

I've been trying to do it with Iframe and javascript but I can't seem to get it right. I'm still a beginner and I have been searching all over the internet sigh.

Any ideas?!

Thanks

Upvotes: 0

Views: 6337

Answers (6)

cp3
cp3

Reputation: 2139

You have a couple choices in order to achieve this.

The easiest way is to have all the content separated in divs with an id in the right div. Hide all but the first link. The links on the left would have these ids linking to the corresponding content. When a link is clicked hide all, to clear the right div, and show the id that was clicked.

The other choice is AJAX which isn't as accessible as the first choice since if Javascript is off it won't work. For the first choice if Javascript is off the content will just be displayed and upon clicking the links it will scroll to the content.

Upvotes: 1

Phaenotyp
Phaenotyp

Reputation: 233

Hey Jasmin, you could do something like this. Please note this solution is without a javascript framework. But you should definetly look into a framework lik jquery or prototype. Let's say you have:

<html><head>...</head><body>
<ul>
<li><a href="www.google.com" id="firstLink" >GOOGLE</a></li>
<li><a href="www.twitter.com" >Twitter</a></li>
<li><a href="www.tumblr.com" >Tumblr</a></li>
</ul>

<div><iframe name="TEST" src="about:blank" id="ts" ></IFRAME></div>

PUT THE SCRIPT TAG CLOSE TO THE BOTTOM OF YOU PAGE FOR SAKE OF PAGESPEED
BETTER PUT EVERYTHING IN AN EXTERNAL JS SCRIPT

<script laguage='javascript'>

addLoadListener(initEvents);

function initEvents()
{
  var mylink = document.getElementById("firstLink");

  mylink.onclick = changeFrame(mylink.href);

  return true;
}


function changeFrame(url)
       {
          //OPEN URL IN IFRAME WITH ID = ts
          document.getElementByID('ts').src=url;
          return false; // IS NEEDED TO SKIP THE NORMAL BEHAVIOUR OF THE LINK
      }


// THIS FUNCTION IS NEEDED TO HAVE THE JS READY WHEN THE PAGE IS LOADED
function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }


   </script>
</body></html>

Upvotes: 0

treaint
treaint

Reputation: 709

In your link's onClick, you can change the src of the iframe to the link's href and that should automatically change the iframe's contents.

Upvotes: 0

Christian Schlensker
Christian Schlensker

Reputation: 22478

You can easily do this by using the jQuery and jQuery UI library. http://jqueryui.com/demos/tabs/#ajax The jQueryUI tabs can load remote content.

Upvotes: 0

vissi
vissi

Reputation: 2334

If you want to display information in another DIV, you should use AJAX. If you would like to use a navigation frame, check this.

Upvotes: 0

mixkat
mixkat

Reputation: 3785

You can use the DOM to achieve something like that...have a look at http://www.w3schools.com/jsref/default.asp it has some good examples there...

Upvotes: 0

Related Questions