www.webdeveloper.com
Results 1 to 5 of 5

Thread: generate tabs dynamically in java script

  1. #1
    Join Date
    Oct 2007
    Posts
    10

    generate tabs dynamically in java script

    i am trying to generate tabs dynamically in java script.

    i am able to add a new tab but unable to add a content to the tab.

    attachment contains the files i used.

    Please have a look at "index" page.
    open it and click "Xponent Processing Steps"

    under that tab click the anchor link "Add Xponent Processing steps"

    when i click that, i am able to add a new tab, but i want to display some content under that tab also.

    I mean when i click the newly added tab, i want to show some content under that tab(ofcourse that too have to be created dynamically).

    i am following some open source code and i am unable to understand it.

    i am panic.

    If you can help me out, that would be most thankful.

    thank you

    Ravindar
    Attached Files Attached Files

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question Simpler example ...

    Your script is much too complicated for me to think about during a holiday.
    Do you have a smaller example of exactly what the problem is?

    If not, see if you can start from this:
    PHP Code:
    <html>
    <
    head>
    <
    title>Tab Example</title>

    <
    style type="text/css">
    /*
       Tabbed example 
       From: http://www.w3.org/Style/Examples/007/target#default
    */
    div.tabs {
      
    min-height7em;                    /* No height: can grow if :target doesn't work */
      
    positionrelative;                /* Establish a containing block */
      
    line-height1;                    /* Easier to calculate with */
      
    z-index0}                        /* So that we can put other things behind */
    div.tabs div {
      
    displayinline}                    /* We want the buttons all on one line */
    div.tabs div {
      
    colorblack;                        /* Looks more like a button than a link */
      
    background#CCC;                    /* Active tabs are light gray (#CCC) */
      
    padding0.2em;                    /* Some breathing space */
      
    border0.1em outset #BBB;        /* Make it look like a button */
      
    border-bottom0.1em solid #CCC}     /* Visually connect tab and tab body */
    div.tabs div:not(:target) > {
      
    border-bottomnone;                /* Make the bottom border disappear */
      
    background#AAA}                    /* Inactive tabs are dark gray (#999) */
    div.tabs div:target a,            /* Apply to the targeted item or... */
    :target #default2 > a {                /* ... to the default item */
      
    border-bottom0.1em solid #CCC;     /* Visually connect tab and tab body */
      
    background#CCC}                    /* Active tab is light gray */
    div.tabs div div {
        
    width:500px;
      
    background#CCC;                    /* Light gray (#CCC) */
      
    z-index: -2;                        /* Behind, because the borders overlap */
      
    left0top1.3em;                /* The top needs some calculation... */
      
    bottom0right0;                /* Other sides flush with containing block */
      
    overflowauto;                    /* Scroll bar if needed */
      
    padding0.3em;                    /* Looks better */
      
    border0.1em outset #BBB}        /* 3D look */
    div.tabs div:not(:target) > div /* Protect CSS1 & CSS2 browsers */
      
    positionabsolute }                /* All these DIVs overlap */
    div.tabs div:target div, :target #default2 > div {
      
    positionabsolute;                /* All these DIVs overlap */
      
    z-index: -1}                        /* Raise it above the others */
    </style>
    </
    head>
    <
    body>

    <
    div class=example>
     <
    div class=tabs>
      <
    div id=tab1>
       <
    a href="#tab1">Tab&nbsp;1</a>

       <
    div>One might well argue,<brthat...</div>
      </
    div>
      
      <
    div id=tab2>
       <
    a href="#tab2">Tab&nbsp;2</a>
       <
    div>... 30 lines of CSS is rather a lot,<br> and...</div>

      </
    div>
      
      <
    div id=tab3>
       <
    a href="#tab3">Tab&nbsp;3</a>
       <
    div>... that 2 should have been enough,<brbut...</div>
      </
    div>
      
      <
    div id=default2>

       <
    a href="#default2">Default</a>
       <
    div>... it works!</div>
      </
    div>
      
     </
    div>
    </
    div>

    </
    body>
    </
    html

  3. #3
    Join Date
    Oct 2007
    Posts
    10

    dynamic tab

    thank you.


    can you change your example a bit to make dynamic tabs?

    i mean provide a link or a button or another tab which when we click on it a dynamic tab is to be generated with some content in side it, say "hello i am new tab"


    thank you
    Ravindar

  4. #4
    Join Date
    Oct 2007
    Posts
    10

    want html code

    Hi

    i got the solution for dynamic tabs.

    But before i want your code help.

    you have given me the php code.
    Can you please change it to html code because thats not working in IE.


    Thank you

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Arrow Please clarify the problem please ...

    Quote Originally Posted by ravindarjobs View Post
    Hi

    i got the solution for dynamic tabs.

    But before i want your code help.

    you have given me the php code.
    Can you please change it to html code because thats not working in IE.


    Thank you
    I'm not sure I understand.
    The code provided in the post is pure HTML and JS only.
    It is surrounded by [ php][ /php] (without the spaces) tags
    but this is for display purposes only, but there is no actual PHP code.

    Have you tried the code on your computer or on a server.
    If local, you might need to say OK to the IE cautions about scripts in general
    but it does work.

    What sort of errors are you getting in IE? Have you tried it in FF also?

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