Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 05-06-2008 18:21:23

celdirect
Member
From: UK
Registered: 04-01-2005
Posts: 782

tabber tab

Hi

Any one use tabbertab on their site?

http://www.barelyfitz.com/projects/tabber/

If no java is enabled it just displays all the content in a list - which is kind of ok - but can you get it to not display the tabbertab info at all.

It seems on their site you can but can not find the info on how to do it.

thanks

Offline

 

#2 05-06-2008 19:22:52

dh783
Member
From: Avondale, Arizona
Registered: 04-06-2005
Posts: 6233
Website

Re: tabber tab

I am using it on my site. I am not sure what you mean by not displaying at all?

John

Offline

 

#3 05-06-2008 19:57:17

celdirect
Member
From: UK
Registered: 04-01-2005
Posts: 782

Re: tabber tab

HI,

I mean that when a users browser has javascript disabled it normally displays the tabs as a list - I would like for it to not show any tabber info.

Offline

 

#4 05-06-2008 20:17:28

rachaelseven
Member
From: Massachusetts, USA
Registered: 01-23-2006
Posts: 3169
Website

Re: tabber tab

Hi Charlie,

I use tabbertab on my site and I think I can solve your problem with the disabled javascript.  There are a couple of ways to deal with this.  One way is to wrap the part that you don't want to show inside a <div> tag with the display parameter set to none (style="display:none;").  That will make that portion hidden.  Then, further down the page, put in a inline javascript that changes the visibility of the <div> to normal (just set it to "").  That way, if javascript is enabled, it will make the div visible.  But if javascript is disabled in the browser, the div will remain hidden.  I do a similar thing on my site with the tabbertab - I don't hide the whole thing, but I have an extra heading that I only want to show when javascript is enabled.  I use the technique I just described to reveal the heading using a javascript and it works fine.  The javascript I use to reveal the heading looks something like this:


Code:

<script type="text/javascript">
if (document.getElementById) {
  document.getElementById("div_id").style.display="";
} else if (document.all) {
  document.formname.div_name.style.display="";
} // End if
</script>

If javascript is disabled, the script won't run and the element remains hidden.  Not real fancy, but it gets the job done and should work cross-browser.  Good luck!


Rachael Katz
- Custom Focusing Screens for DSLR Cameras

Offline

 

#5 05-06-2008 20:49:39

celdirect
Member
From: UK
Registered: 04-01-2005
Posts: 782

Re: tabber tab

Thanks Rachael,

I see what you are saying - but still not sure where to put to code and how to use it.

Offline

 

#6 05-06-2008 21:51:57

rachaelseven
Member
From: Massachusetts, USA
Registered: 01-23-2006
Posts: 3169
Website

Re: tabber tab

It works for hiding anything really.  It would work like this:

Code:

<div name="hide_this" id="hide_this" style="display:none;">
...
...
All the stuff to be hidden in here
...
...
</div>

<script type="text/javascript">
if (document.getElementById) {
  document.getElementById("hide_this").style.display="";
} else if (document.all) {
  document.formname.hide_this.style.display="";
} // End if
</script>

When the page first loads, all the stuff inside the <div> tags is hidden by the display:none.  As the page continues to load, the javascript gets executed, changing the style and revealing the contents of the <div>.  If javascript is disabled, the script is ignored and the contents of the <div> remain hidden.  You can put the code right in the product description - <div> tags around the part you want hidden and the script down near the end somewhere.  That's all there is to it.


Rachael Katz
- Custom Focusing Screens for DSLR Cameras

Offline

 

#7 05-07-2008 07:27:41

celdirect
Member
From: UK
Registered: 04-01-2005
Posts: 782

Re: tabber tab

Thanks Rachael,

i understand it now and have it working - i was having a dumb moment last night. 

So this can be put round any content that you want to hide if javascript is disabled?

can you do any other cool tricks with this?

Offline

 

#8 05-07-2008 08:34:48

rachaelseven
Member
From: Massachusetts, USA
Registered: 01-23-2006
Posts: 3169
Website

Re: tabber tab

You're welcome, Charlie.  Yup, you can put that around any old thing you want to hide (or show, for that matter... just reverse the use of display:none).  Another cool trick I do is to change the actual content depending on whether or not there is javascript.  That I do with a <span> tag around the content in question and a similar javascript.  The javascript to do that is:

Code:

<script type="text/javascript">

var newContent = "HTML Content for JavaScript Users Here";

if (document.getElementById) {
  document.getElementById("span_id").innerHTML = newContent;
} else if (document.all) {
  document.span_name.innerHTML = newContent;
} // End if

</script>

Where that one comes in really handy is with form validation.  When you add a JavaScript to a form to validate the input, if the user doesn't have JS, they can't use the form.  So what you do is put the non-JS button code in the page, surrounded by the <span> tags.  Then, you have the script write in the button code with validation that you only want there if the user allows JS.  That way, you can have your form validation for 99% of users, but maintain functionality for that 1% that don't allow JS.  I believe I have a post on the board somewhere demonstrating that technique in relation to the ATS checkout validation mod... it will probably come up in a search.

If you want to get really crazy, you can even vary content by browser, although browser detection is a notoriously iffy proposition at best.  I'm sure there's other uses for related techniques, but those are the two that I have used a lot.


Rachael Katz
- Custom Focusing Screens for DSLR Cameras

Offline

 

Board footer