Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Tab Content Script (v 2.2) styling active tab

  1. #1
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Tab Content Script (v 2.2) styling active tab

    1) Script Title: Tab Content Script (v 2.2)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem:

    hello guys

    i am using the above script with content for 2 tabs. The actual tabs are hidden and i use 2 links on the same page to open each of these tabs
    i.e. <a href="javascript:exampletabs.expandit(0)"> and <a href="javascript:exampletabs.expandit(1)">

    is there a way to add styling on these links so the user can see which tab is actually active? for instance, the active tab to have different colour

    thanks in advance for your help

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.


    It will help get answers / assistance faster
    Thanks,

    Bud

  3. #3
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Here is the code,

    <head>
    <link rel="stylesheet" type="text/css" href="tabcontent/tabcontent.css" />
    <script type="text/javascript" src="tabcontent/tabcontent.js"></script>
    </head>

    Code:
    <a href="javascript:businestabs.expandit(0)">Click here for Tab-1</a><span style="padding:0 10px 0 10px;">|</span><a href="javascript:businestabs.expandit(1)">Click here for Tab-2</a>
    <div id="default1" class="tabcontent">
    	<div class="box1">
    		<div class="wrapper">
    			<div class="text">Content of tab1</div>
    			this is the content for tab1
    		</div>
    	</div>
    </div>
    <div id="default2" class="tabcontent">
    	<div class="box1">
    		<div class="wrapper">
    			<div class="text">Content of tab2</div>
    			this is the content for tab2
    		</div>
    	</div>
    </div>
    <div id="businesstabs" style="display:none;">
    	<ul>
    		<li><a href="#" rel="default1" class="selected"></a></li>
    		<li><a href="#" rel="default2"></a></li>
    	</ul>
    </div>
    <script type="text/javascript">
    	var businestabs=new ddtabcontent("businesstabs")
    	businestabs.setpersist(false)
    	businestabs.setselectedClassTarget("link")
    	businestabs.init()
    </script>

    thanks

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    you would use css to do that
    Thanks,

    Bud

  5. #5
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    In that css page there is this part for the selected tab:

    Code:
    .shadetabs li a.selected{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    border-bottom-color: white;
    }
    It uses a different image to show what tab you are on(red in the code).it also uses white to make it easier to see a difference.

    What do you want to do?
    Thanks,

    Bud

  6. #6
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi Bud,

    i am not using the "li" items to navigate through the tabs. As you can see, i have them display:none;

    i use these 2 links to navigate through the tabs
    <a href="javascript:businestabs.expandit(0)">Click here for Tab-1</a><span style="padding:0 10px 0 10px;">|</span><a href="javascript:businestabs.expandit(1)">Click here for Tab-2</a>

    is there a way to style these 2 links so which ever is the active tab (either 'Click here for Tab-1' or 'Click here for Tab-2') to have different colour?

  7. #7
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.


    To see everything would be much easier
    Thanks,

    Bud

  8. #8
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi, you can find the script here:

    http://www.web-conceptions.com/test.asp

  9. #9
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Here is what my google came up with

    https://www.google.com/search?q=styl...ient=firefox-a

    You probally will need to use a div/p/or something like that to use the a:active attribute(I hope I used the right word-lol) for the results you want
    Thanks,

    Bud

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Quote Originally Posted by Foundas View Post
    i am not using the "li" items to navigate through the tabs. As you can see, i have them display:none;
    Why not just use the default <li> navigation but style them to look like links/buttons/whatever, rather than tabs? They are tied to the "selected" class in the CSS so you can style them how you want;
    Code:
    #businesstabs li a.selected{
    border: 0;
    color: red;
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    Foundas (03-25-2013)

Similar Threads

  1. Replies: 0
    Last Post: 08-22-2009, 11:25 AM
  2. Resolved Script/css to open content on same page-and highlight active content.
    By avdistribution in forum Looking for such a script or service
    Replies: 3
    Last Post: 01-07-2009, 02:58 PM
  3. Styling content within Iframe
    By jzhang1013 in forum HTML
    Replies: 2
    Last Post: 12-06-2008, 07:17 PM
  4. Styling Tab Content Script
    By jasonk in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-30-2008, 12:50 AM
  5. Tab Content Script -- remove bottom border on active tab
    By keleh in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-30-2005, 03:43 AM

Bookmarks

Posting Permissions

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