How to modify Tab Content Script?

[Wildfire563]

Hi,
I'm a relative newbie to scripting. I've been trying to use the Tab Content script, but would like to see a couple of changes.

First of all, it appears that the tabs are always left aligned. Is there any way to center align them to the page or table cell and to each other if there are mulitple lines of tabs (e.g. if the page is resized to a width thinner than the length of the line of tabs, when they reposition to a second line, the second line should be centered on the first, and should not overlap the first line)?

Second, Is there any way to have multiple lines within a tab? IOW if the tab were to be:
Community Outreach Programs

I would like it to appear, in a single tab, as:
Community Outreach
Programs

Where "Programs" is centered under "Community Outreach"

Finally, in the beginning of the script in the header, in the CSS style section, there is a section that says:

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

What are the possible "list-style" options? and what are the options for display?
Thanks,

Thomas Perry

[Wildfire563]

http://www.dynamicdrive.com/dynamici...tabcontent.htm
Tab content script

Sorry, I didn't include the link to the script

I'd like to ask the question again:

How do you control the height of the tabs with regards to how they wrap around when the page they are on becomes too skinny. Currently, in my page, when they wrap around, they overlap each other, and it also splits tabs in two at the wrap point. Shouldn't the tabs be kept whole?

Thanks,

Thomas

[Wildfire563]

For at least IE6, I was able to solve two of my problems. I added a "height" attribute to two of the #tablist entries in the initial <style> section:

<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: .1em;
font: bold 12px Arial Black;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
height: 30px;
}

#tablist li a{
padding: 3px .5em;
margin-left: 3px;
border: 1px solid #778;
background: white;
height: 24px;
}

This stopped the tabs from overlapping each other when the page became skinnier than the length of the tabs, and it also appears to have forced IE to keep the each of the tabs together when it moves the tab to the next line. Before I added the height attributes, it would split the tabs in two at spaces in the textname as it moved the tabs to the next line.

For instance if a page had the tabs:

[1st Tab Name] [2nd Tab Name]

as the page got skinnier, the tab would become:

[1st Tab Name] [2nd]
[Tab Name]

Now it properly becomes:
[1st Tab Name]
[2nd Tab Name]

Don't know why, in fact, I came across the fix by accident, I wasn't even sure if there was a "height" attribute, I just guessed.

Thank you for providing all these scripts, it is really helping me learn javascript.

Thomas

[jscheuer1]

If you are implying that you tested your solution in FF or NS and it didn't work as well, Mozilla doesn't adhere to the height property as often as IE, rather relying on the content height in many cases. Sometimes additional padding can overcome this, other times a small transparent .gif is useful. This is not something I am completely familiar with, there are probably other workarounds. On to tab names getting split on spaces when they wrap, one cross browser solution is to substitute the '&nbsp;' named entity for the space ' '.

[Wildfire563]

No, I hadn't tested this, and I was wondering about if it worked in other browsers. Thank you for the feedback, that is what I was looking for, along with sharing the fix I had found.

When I tried adding padding to the entries that were there, it didn't seem to have any affect in IE6. I don't really understand how the style is working, however, as I said, I was just guessing using what I had in the script.

In your comment about the gif, are you suggesting that I use images instead of the text? I hadn't thought of that.

Thomas

[jscheuer1]

If the height of a containing element is already set and padding of the contained content doesn't push the size of the content beyond the height, it should have no effect except in a browser that isn't using the height property. Conversely, padding is sometimes ignored in IE. What don't you understand about 'how the style is working'? Basically style is just formatting instructions, it only gets tricky because certain browsers have quirks in the way they interpret it and because, until one is familiar with its use, even the basic rules respected by all browsers can seem arcane.

Images instead of text - only as a last resort - generally, text parses faster. A small (1x1 or 1x2, actual size) transparent .gif can be used to get browsers that would otherwise ignore a height declaration to respect it, especially in tables, when used with an image tag and given dimension attributes of one's choosing. There almost always is another way though.

[Wildfire563]

I don't understand what each of the three sections of the style regarding the parsing of the li entries are doing. I don't understand how the script accesses the style or how the style is setup. I'm starting to, but I don't have a full understanding yet.

I really need to study CSS and javascript language more. I find it a lot easier to learn by doing something that is important to me, so that's what I'm doing. I have a lot of Fortran experience, I'm fluent in basic HTML, but no experience with this CSS stuff, have a smidgen of C (kind of like my French, I can kind of read it, but can't write or speak it), and no java. I'm using this new web page (www.flyingscool.com) I am creating to help me get into it more. It's getting there...

Thanks for the help,

Thomas

[jscheuer1]

Using IE & FF at 1024x768 resolution, I'm looking at:

http://www.flyingscool.com/FC_StartJava.html

In IE your ISP's floating ad obscures part of the left hand list item menu.
In FF the background doesn't show.

Overall the page looks pretty good considering you are just learning.

You don't need this:

<script language="JavaScript1.2">

/*
Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/

if (document.all||document.getElementById)
document.body.style.background="url('Background2.gif') white topleft no-repeat fixed"

</script>

Instead, add it to the style section and, since you already have two style sections, the second of which has some unused properties, combine them and add the body background declaration (with comments to help you see what the list menu is being told):

<style>
body {
background:blue url('Background2.gif') no-repeat fixed top left;
}
A:hover {
color:#FF0000;
font-weight:bold
}
#foldheader {     /*governs elements with id="foldheader"*/
cursor:pointer; /*use link style cursor, most browsers*/
cursor:hand;    /*use link style cursor, some older browsers*/
font-weight:bold; /*use bold font*/
list-style-type:none; /*use no left hand margin marker (like a square, a disc, or an image) for list items with this id*/
}
#foldinglist {     /*governs elements with id="foldinglist"*/
list-style-type:none; /*use no marker (like above) for list items with this id*/
}
</style>

[Wildfire563]

Floating Ad? Do you mean the counter I added? I've moved it to the right for now, though I like it better on the left.

Is there another ad? I don't see any from my system, and there shouldn't be any other ads that I am aware of.

That black outline is only temporary, I'm using it only to show how the window might look with rounded corners, and to help me with placement till I get the window right.

Thanks for the tip. I assume you meant I should replace the first two styles with the one that you wrote?
Just wondering, why put the background in the header? I assume just to clean up so it is easier to read.

Thanks for the comments,

Thomas

[jscheuer1]

That's the 'ad' I was talking about, it goes much better on the right. You still have a problem with your style. Though I am flattered with the credit, a CSS comment looks like this:

/* Code by John Scheuer 062705 */

IE doesn't seem to mind but, Firefox does. Changing to the above type comment will allow your style to work in Mozilla based browsers.