Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript & CSS...

    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...

    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)
    Last edited by Hindsight; 08-05-2008 at 01:37 PM.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    From the snippet of markup you've provided, try to have this script:
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    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

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Hindsight View Post
    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.
    Quote Originally Posted by Hindsight View Post
    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.
    Quote Originally Posted by Hindsight View Post
    (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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @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.

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Millenia...
    I <3 you big time!
    Thanks a lot. That website helped out a ton!

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Hindsight View Post
    --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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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...

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Hindsight View Post

    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:
    Code:
    .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;
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by Hindsight View Post
    Millenia...
    I <3 you big time!
    Thanks a lot. That website helped out a ton!
    <3

  • #11
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Code:
    <!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?

  • #12
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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.

  • #13
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Ninny!
    That's really helpful!

  • #14
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Code:
    <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>
    Last edited by Hindsight; 08-06-2008 at 08:26 AM.

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You don't need JQuery. You may solve the problem in simple plain javascript 7 (seven ) code lines.
    Here you are:
    Code:
    <!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
    Last edited by Kor; 08-06-2008 at 10:02 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •