#1
  1. User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Location
    UK
    Posts
    471
    Rep Power
    76

    Question Spry and the DOM


    Hey,
    Im using SPRY TABS in dreamweaver and I wanted to make them dynamic so you can create and delete the tabs.

    The tabs are simple, there's a div for the tab and a div for the content:
    Code:
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" onclick="javascript:updatetabs('Home')" tabindex="0">Home</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Welcome to Organzier</div>
    </div>
    As you can see I've added
    Code:
    onclick="javascript:updatetabs('Home')"
    But how can I use the DOM to create another <li class="TabbedPanelsTab"> and another <div class="TabbedPanelsContent"> to the end of the <ul class="TabbedPanelsTabGroup"> and <div class="TabbedPanelsContentGroup">
    And also how to delete these.
    Any help appreciated.
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    341
    I modified the HTML very slightly
    html4strict Code:
    <ul class="TabbedPanelsTabGroup" id="tptg">
    	<li class="TabbedPanelsTab" onclick="javascript:updatetabs('Home')" tabindex="0">Home</li>
    </ul>
    <div class="TabbedPanelsContentGroup" id="tpcg">
    	<div class="TabbedPanelsContent">Welcome to Organzier</div>
    </div>

    Here's a basic function to add both a new LI and DIV to the DOM.
    javascript Code:
    function addTab(liContent,divContent) {
    	var tptg = document.getElementById('tptg');
    	var tpcg = document.getElementById('tpcg');
     
    	var li = document.createElement('li');
    		li.className = 'TabbedPanelsTab';
    		li.onclick   = function() {
    			// Add a function, if you want.
    		}
    		// For plain text
    		li.appendChild(document.createTextNode(liContent));
    	var div = document.createElement('div');
    		div.className = 'TabbedPanelsContent';
    		// For text-only content
    		div.appendChild(document.createTextNode(divContent));
    		// If divContent contains HTML, you _can_ use innerHTML
    		// though it is discouraged.
    		div.innerHTML = divContent;
    }

    Comments on this post

    • sephers181 agrees
    I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

    Stop Using Pop-Ups
  4. #3
  5. User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Location
    UK
    Posts
    471
    Rep Power
    76
    Thanks, it looks great but how does it then show it? I can see how it makes the li and div but how does it "append" them to where ever needs be?

    EDIT: Doesn't matter I've done it with:
    Code:
    tptg.appendChild(li);
    tpcg.appendChild(div)
    But that add the tab fine but the div is added to the bottom of the current tabs div! I think this is why it's harder, as spry must do some stuff to the tabs to make them work.

    Does anyone know how the spry tabs work and how to dynamically add a new one instead of just adding a new li and div to the dom?

    Thanks,
    Sephers
    Last edited by sephers181; April 2nd, 2008 at 02:39 PM.
  6. #4
  7. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    341
    Yeah, I forgot to append them, oops.. I think the reason it doesn't work right is because you are applying SPRY to the current set, then trying to add more items to the set w/o reapplying SPRY... though I've never actually used SPRY, so I may be wrong.
    I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

    Stop Using Pop-Ups
  8. #5
  9. User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Location
    UK
    Posts
    471
    Rep Power
    76
    Yeah, ive looked all over the internet but no one else seems to have done this. Anyway I've posted a thing on the adobe spry forum and see what they say

    Thanks anyway,
    Have some rep
  10. #6
  11. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    341
    Honestly, I never use built-in Adobe/Macromedia crap, most of it has the exact problem you're having ... very little customization; want to add an additional menu, too bad! Want to modify their code? Last time I checked, it was all compressed and jumbled so you couldn't do that easily, either.

    If you wind up writing your own, I'd be glad to help you with it.
    I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

    Stop Using Pop-Ups

IMN logo majestic logo threadwatch logo seochat tools logo