Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic creation of tabs with iframe

    I am new to jquery. I am creating tabs dynamically when an user clicks on a menu item. It works just fine with 3 tabs. when the tab count exceeds 3 and if i click on a previous tab it doesn't work properly.It shows the current iframe and the previous iframe.Both iframes are visible.

    Here i am creating the tabs dynamically with the jquery & Html/CSS.

    Can any one help me out in this issue..

    Here is the coding.......

    [CODE]

    =========================================================
    Script Part
    =========================================================

    /*Creation of tab*/

    function addTab(link,ct) {

    // If tab already exist in the list, return

    if ($("#" + $(link).attr("rel")).length != 0)

    return;

    // hide other tabs

    $("#tabs li").removeClass("current");

    if(ct>1)
    {
    for(i=ct-1;i>0;i--)
    {
    fr = document.getElementById (i);

    if (fr.style.display!='none'){

    fr.style.display="none";

    }

    }

    }

    // add new tab and related content

    $("#tabs").append("<li class='current'><a class='tab' id='"

    + $(link).attr("rel") + "' name='"+ct+"' href='" +

    $(link).attr("href") + "' target='" +

    $(link).attr("target") + "'>" + $(link).html() + "</a><a

    name ='"+ct+"' href='http://bytes.com/submit/g/' class='remove' >x</a></li>");

    var e = $('<div class="dcontent" ><li style="list-

    style:none;"><iframe id="'+ct+'"

    src='+$(link).attr("href")+' name="content" align="middle"

    width=800px; height=600px;> </iframe></li></div>');

    $('#content').append(e);

    }


    /*Make the current tab content to visible*/

    $('#tabs a.tab').live('click', function() {
    // Get the tab name

    var contentname = $(this).attr("id") + "_content";

    var ifid=$("#content .dcontent:last

    iframe").attr("id");

    // hide all other tabs

    if(ifid>1)
    {
    for(i=ifid;i>0;i--)
    {
    fr = document.getElementById (i);

    if (fr.style.display!='none')

    {
    fr.style.display="none";
    }
    }
    }

    //make the current frame visible

    var lnm=$(this).attr("name");

    fr = document.getElementById (lnm);

    if (fr.style.display!='block')
    {
    fr.style.display="block";
    }

    $("#tabs li").removeClass("current");

    // show current tab

    $("#" + contentname).show();

    $(this).parent().addClass("current");

    });

    =========================================================
    HTML Part
    =========================================================
    <ul id="tabs"> <div style="float: left;"> <ul id="menu"> <li> <a href="http://bytes.com/submit/g/">Next</a> <ul id="documents"> <li><a href="http://bytes.com/tab1.html" target="content"

    rel="1">Document1</a></li> <li><a href="http://bytes.com/tab2.html" rel="5"

    target="content">Document2 </a></li> <li><a href="http://bytes.com/tab3.html"

    rel="3" target="content">Document3 </a></li> <li><a href="http://bytes.com/tab4.htm" rel="4"

    target="content">Document4 </a></li> </ul> </li> </ul> </div> </ul> <div id="content"> </div>
    [ICODE]

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    There are things missing, maybe the css, don't know but this is not working for me. The jquery is not working at all.
    There are a few things you should be aware of:
    Not sure you understand the rel attribute for anchors, read this:http://www.w3schools.com/TAGS/att_a_rel.asp
    You do not have an iframe in your code.
    Code:
    <div id="content"> </div>
    is a div.
    Code:
    <iframe id="content" name="content" height="300px" width="400px"></iframe>
    is an iframe.
    Read this on target attribute http://www.w3schools.com/tags/att_a_target.asp
    Your top ul and the div following are not necessary:
    Code:
    <!--<ul id="tabs">-->
    <!--	<div style="float: left;">-->
    		<ul id="menu">
    In order to get this to work I had to de-activate my FireFox tab plus options. I open everything in another browser tab. Your code would not work with my settings. That's the trouble with iframes.

    When posting, your in the message box, just above that is a tool menu. Use the '#' hash mark to generate the tags you need to put your code into.


  •  

    Tags for this Thread

    Posting Permissions

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