...

View Full Version : JavaScript & CSS...



Hindsight
08-05-2008, 01:25 PM
Ok...long story short: I'm using Note Pad on my computer to try to write a "text/css" webpage for my step mother and what she wants is very complicated. I looked into it and I believe I will have to use Java for it.

What I'm looking for:
This is just an example...

divBox1 is a navigation box (links for "home", "about me", blah blah blah...)
divBox2 is where the information appears when I click a link (click "Home"; previous text is taken out and new text is put in)

I think it would just be easier to give you my code...


<html>
<head>

<style type="text/css">
body {
background-color: 326632;
background-image: url(xxxxxx);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

h1 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: FFFFFF;
width: 196px;
line-height: 30px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
border: 1px solid black;
}
h2 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 20px;
color: FFFFFF;
width: 320px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: left;
text-decoration: none;
border: 1px solid black;
padding: 0px 2px 0px 2px;
}
h3 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 12px;
color: FFFFFF;
line-height: 14px;
background-color: transparent;
margin: 2px 0px 2px 0px;
display: block;
text-align: justify;
text-decoration: none;
border: none;
padding: 0px 2px 0px 2px;
}

a.con:link, a.con:active, a.con:visited {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: 000000;
width: 196px;
line-height: 30px;
background-color: C1FFC1;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}
a.con:hover {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: ffffff;
width: 196px;
line-height: 30px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}

.header {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
position: absolute;
left: 50%;
margin-left: -375px;
top: 50px
height: 200px;
width: 354px;
border: 4px outset;
overflow: auto;
z-index: 3;
}

.navigation {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 350px;
width: 200px;
position: absolute;
left: 50%;
margin-left: -375px;
top: 100px;
border: 4px outset;
overflow: auto;
z-index: 3;
}

.body {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 350px;
width: 330px;
position: absolute;
left: 50%;
margin-left: -165px;
top: 100px;
border: 4px outset;
overflow: auto;
z-index: 3;
Texat-align: justify;
}

</style>
</head>

<body>
<div class="header"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnNwaHlueGNhdHouY29tL1dob1dlQXJlLmh0bQ==" target="_blank"><img src="http://i49.photobucket.com/albums/f283/DanOinAZ89/sphynx2.jpg"></a>
</div>

<div class="navigation"><center><h1>Navigation</h1><br>
<a href="" class="con">Home</a>
<a href="" class="con">General Info</a>
<a href="" class="con">General Care</a>
<a href="" class="con">Who We Are</a>
<a href="" class="con">The Parents</a>
<a href="" class="con">Available Babies</a>
<a href="" class="con">Terms of Adoption</a>
<a href="" class="con">Photo Gallery</a>
<a href="" class="con"></a>
</center>
</div>

<div class="body"><center><h2>Home</h2></center>
<h3>Info will go here!!</h3>
</div>

</body>
</html>

Basically, all she wants is when a link in the "navigation div" is clicked, the information in the "body div" will be changed.
I've looked over so many sites and I got so confused...I tried using array...but I'm pretty sure you need so many other things.

Can anyone help?!
(USING MOZILLA)

rangana
08-05-2008, 02:05 PM
From the snippet of markup you've provided, try to have this script:


<script type="text/javascript">
window.onload=function(){
for(var i=0,lnk=document.getElementsByTagName('a');i<lnk.length;i++)
{
if(lnk[i].className=='con')
{
lnk[i].onclick=function(){
for(var i=0,title=document.getElementsByTagName('div');i<title.length;i++)
{
if(title[i].className=='body')
{
title[i].getElementsByTagName('h2')[0].innerHTML=this.innerHTML;
title[i].getElementsByTagName('h3')[0].innerHTML='Info for <span style="color:#fff;"> '+this.innerHTML+'</span> goes here.';
}
}
return false;
}
}
}
}
</script>


There are yet a lot of ways to do this. One thing is that you could set each link to show a certain div when clicked. Hopefully, the code above keeps you going.

Millenia
08-05-2008, 02:09 PM
Don't you mean Javascript?
Java and Javascript are completely different things...
Aswell as being achieved with Javascript, you could also use iFrames.

These might be of use:
http://www.dynamicdrive.com/dynamicindex17/index.html

