• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net

Javascript toggle different pages

TehGuy

Active Member
Looks like they are using JQuery's UI tabs. If you don't know, JQuery is a JavaScript framework that simplies JavaScript, gives tons of utility to selecting and manipulating objects, and solves a lot of cross-browser compatibility issues. It also comes with some UI components, tabs being one of the nicer ones.

Here's JQuery's demo.
And here's another tutorial that's a little more involved, but shows you how to customize the look of the tabs along with using AJAX to get content for the tabs. This tutorial is maybe a little more straightforward, since JQuery's is really just explaining how it works.
 

FeediaCo

Active Member
Looks like they are using JQuery's UI tabs. If you don't know, JQuery is a JavaScript framework that simplies JavaScript, gives tons of utility to selecting and manipulating objects, and solves a lot of cross-browser compatibility issues. It also comes with some UI components, tabs being one of the nicer ones.

Here's JQuery's demo.
And here's another tutorial that's a little more involved, but shows you how to customize the look of the tabs along with using AJAX to get content for the tabs. This tutorial is maybe a little more straightforward, since JQuery's is really just explaining how it works.
Okay I ended up getting a script that works and was easy to customize however if you don't mind taking a look at the link http://aeroservers.net/host.php I really wish I could change the color of the tabs to go with along with my website colors. if you need me to I can show you the script currently how its working using the php code tags here. If not just view source the page if it gives you sufficient data to help me.
Thanks,
John
 

TehGuy

Active Member
You need to change the styling on "ajaxtabs/ajaxtabs.css".

The important chunk is here:

Code:
.indentmenu ul li a{
float: left;
color: black; /*text color*/
padding: 3px 11px;
text-decoration: none;
border-right: 1px solid darkred; /*darkred divider between menu items*/
}

.indentmenu ul li a:visited{
color: black;
}

.indentmenu ul li a.selected{
color: black !important;
padding-top: 4px; /*shift text down 1px*/
padding-bottom: 2px;
background: black url(indentbg2.gif) center center repeat-x;
}
You'll want to leave just about all of that alone still. The you can change or add all the background, text, and color properties you want, but I wouldn't mess with anything else, like padding or float. You can maybe experiment with padding and see what it does, but changing float will change the look completely.

In case you know nothing about CSS, I'd suggest you check out this video from Google. It will give you a rough enough idea to understand what you're doing.
[video=youtube;wgvPrzjDfmw]http://www.youtube.com/watch?v=wgvPrzjDfmw[/video]
This site from Mozilla is also very handy for learning CSS (or JavaScript).

If you already have an understanding of CSS, here's what's safe (green) to change and what's not (red).:

Code:
.indentmenu ul li a{
[COLOR="red"]float: left;[/COLOR]
[COLOR="green"]color: black;[/COLOR] /*text color*/
padding: 3px 11px;
[COLOR="green"]text-decoration: none;[/COLOR]
[COLOR="green"]border-right: 1px solid darkred;[/COLOR] /*darkred divider between menu items*/
}

.indentmenu ul li a:visited{
[COLOR="green"]color: black;[/COLOR]
}

.indentmenu ul li a.selected{
[COLOR="green"]color: black !important;[/COLOR]
padding-top: 4px; /*shift text down 1px*/
padding-bottom: 2px;
[COLOR="olive"]background: black url(indentbg2.gif) center center repeat-x;[/COLOR]
}
You can add other properties, too, like font-size, font-variant, background-color, etc.

If this was all gibberish to you, give me a list of background-colors, text colors, or background images and I'll see if I can fix it up for you.
 
Top