www.webdeveloper.com
Results 1 to 3 of 3

Thread: javescript, iframe/div relation.

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    javescript, iframe/div relation.

    hi,

    basically what i need is for my 5 individual divs on my webpage to open their respective .html's in an iframe on the same page.

    so far i have this:
    ----------------------------------------
    <div id="main">
    <script language="JavaScript">
    function changeblog() {
    document.getElementById("blog_holder").src = "Blogs/frame_blog_1.html";
    document.getElementById("blog_holder").src = "Blogs/frame_blog_2.html";
    document.getElementById("blog_holder").src = "Blogs/frame_blog_3.html";
    document.getElementById("blog_holder").src = "Blogs/frame_blog_4.html";
    document.getElementById("blog_holder").src = "Blogs/frame_blog_5.html";
    }
    </script>
    <div id="blog_selection_holder">
    <div onclick="changeblog()" id="blog_1">Content for id "blog_1" Goes Here</div>
    <div onclick="changeblog()" id="blog_2">Content for id "blog_2" Goes Here</div>
    <div onclick="changeblog()" id="blog_3">Content for id "blog_3" Goes Here</div>
    <div onclick="changeblog()" id="blog_4">Content for id "blog_4" Goes Here</div>
    <div onclick="changeblog()" id="blog_5">Content for id "blog_5" Goes Here</div>
    </div>
    <iframe id="blog_holder"></iframe>
    </div>
    ---------------------------------
    from what i can tell through my little knowledge of javascript is that no matter which div you click it will always just show the last blog( blog_5) in the iframe because the function is in a list.

    is there some way i can allocate, "click this div open blog_1, click this div open blog_2" and so on?

    any responces much appreciated.

    cheers,

    Lloyd.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,036
    yes. as far as I can tell you would be better off with this:

    Code:
    <script type = "text/javascript">
    function changeblog(theblog) {
    document.getElementById("blog_holder").src = "Blogs/frame_"+theblog+".html";
    }
    </script>
    <div id="main">
    <div id="blog_selection_holder">
    <div onclick="changeblog(this.id)" id="blog_1">Content for id "blog_1" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_2">Content for id "blog_2" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_3">Content for id "blog_3" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_4">Content for id "blog_4" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_5">Content for id "blog_5" Goes Here</div>
    </div>
    <iframe id="blog_holder"></iframe>
    </div>

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    Quote Originally Posted by xelawho View Post
    yes. as far as I can tell you would be better off with this:

    Code:
    <script type = "text/javascript">
    function changeblog(theblog) {
    document.getElementById("blog_holder").src = "Blogs/frame_"+theblog+".html";
    }
    </script>
    <div id="main">
    <div id="blog_selection_holder">
    <div onclick="changeblog(this.id)" id="blog_1">Content for id "blog_1" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_2">Content for id "blog_2" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_3">Content for id "blog_3" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_4">Content for id "blog_4" Goes Here</div>
    <div onclick="changeblog(this.id)" id="blog_5">Content for id "blog_5" Goes Here</div>
    </div>
    <iframe id="blog_holder"></iframe>
    </div>
    Thank you very much my firend, i was worried it may have been alot more difficult than that, as my college javascript lecturer couldnt even tell me the answer himself!

    cheers though.

    Lloyd.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles