0

I've done a jQuery tutorial and have made some changes via CSS. It's a pretty simple Q&A list, in fact so simple that I did the entire thing with Notepad. I want to change some other things and find out if what I've done is copacetic. Here's the code -

<html>
<head>
	<title>Testing JQuery</title>

	<script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquer

y.min.js"></script>

	<style>
body {
	margin:0px 0px; padding:0px;
	text-align:left;
}
#container {
	background-color: 990000;
	padding:10px 0px 10px 15px;
	margin:0px auto;
	position:relative;
	width:800px;
}
#container2 {
	background-color: 000000;
	padding:0px 5px 0px 5px;
	margin:5px 10px 0px 0px;
	width:430px;
	border-width:2px;
	border-style:inset;
	border-color:ffffff;
}
#container3 {
	background-color: ffffff;
	padding:0px 5px 0px 5px;
	margin:0px 10px 0px 10px;
	position:absolute;
	top:10;
	right:10;
	width:300px;
}
h2 {
	color: ffffff;
	font-family:"Verdana",Arial,Sans-serif;
}
a {
	color: ffffff;
	font-size:1.3em;
	font-family:"Verdana",Arial,Sans-serif;
}
#container3 .link a{
	color: 000000;
	font-size:1.0em;
}
p {
	color: 000000;
	font-size:1.0em;
	font-family:"Verdana",Arial,Sans-serif;	
}
#odd {
	color: 00ccff;
	font-size:1.2em;	
	text-decoration:underline;
	background-color: 303030;
}
#even {
	color: 00ccff;
	font-size:1.2em;
	text-decoration:underline;
	background-color: 505050; 
}
dd {
	color: white;
	font-size:1.2em;
}
	
	</style>
	<script>
	$(document).ready(function(){

	$("dd").hide();
$("dt").click(function(){

	$(this).next().toggle();

});

});
function showall()

{

	$("dd").show();

}
	</script>

</head>
<body>

<div id="container">
<h2>My First jQuery Tutorial</h2>

<a href="#" onclick="showall();" id="linkshowall">Expand 

all</a>
	<div id="container2">

<dl>

	<dt id="odd">Question number one</dt>

	<dd>Answer to first question</dd>


	<dt id="even">Question number two</dt>

	<dd>Answer to second question</dd>


	<dt id="odd">Question number three</dt>

	<dd>Answer to third question</dd>


	<dt id="even">Question number four</dt>

	<dd>Answer to fourth question</dd>


	<dt id="odd">Question number five</dt>

	<dd>Answer to fifth question</dd>


	<dt id="even">Question number six</dt>

	<dd>Answer to sixth question</dd>


	<dt id="odd">Question number seven</dt>

	<dd>Answer to seventh question</dd>


	<dt id="even">Question number eight</dt>

	<dd>Answer to eighth question</dd>


	<dt id="odd">Question number nine</dt>

	<dd>Answer to ninth question</dd>


	<dt id="even">Question number ten</dt>

	<dd>Answer to tenth question</dd>


	<dt id="odd">Question number eleven</dt>

	<dd>Answer to eleventh question</dd>


	<dt id="even">Question number twelve</dt>

	<dd>Answer to twelveth question</dd>

</dl>

	</ div>

		<div id="container3">
<p class="link">This was actually a fun tutorial. I found it 

out on <a href="http://www.webmonkey.com/" 

target="_blank">Webmonkey.com</a> and it went pretty smooth. 

Because it was so simple I did the whole thing with nothing 

more than NotePad. The basic tutorial gives you the "Expand 

all" function and 3 questions/answers. I added to the list 

to end up with a dozen, did some css styling and put this 

text in so it wouldn't look quite so bare. I do wish I knew 

enough jQuery to put the questions/answers in alternating 

color rows <b>(DONE!)</b> and have the text background 

change color on hover (with a pointer). Also I would like to 

add a "Collapse all" function but that will have to wait for 

my knowledge base to improve.
		</ div>
</ div>
</body>
</html>

What I have been trying to do is explained in div container3. Just to clarify:

1. Make a hover state on the dt tags that will give me a finger pointer.
2. Make the dt tags either change color on hover or change background color.
3. Add a "Collapse all" option although I think I know how to do that.
This is my first exposure to jQuery but the basics of it seem pretty straightforward. Also I've done the alternating color rows with CSS but am not sure that's the best way to go about it. Tips and suggestions are welcome. Thanks in advance.

1
Contributor
1
Reply
2
Views
5 Years
Discussion Span
Last Post by nospryexpert
0

Update: I figured out the "Collapse all" option but am wondering the best way to position it. Other than that I'm still working on the 2 other issues - the finger pointer for the dt tags and the color on hover or change background color. The updated code -

<html>
<head>
	<title>Testing JQuery</title>

	<script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></

script>

	<style>
body {
	margin:0px 0px; padding:0px;
	text-align:left;
}
#container {
	background-color: 990000;
	padding:10px 0px 10px 15px;
	margin:0px auto;
	position:relative;
	width:800px;
}
#container2 {
	background-color: 000000;
	padding:0px 5px 0px 5px;
	margin:5px 10px 0px 0px;
	width:430px;
	border-width:2px;
	border-style:inset;
	border-color:ffffff;
}
#container3 {
	background-color: ffffff;
	padding:0px 5px 0px 5px;
	margin:0px 10px 0px 10px;
	position:absolute;
	top:10;
	right:10;
	width:300px;
}
h2 {
	color: ffffff;
	font-family:"Verdana",Arial,Sans-serif;
}
a {
	color: ffffff;
	font-size:1.3em;
	font-family:"Verdana",Arial,Sans-serif;
}
#container3 .link a{
	color: 000000;
	font-size:1.0em;
}
p {
	color: 000000;
	font-size:1.0em;
	font-family:"Verdana",Arial,Sans-serif;	
}
#odd {
	color: 00ccff;
	font-size:1.2em;	
	text-decoration:underline;
	background-color: 303030;
}
#even {
	color: 00ccff;
	font-size:1.2em;
	text-decoration:underline;
	background-color: 505050; 
}
dd {
	color: white;
	font-size:1.2em;
}
	</style>
	<script>
	$(document).ready(function(){

	$("dd").hide();
$("dt").click(function(){

	$(this).next().toggle();

});

});
function showall()

{

	$("dd").show();

}

function collapseall()

{

	$("dd").hide();

}

	</script>

</head>
<body>

<div id="container">
<h2>My First jQuery Tutorial</h2>

<a href="#" onclick="showall();" id="linkshowall">Expand all</a>

<a href="#" onclick="collapseall();" id="linkcollapse">Collapse all</a>
	<div id="container2">

<dl>

	<dt id="odd">Question number one</dt>

	<dd>Answer to first question</dd>


	<dt id="even">Question number two</dt>

	<dd>Answer to second question</dd>


	<dt id="odd">Question number three</dt>

	<dd>Answer to third question</dd>


	<dt id="even">Question number four</dt>

	<dd>Answer to fourth question</dd>


	<dt id="odd">Question number five</dt>

	<dd>Answer to fifth question</dd>


	<dt id="even">Question number six</dt>

	<dd>Answer to sixth question</dd>


	<dt id="odd">Question number seven</dt>

	<dd>Answer to seventh question</dd>


	<dt id="even">Question number eight</dt>

	<dd>Answer to eighth question</dd>


	<dt id="odd">Question number nine</dt>

	<dd>Answer to ninth question</dd>


	<dt id="even">Question number ten</dt>

	<dd>Answer to tenth question</dd>


	<dt id="odd">Question number eleven</dt>

	<dd>Answer to eleventh question</dd>


	<dt id="even">Question number twelve</dt>

	<dd>Answer to twelveth question</dd>

</dl>

	</ div>

		<div id="container3">
<p class="link">This was actually a fun tutorial. I found it out on <a 

href="http://www.webmonkey.com/" target="_blank">Webmonkey.com</a> and 

it went pretty smooth. Because it was so simple I did the whole thing 

with nothing more than NotePad. The basic tutorial gives you the "Expand 

all" function and 3 questions/answers. I added to the list to end up 

with a dozen, did some css styling and put this text in so it wouldn't 

look quite so bare. I do wish I knew enough jQuery to put the 

questions/answers in alternating color rows <b>(DONE!)</b> and have the 

text background change color on hover (with a pointer). Also I would 

like to add a "Collapse all" function <b>(DONE!)</b> but now best way to 

position it.
		</ div>
</ div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.