Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Tab Box


  • Please log in to reply
12 replies to this topic

#1 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 25 February 2009 - 01:12 PM

Hi

I have a tab box on my website that works fine.

However, I tried to add another tab box to the same page and I am getting a conflict.

The tab box is controlled by css and a style sheet.

I now realise the javascript is telling one tab to open, but as there are 2 tab boxes on the page, it is confused by my coding!

I have an example here...

The layout is bad but im not worried about that. I am just trying to make it work.

Is it possible? If so, how?

Thanks for any help.

#2 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 25 February 2009 - 01:53 PM

I'm not completely sure I understand the problem, but I do see one thing you'll want to change.

Since the div id's are getting passed through to your script you'll want to make sure those contain only letters and/or numbers. No spaces, which I see you have some of, and no special characters or punctuation marks. Those will all throw a monkey wrench into the process if the script isn't specifically designed to handle special character encoding.

#3 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 25 February 2009 - 04:35 PM

Hi Randy

The problem is one of the tab boxes dont work.

I cant find a way to aim a separate css and javascript file to each tab box.

You will see the example above in my first post, the first tab box breakes the second.

#4 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 25 February 2009 - 10:13 PM

The div id's with spaces and special characters can cause that Madams. I didn't parse through all of it, but typically id's are used to trigger JS functions. If that's the case with your javascript those spaces could cause problems.

Or if you're using the same div id for two different sections you'll need to change one of those. eg if you have one <div id="something"> and a second, separate section with the same <div id="something"> one is going to conflict with the other. So if the something bit is hardcoded in your js function you may need to name one of them "something2" and have a new section of js code in your external file set up to handle the second tab box.

I don't have the time to look at it closely tonight, but if it's still happening tomorrow I'll try to find a few minutes to take a closer look to see what jumps out at me.

#5 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 26 February 2009 - 05:04 AM

Thanks Randy

I think I know what you mean.

To show or hide the tabs, the code is...

CODE
<div id="Welcome" class="hide">

CODE
<div id="Tuesday" class="show">


I think my problem is although the "Welcome" is different, the class="hide" is the same in both tab boxes.

Im I correct I should rename the class in the second tab box somthing like this...

CODE
<div id="Welcome1" class="hide1">

CODE
<div id="Tuesday1" class="show1">


...to avoid conflicts?


#6 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 03 March 2009 - 05:27 AM

My write up and code on a simple tabbed page

#7 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 03 March 2009 - 06:34 AM

Hi Chris

Thanks for the input.

My problem is having 2 tab-boxes on the same page with different sizes and format.

As I understand it, the first box on the page calls up the javascript, then the second box calls the javascript disabling the first.

I cant seem to work out a way to get them both working.

Example here...





#8 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 03 March 2009 - 07:09 AM

ID and Name attributes cannot start with a numeric and cannot contain spaces.

#9 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 03 March 2009 - 09:23 AM

Chris

In your fine "Simple Tabbed Page" example, there would be a conflict if you put two tab boxes on the same page.

The JS would not cope. My guess, if there where 2 tab boxes, the one lower in the page would work and the top one not.

That is my problem. I am trying to incorporate two tab boxes on the same page but I dont know how to code the JS to drive each tab box separately.

Added: Sometimes with code, the correct terminology escapes me. So please be patient. whistling.gif

#10 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 03 March 2009 - 12:11 PM

QUOTE
, there would be a conflict if you put two tab boxes on the same page.
Yep, that would be the case whenever you duplicate anything you are going to manipulate useing DOM scripting.

You need to make sure that each tab box is different while still needing one set of functions do the work.

gimme 30 - 40 mins to mod some code smile.gif

#11 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 03 March 2009 - 01:04 PM

Ok nearly 50 mins but I had a couple of phone calls smile.gif

http://www.modtalk.c...iple-tab-boxes/



#12 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 03 March 2009 - 01:11 PM

What a Legend! mf_type.gif

I suppose its a bit much to ask for the nice clean markup. hysterical.gif

#13 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 03 March 2009 - 05:53 PM

Actually I'll do that the next bit of free time I have. smile.gif






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

We are now a read-only forum.
 
No new posts or registrations allowed.