NAV: Button for changing element on page

I

itusvirus

New Member
Hi, I am new to HTML and CSS and I am currently following some tutorials on how to put together a site I designed in photoshop using HTML and CSS. All these tutorials cover the basic navigation pretty well. Make a button and link it to a url. Very straight forward. But when you click it, it takes you another page. My design requires a button that switches a visible item or in my case a simple piece of text on the page with another.

Is there anyone on this forum that can show me what the code looks like for a button like this or maybe point me in the right direction? Your help would be much appreciated.

Below is an image of the button and text I am talking about. Pressing the Contact button should reveal some contact info on the spot with the lorem ipsum. Pressing the About me button should bring back the lorem ipsum.


example by itusvirus, on Flickr
 
PixelPusher

PixelPusher

Super Moderator
Staff member
What you are trying to do is no too difficult. You will use javascript to hide/show content on the page. My suggestion would be to use jquery.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You will need to grab the minified jquery library before you can start using jquery commands/functions. Download it on the jquery website, choose the production version (smaller file size).

Getting started:
Insert two script tags in the head of your html page. Assuming you have a js directory in your main site root, here is an example:
HTML: 
<head>
...
<script src="/js/jquery.min.js" language="javascript"></script>
<script src="/js/startup.js" language="javascript"></script>
</head>

The first script tag includes the entire jquery javascript library. (also available remotely from "http://code.jquery.com/jquery-1.4.4.js")
The second I named startup (but you can name anything you want), this will have the document ready function. The doc ready function is the start to all jquery on a page. It looks like this:
Code: 
$(document).ready (function() {
...calls, functions, etc....
});
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
In your situation, i suggest you use the hide() and show() functions. Or you can lump these two together with the toggle() function.

Lets look at how you can apply them. First we want a menu to target, and also a corresponding text element for each link. Then we will target the link through class and id names, and using a variable to store the name of the visible content.
HTML
HTML: 
<ul class="menu">
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Help</a></li>
</ul>
<p class="" id="about_txt">Lorem ipsum...</p>
<p id="contact_txt">Proin quis arcu diam...</p>
<p id="help_txt">Nunc accumsan pulvina...</p>
CSS
Code: 
ul.menu, p {
margin:20px;
padding:0;
}
ul.menu li {
list-style:none;
}
ul.menu li a {
font:normal 9pt Arial;
text-decoration:none;
color:#333;
display:block:
height:20px;
line-height:20px;
padding:0 5px;
}
ul.menu li a:hover {
color:#222;
text-decoration:underline;
}
p[id] {
display:none;
}
Javascript
Code: 
$(document).ready (function() {
	var targetTxt = "";
	$(ul.menu a).click(function() {
		if (targetTxt == "") {
			targetTxt = $(this).attr("id") + "_txt"
			$('p#'+ targetTxt).show("fast");
		}
		else {
			$('p#'+ targetTxt).hide("fast", fucntion() {
				targetTxt = $(this).attr("id") + "_txt"
				$('p#'+ targetTxt).show("fast");	
			});
		}
	}

});
 
I

itusvirus

New Member
Wow, thanx allot PixelPusher. I have seen jquery mentioned before on other topics like the lightbox plugin, which I plan on using on my site. I will certainly look into jquery/the code you gave me and hope that learning to understand jquery will be just as satisfying as learning HTML and CSS was for me :p

I am so happy that I finally pushed my self to figure out HTML and CSS. Once I got grasp of the basics I was like "WOW this is actually fun and easy too". Now a whole new world full of script goodies opened up.

though I still don't understand why there isn't software that lets you draw HTML/CSS visually in the way photoshop or illustrator does with pixels or vector. Dreamweaver isn't really what i hoped it would be. Some type of Dreamweaver Indesign hybrid would be nice. lol just fantasizing!
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
No prob, your welcome. Yeah the design view in DW is very unreliable, what may look correct in that view can often be botched in an actual browser.

Jquery is still quite new to me as well. I am not nearly as comfortable with it javascript as I am with css/html. That being said I am sure there is a more refined script i could put together than what I wrote below, time will tell :p
 
You must log in or register to reply here.
Top