Kor
08-05-2008, 02:17 PM
I'm using Note Pad on my computer to try to write a "text/css" webpage for my step mother and what she wants is very complicated.

Notepad or whichever, it does not matter.


I looked into it and I believe I will have to use Java for it.

You mean Javascript. Java and Javascript are quite different languages.


(USING MOZILLA)
Your document should be seen by all the browsers, not Mozilla only, because it is not you with your browser the only one who must see the web page.

Note: Your document needs a DOCTYPE :
http://www.w3.org/QA/Tips/Doctype
For your document, an HTML doctype would be enough.

Hindsight
08-05-2008, 02:26 PM
@Rangana::
--This...is quite confusing. Sorry I'm a total noob when it comes to this...

@Millenia::
--Yes, sorry Javascript is what I meant (*shines nooby bald spot*)
--I Can't seem to access that website...not compatible with mozilla?

@Kor::
--Notepad...yes...
--I am planning on adding in the IE elements later if I get this to work.

Hindsight
08-05-2008, 03:13 PM
Millenia...
I <3 you big time!
Thanks a lot. That website helped out a ton!

Kor
08-05-2008, 03:16 PM
--I am planning on adding in the IE elements later if I get this to work.
Most of the time there are no "IE elements". When you start working for a web site, you start with all the browsers in mind and use, whenever is possible, common syntax. Luckily, most of the time if you work in standard manner, everything will be crossbrowser. There are only some special cases when you should use crossbrowser techniques (sometimes in javascript and sometimes in CSS). That is all. Good luck :thumbsup:

Hindsight
08-05-2008, 03:47 PM
Thanks Kor...
*Still confused* lol

I ran into a snag in the code I got from dynamic drive.

as you see in my above code, I have the "body div" set to overflow.
I'm using this to display everything when I actually click navigation button:

<div class="body"><div id="Parents"><center><h2>The Parents</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>

Problem is, when I fill up the div and the overflow kicks in, I can't scroll!!
Any way to fix this?

EDIT::
I can in IE, but not in Mozilla...

Kor
08-05-2008, 04:11 PM
Problem is, when I fill up the div and the overflow kicks in, I can't scroll!!
Any way to fix this?

EDIT::
I can in IE, but not in Mozilla...
As I said: as long as you code in standard and correct way, things should be crossbrowser:


.body {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 350px;
width: 330px;
position: absolute;
left: 50&#37;;
margin-left: -165px;
top: 100px;
border: 4px outset;
overflow-x: hidden;
overflow-y: auto;
z-index: 3;
text-align: justify;
padding:0 18px 0 0;
}

Millenia
08-05-2008, 04:55 PM
Millenia...
I <3 you big time!
Thanks a lot. That website helped out a ton!

<3 :)

Hindsight
08-05-2008, 05:00 PM
Er...Kor that didn't work...Do I need to change all my divs to that? I guess I will just because.
Also, I added in the doctype..I'm not sure if it's right though?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Finally, in Mozilla, when I reload, it won't finish.

And is there a tutorial for proper scripting?

ninnypants
08-05-2008, 05:00 PM
If you're still using notepad try downloading Notepad++ or pspad they will be easier to use than just notepad and they are free to download.

Hindsight
08-06-2008, 02:01 AM
Thanks Ninny!
That's really helpful!

Hindsight
08-06-2008, 08:14 AM
Ok...
I'm still having trouble getting the contents to scroll in both Mozilla AND Safari (Apple made me download it for my iTouch!! >:E)

I've tried doing everything...

And I'm still confused as to what I should do for that validation form...does it mean I need to purchase something?

*Polishes large, unsightly noobness*
Current Coding: (Yes, missing a validation because I'm confused on those)

<html>
<head>
<script type="text/javascript" src="http://h1.ripway.com/paradox89/jquery-1.2.2.pack.js">
</script>
<script type="text/javascript" src="http://h1.ripway.com/paradox89/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('Home', 'fade=1,hide=0,group=boxes')
animatedcollapse.addDiv('ABabies', 'fade=1,hide=1,group=boxes')
animatedcollapse.addDiv('TOA', 'fade=1,hide=1,group=boxes')
animatedcollapse.addDiv('GInfo', 'fade=1,hide=1,group=boxes')
animatedcollapse.addDiv('GCare', 'fade=1,hide-1,group=boxes')
animatedcollapse.addDiv('Parents', 'fade=1,hide-1,group=boxes')
animatedcollapse.addDiv('Photo', 'fade=1,hide-1,group=boxes')
animatedcollapse.addDiv('Us', 'fade=1,hide-1,group=boxes')
animatedcollapse.addDiv('SeeUs', 'fade=1,hide-1,group=boxes')
animatedcollapse.init()
</script>

<style type="text/css">
body {
background-color: 326632;
background-image: url(xxxxxx);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
h1 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 20px;
color: FFFFFF;
width: 196px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
border: 1px solid black;
}
h2 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 20px;
color: FFFFFF;
width: 305px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: left;
text-decoration: none;
border: 1px solid black;
padding: 0px 2px 0px 2px;
}
h3 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 14px;
color: FFFFFF;
line-height: 16px;
background-color: transparent;
margin: 2px 0px 2px 0px;
display: block;
text-align: justify;
text-decoration: none;
border: none;
padding: 0px 2px 0px 2px;
}
h4 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 35px;
color: FFFFFF;
width: 350px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: none;
text-decoration: underline;
letter-spacing: 1pt;
border: 1px solid black;
}
a.con:link, a.con:active, a.con:visited {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: 000000;
width: 196px;
line-height: 30px;
background-color: C1FFC1;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}
a.con:hover {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: ffffff;
width: 196px;
line-height: 30px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}
.topbox {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
position: absolute;
left: 50&#37;;
margin-left: -375px;
top: 10px;
height: 80px;
width: 765px;
border: 4px outset;
overflow-x: hidden;
overflow-y: auto;
z-index: 5;
}
.navigation {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 450px;
width: 200px;
position: absolute;
left: 50%;
margin-left: -375px;
top: 100px;
border: 4px outset;
overflow: auto;
z-index: 3;
}
.body {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
overflow: auto;
height: 450px;
width: 330px;
position: absolute;
left: 50%;
margin-left: -165px;
top: 100px;
border: 4px outset;
z-index: 3;
}
.rightbar {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 450px;
width: 215px;
position: absolute;
left: 50%;
margin-left: 175px;
top: 100px;
border: 4px outset;
overflow: auto;
z-index: 3;
}
.copyright {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 40px;
width: 765px;
position: absolute;
left: 50%;
margin-left: -375px;
top: 560px;
border: 4px outset;
overflow: auto;
z-index: 9;
}
</style>
</head>
<body>

<div class="topbox">
<center><h4>FreeRangeSphynx</h4></center>
</div>
<div class="navigation"><center><h1>Navigation</h1><br>
<a href="javascript:animatedcollapse.toggle('Home')" class="con">Home</a>
<a href="javascript:animatedcollapse.toggle('ABabies')" class="con">Available Babies</a>
<a href="javascript:animatedcollapse.toggle('TOA')" class="con">Terms of Adoption</a>
<a href="javascript:animatedcollapse.toggle('GInfo')" class="con">General Info.</a>
<a href="javascript:animatedcollapse.toggle('GCare')" class="con">General Care</a>
<a href="javascript:animatedcollapse.toggle('Parents')" class="con">The Parents</a>
<a href="javascript:animatedcollapse.toggle('Photo')" class="con">Photo Gallery</a>
<a href="javascript:animatedcollapse.toggle('Us')" class="con">About Us</a>
<a href="javascript:animatedcollapse.toggle('SeeUs')" class="con">Contact Us</a>
</center>
</div>
<div class="body"><div id="Home"><center><h2>Home</h2></center>
<h3></h3><br>
</div></div>
<div class="body"><div id="ABabies"><center><h2>Available Babies</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div id="TOA"><center><h2>Terms of Adoption</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div id="GInfo"><center><h2>General Information</h2></center>
<h3>Here are some details that you may have read about already...but in case you haven't, take a moment to learn about the amazing breed called Sphynx:<br><br>
<u>Personality:</u><br>
The Sphynx cat is possibility one of the most affectionate, sociable and intelligent cats in the world. They are almost like adoring dogs, "In your face" 24/7 and very much "people cats". They will greet you, curl up in your lap, or sleep right next to you. You may have no say in the matter. Very vocal, almost to the point where you find yourselves having a two way conversation, with changes in pitch and intensity. Sphynx are companion pets, and prefer not to be alone. Sphynx easily learn to play fetch and love to play. Small stuffed animals or anything with catnip works great. They love children and other animals, and make a wonderful addition to any family. The Sphynx is very outgoing, and can at times be very childlike in personality. I have one that I call my eternal 2-year-old...always taking my pen and running away.<br><br>
<u>Characteristics:</u><br>
Despite what you may have heard, the Sphynx is not a totally naked cat. Their body is covered with a soft fuzz, which is almost invisible to the eye and imperceptible to touch. I relate it much like that of a warm peach or a chamois cloth. It's important to remember that Sphynx have hair in their genetic make up. Typically, they have some fine hair over the bridge of their nose and on their feet. Also some fine hair can be found on their tails and back of the ears and scrotum of the males. Degree of coat depends on several factors, e.g. climate, hormones, hereditary predispositions. For more information on pedigree, visit <a href="http://www.tica.org" target="_blank">www.tica.org</a>. Sphynx bodies are warmer to the touch than other cats, typically around 101 to 102 degrees. Sphynx are very clever and they will pop under a blanket when it is getting cold, or find a warm human body or dog or cat to curl up with. A favorite spot of mine is on top of a computer monitor. (Obviously not a flatscreen!)<br>
Kittens are very wrinkly, as they develop they grow into their skin, maintaining some of the wrinkles, especially on the head. Wrinkles are part of the cats charm, as you can see when they're skeptical by their wrinkles on their forehead!
Sphynx are indoor cats as they WILL sunburn, and have little protection should they come across other neighborhood cats. Sphynx can go out under supervision and weather permitting, ideally on a harness or in a enclosed safe garden or a purpose built run. Males are generally 25% larger then the females, and the Sphynx comes in all colors and patterns.</h3><br>
</div></div>
<div class="body"><div id="GCare"><center><h2>General Care</h2></center>
<h3><u>Bathing:</u><br>
As the sphynx is naked, they require a bath from time to time. It's important that you allow your sphynx to balance their oils naturally. Wash them when they need it, rather than on a schedule. This will avoid drying out their skin, or over-production of oils. Some sphynx get a lot dirtier than others. Bathing can be easy if you are well prepared. I personally recommend baby shampoo, as it's gentle. Be as cautious as you would be if you were bathing an infant. Your experience will vary as each cat is unique!<br><br>
<u>Ears:</u><br>
These are usual huge, so cleaning on a regular basis is recommended. Because there is a lack of hair around their ears, Sphynx get dark gunk in their ears. Some vets think this is a sign of earmites. Beware, a vet that isn't familiar with the wax found in a Sphynx ear is a vet that you shouldn't be going to. Never put Q-tips in your cats ear. I use my fingertip covered by soft tissue. This will leave some wax still visible. Remember that wax is a natural protection for your cats ear.<br><br>
<u>Eyes & Nose:</u><br>
Due to the lack of eyelashes, dirt can gunk up in the corner of your cats eye. Simply wipe gently with a damp cloth. Do not use baby wipes. If they get a little dirt around their nostrils, do the same. Starting young will make them comfortable with their grooming. (It's a great bonding experience also. You will become part of their litter...providing the services that a mother would.)<br><br>
<u>Paws & Claws:</u><br>
The paw of the Sphynx stands high like that of a hound with a extra thick pad. Again due to the lack of fur, paws get a little dirtier, at least more visibly than a hairy cat. You can clean their toes by gently pressing on them to make the claws stick out. You will then be able to rub a cloth and remove the build up that attaches it self to the claw. The claws need also to be clipped from time to time. Again press the paw and clip off the tip. Notice from the image below that the pink tissue ( the quick) on the inside of the claw. Don't cut this! It would be painful and cause bleeding (just like when we humans do it to ourselves!) Remove the sharp tip below the quick (away form the toe) Clipping half way between the end of the quick and the tip of the claw. If you feel you are unable to do this, your Vet will be happy to clip claws for you. I'll also be happy to teach you this at the time of adoption.<br><br>
<u>Feeding:</u><br>
Because of the lack of hair their body has to work harder to keep warm. Sphynx have a high metabolism, which in turn will result in eating more often than hairy cats. Sphynx are not normally fussy eaters and as long as it is good quality food, you will have a happy contented cat.<br><br>
<u>Litter Tray:</u><br>
Starting at three weeks, your Sphynx will have been litter trained. Just like hairy cat, they like to keep themselves clean. There is a wide range of litters for sale and individual owners can choose which type suits their cat and how they deal with disposing of it. Litter trays come in all shape and sizes. I find that my Sphynx prefer hooded boxes, as it allows them a bit of privacy during this vulnerable time. If you keep the litter box clean, your cat should never potty outside of it. I contribute this to their higher-than-normal intelligence.</h3><br>
</div></div>
<div class="body"><div id="Parents"><center><h2>The Parents</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div id="Photo"><center><h2>Photo Gallery</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div id="Us"><center><h2>About the Breeders</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div id="SeeUs"><center><h2>Contact Us</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="rightbar"><center><h1>Random Stuffies</h1></center>
<h3>
</div>
<div class="copyright"><h3>Copyright FreeRangeSphynx<br>
Surprise, Arizona 2008</h3></div>
</body>
</html>

Kor
08-06-2008, 09:53 AM
You don't need JQuery. You may solve the problem in simple plain javascript 7 (seven :rolleyes: ) code lines.
Here you are:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body {
background-color: #326632;
background-image: url(xxxxxx);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
h1 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 20px;
color: FFFFFF;
width: 196px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
border: 1px solid black;
}
h2 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 20px;
color: FFFFFF;
width: 305px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: left;
text-decoration: none;
border: 1px solid black;
padding: 0px 2px 0px 2px;
}
h3 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 14px;
color: FFFFFF;
line-height: 16px;
background-color: transparent;
margin: 2px 0px 2px 0px;
display: block;
text-align: justify;
text-decoration: none;
border: none;
padding: 0px 2px 0px 2px;
}
h4 {
font-family: century gothic, arial;
font-weight: bold;
font-size: 35px;
color: FFFFFF;
width: 350px;
line-height: 50px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: none;
text-decoration: underline;
letter-spacing: 1pt;
border: 1px solid black;
}
a.con:link, a.con:active, a.con:visited {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: 000000;
width: 196px;
line-height: 30px;
background-color: C1FFC1;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}
a.con:hover {
font-family: century gothic, arial;
font-weight: bold;
font-size: 16px;
color: ffffff;
width: 196px;
line-height: 30px;
background-color: 2B6387;
margin: 2px 0px 2px 0px;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
}
.topbox {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
position: absolute;
left: 50%;
margin-left: -375px;
top: 10px;
height: 80px;
width: 765px;
border: 4px outset;
overflow-x: hidden;
overflow-y: auto;

}
.navigation {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 450px;
width: 200px;
position: absolute;
left: 50%;
margin-left: -375px;
top: 100px;
border: 4px outset;
overflow: auto;

}
.body {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
overflow: auto;
height: 450px;
width: 330px;
position: absolute;
left: 50%;
margin-left: -165px;
top: 100px;
border: 4px outset;
display:none;

}
.rightbar {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 450px;
width: 215px;
position: absolute;
left: 50%;
margin-left: 175px;
top: 100px;
border: 4px outset;
overflow: auto;
z-index: 3;
}
.copyright {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
height: 40px;
width: 765px;
position: absolute;
left: 50%;
margin-left: -375px;
top: 560px;
border: 4px outset;
overflow: auto;
}
</style>
<script type="text/javascript">
function switchDiv(thisA){
var allA=thisA.parentNode.getElementsByTagName('a'), allD=[], a;
var divs=document.getElementById('container').getElementsByTagName('div'), i=0, d;
while(d=divs[i++]){d.className=='body'?allD[allD.length]=d:null}
i=0;
while(a=allA[i++]){allD[i-1].style.display=thisA==a?'block':'none'}
}
</script>
</head>
<body>
<div class="topbox">
<center><h4>FreeRangeSphynx</h4></center>
</div>
<div class="navigation"><center><h1>Navigation</h1><br>
<a href="#" onclick="switchDiv(this);return false" class="con">Home</a>
<a href="#" onclick="switchDiv(this);return false" class="con">Available Babies</a>
<a href="#" onclick="switchDiv(this);return false" class="con">Terms of Adoption</a>
<a href="#" onclick="switchDiv(this);return false" class="con">General Info.</a>
<a href="#" onclick="switchDiv(this);return false" class="con">General Care</a>
<a href="#" onclick="switchDiv(this);return false" class="con">The Parents</a>
<a href="#" onclick="switchDiv(this);return false" class="con">Photo Gallery</a>
<a href="#" onclick="switchDiv(this);return false" class="con">About Us</a>
<a href="#" onclick="switchDiv(this);return false" class="con">Contact Us</a>
</center>
</div>
<div id="container">
<div class="body" style="display:block"><div><center><h2>Home</h2></center>
<h3></h3><br>
</div></div>
<div class="body"><div><center><h2>Available Babies</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div><center><h2>Terms of Adoption</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div><center><h2>General Information</h2></center>
<h3>Here are some details that you may have read about already...but in case you haven't, take a moment to learn about the amazing breed called Sphynx:<br><br>
<u>Personality:</u><br>
The Sphynx cat is possibility one of the most affectionate, sociable and intelligent cats in the world. They are almost like adoring dogs, "In your face" 24/7 and very much "people cats". They will greet you, curl up in your lap, or sleep right next to you. You may have no say in the matter. Very vocal, almost to the point where you find yourselves having a two way conversation, with changes in pitch and intensity. Sphynx are companion pets, and prefer not to be alone. Sphynx easily learn to play fetch and love to play. Small stuffed animals or anything with catnip works great. They love children and other animals, and make a wonderful addition to any family. The Sphynx is very outgoing, and can at times be very childlike in personality. I have one that I call my eternal 2-year-old...always taking my pen and running away.<br><br>
<u>Characteristics:</u><br>
Despite what you may have heard, the Sphynx is not a totally naked cat. Their body is covered with a soft fuzz, which is almost invisible to the eye and imperceptible to touch. I relate it much like that of a warm peach or a chamois cloth. It's important to remember that Sphynx have hair in their genetic make up. Typically, they have some fine hair over the bridge of their nose and on their feet. Also some fine hair can be found on their tails and back of the ears and scrotum of the males. Degree of coat depends on several factors, e.g. climate, hormones, hereditary predispositions. For more information on pedigree, visit <a href="http://www.tica.org" target="_blank">www.tica.org</a>. Sphynx bodies are warmer to the touch than other cats, typically around 101 to 102 degrees. Sphynx are very clever and they will pop under a blanket when it is getting cold, or find a warm human body or dog or cat to curl up with. A favorite spot of mine is on top of a computer monitor. (Obviously not a flatscreen!)<br>
Kittens are very wrinkly, as they develop they grow into their skin, maintaining some of the wrinkles, especially on the head. Wrinkles are part of the cats charm, as you can see when they're skeptical by their wrinkles on their forehead!
Sphynx are indoor cats as they WILL sunburn, and have little protection should they come across other neighborhood cats. Sphynx can go out under supervision and weather permitting, ideally on a harness or in a enclosed safe garden or a purpose built run. Males are generally 25% larger then the females, and the Sphynx comes in all colors and patterns.</h3><br>
</div></div>
<div class="body"><div><center><h2>General Care</h2></center>
<h3><u>Bathing:</u><br>
As the sphynx is naked, they require a bath from time to time. It's important that you allow your sphynx to balance their oils naturally. Wash them when they need it, rather than on a schedule. This will avoid drying out their skin, or over-production of oils. Some sphynx get a lot dirtier than others. Bathing can be easy if you are well prepared. I personally recommend baby shampoo, as it's gentle. Be as cautious as you would be if you were bathing an infant. Your experience will vary as each cat is unique!<br><br>
<u>Ears:</u><br>
These are usual huge, so cleaning on a regular basis is recommended. Because there is a lack of hair around their ears, Sphynx get dark gunk in their ears. Some vets think this is a sign of earmites. Beware, a vet that isn't familiar with the wax found in a Sphynx ear is a vet that you shouldn't be going to. Never put Q-tips in your cats ear. I use my fingertip covered by soft tissue. This will leave some wax still visible. Remember that wax is a natural protection for your cats ear.<br><br>
<u>Eyes & Nose:</u><br>
Due to the lack of eyelashes, dirt can gunk up in the corner of your cats eye. Simply wipe gently with a damp cloth. Do not use baby wipes. If they get a little dirt around their nostrils, do the same. Starting young will make them comfortable with their grooming. (It's a great bonding experience also. You will become part of their litter...providing the services that a mother would.)<br><br>
<u>Paws & Claws:</u><br>
The paw of the Sphynx stands high like that of a hound with a extra thick pad. Again due to the lack of fur, paws get a little dirtier, at least more visibly than a hairy cat. You can clean their toes by gently pressing on them to make the claws stick out. You will then be able to rub a cloth and remove the build up that attaches it self to the claw. The claws need also to be clipped from time to time. Again press the paw and clip off the tip. Notice from the image below that the pink tissue ( the quick) on the inside of the claw. Don't cut this! It would be painful and cause bleeding (just like when we humans do it to ourselves!) Remove the sharp tip below the quick (away form the toe) Clipping half way between the end of the quick and the tip of the claw. If you feel you are unable to do this, your Vet will be happy to clip claws for you. I'll also be happy to teach you this at the time of adoption.<br><br>
<u>Feeding:</u><br>
Because of the lack of hair their body has to work harder to keep warm. Sphynx have a high metabolism, which in turn will result in eating more often than hairy cats. Sphynx are not normally fussy eaters and as long as it is good quality food, you will have a happy contented cat.<br><br>
<u>Litter Tray:</u><br>
Starting at three weeks, your Sphynx will have been litter trained. Just like hairy cat, they like to keep themselves clean. There is a wide range of litters for sale and individual owners can choose which type suits their cat and how they deal with disposing of it. Litter trays come in all shape and sizes. I find that my Sphynx prefer hooded boxes, as it allows them a bit of privacy during this vulnerable time. If you keep the litter box clean, your cat should never potty outside of it. I contribute this to their higher-than-normal intelligence.</h3><br>
</div></div>
<div class="body"><div><center><h2>The Parents</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div><center><h2>Photo Gallery</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div><center><h2>About the Breeders</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="body"><div><center><h2>Contact Us</h2></center>
<h3>Info will go here!!</h3><br>
</div></div>
<div class="rightbar"><center><h1>Random Stuffies</h1></center>
<h3>
</div>
<div class="copyright"><h3>Copyright FreeRangeSphynx<br>
Surprise, Arizona 2008</h3></div>
</div>
</body>
</html>

===
Note that you must use a Doctype and content metatags

Hindsight
08-06-2008, 10:17 AM
Thank you again...
Unfortunately...that causes the color schemes in my h1, h2, h3 & h4 as well as my links using "con" to not work. I would much rather go with that simpler code, however, I don't want to forgo the page being aesthetically pleasing.

I'll keep tinkering with it.

Kor
08-06-2008, 11:40 AM
Thank you again...
Unfortunately...that causes the color schemes in my h1, h2, h3 & h4 as well as my links using "con" to not work. I would much rather go with that simpler code, however, I don't want to forgo the page being aesthetically pleasing.

I'll keep tinkering with it.
You must not prefer a wrong written code for aesthetic reasons. Presentation and functionality have nothing in common. Color schemes is to be solve using correctly CSS. You should learn CSS to improve that.

On the other hand, aesthetically your site looks awful anyway, sorry to say that. That green is a violent color and should be avoided or at least compensated with some warm intrusion (blue grays, orange grays, classical gray...), the outset border is rusty, the font is hard to be read (black/blue on green). The way you have centered the divs is also rusty (you should have simply used the auto CSS left/right margins)... and so on.

My solution has nothing to do with your graphics, you should understand that. It is a javascript solution for hiding/showing some div elements. The way your site looks like is an independent problem (CSS, HTML) not a javascript one.

Hindsight
08-06-2008, 12:28 PM
Heh...
Got it working...it was my html in the body section.
I was using
<div class="body"><div id="whatever>Stuff here</div></div>
I changed it to this
<div class="body" id="whatever">Stuff here</div>
Thanks to everyone who helped! ^^
And Kor...compared to what she has currently (click to see (http://www.sphynxcatz.com/))...it is functional, but I'm trying to help her make it better. And I never said I was done. I wanted to get this part out of the way before I decided to pursue this further.
Still, thanks a bunch for all the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum