alioconsult
03-27-2009, 10:55 PM
Ok so here is what Im trying to accomplish: I want to build a website out of one html document. I would like to use a JQuery plugin to fade content between the same div when I click on various CSS styled buttons. Im really quite terrible at JS and most of the JS work I do is cut and paste so please bare with me.
For my HTML I have:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wayne A. Chorney ~ Barrister & Solicitor</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="scripts/jquery-1.3.2" type="text/javascript"></script>
<script type='text/javascript'>
$('#s4')
.before('<div class="underlinemenu">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
</script>
<style type="text/css">
<!--
body {
background-image: url(images/gradient.png);
background-repeat: repeat-x;
}
-->
</style>
</head>
<body>
<div id="page-wrap">
<div id="background">
<div id="pagehead">
<img src="images/wlogo.png" align="left">
<img src="images/headertext.png" class="floatright">
<div id="tabs">
<div class="underlinemenu">
<ul>
<li><a href="index.html">Main</a></li>
<li><a href="about.html">About Wayne</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<p>*PAGE ONE* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
<div id="content">
<p>*PAGE TWO* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
<div id="content">
<p>*PAGE THREE* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
</div>
For my CSS I have:
#page-wrap {
min-width: 850px;
min-height: 650px;
max-width: 1000px;
margin: 10px auto;
border: 1px solid #000000;
padding: 10px;
overflow: hidden;
background-color: #ffffff;
}
#pagehead{
background-color: #1d1715;
boder: 1px solid #000000;
}
#footer{
background-color: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
margin: 0px;
z-index: 3;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.floatright {
float: right;
padding-top: 30px;
padding-right: 25px;
margin: 0px;
}
#content {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: none;
z-index: 1;
min-height: 595px;
}
#background {
z-index: 2;
background-image: url(images/wsplash.png);
background-position: 100% 100%;
background-repeat: no-repeat;
background-color:#00000;
}
#tabs {
border: none;
background-color: #ffffff;
padding: inherit;
margin: inherit;
clear: both;
}
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
Any help trying to enplane to me how to do this would be much appreciated. Thanks.
For my HTML I have:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wayne A. Chorney ~ Barrister & Solicitor</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="scripts/jquery-1.3.2" type="text/javascript"></script>
<script type='text/javascript'>
$('#s4')
.before('<div class="underlinemenu">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
</script>
<style type="text/css">
<!--
body {
background-image: url(images/gradient.png);
background-repeat: repeat-x;
}
-->
</style>
</head>
<body>
<div id="page-wrap">
<div id="background">
<div id="pagehead">
<img src="images/wlogo.png" align="left">
<img src="images/headertext.png" class="floatright">
<div id="tabs">
<div class="underlinemenu">
<ul>
<li><a href="index.html">Main</a></li>
<li><a href="about.html">About Wayne</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<p>*PAGE ONE* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
<div id="content">
<p>*PAGE TWO* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
<div id="content">
<p>*PAGE THREE* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim diam tempus urna. In volutpat. Nam luctus bibendum est. Sed quis nisl. Quisque lacinia risus ac ante. Sed turpis urna, fringilla eu, dapibus a, luctus at, ligula. Morbi pretium. Cras nec risus. Ut mauris justo, blandit non, pulvinar sed, fermentum eget, nisi. Nulla vulputate ullamcorper sapien. In lectus dolor, blandit non, scelerisque at, molestie et, orci. Morbi justo. Quisque egestas diam at nisl. Aenean suscipit, est vitae aliquet mattis, purus magna mattis tellus, sed eleifend quam erat eu quam. Suspendisse vehicula ipsum et leo.</p>
<p>Curabitur id orci nec diam facilisis porta. Donec id leo. Nullam quis erat in nisl adipiscing convallis. Curabitur eros. Cras interdum turpis non velit. Praesent tincidunt erat vel erat. Fusce auctor erat eget lacus. Quisque venenatis sodales diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce facilisis purus id mi. Vestibulum id leo. Sed mollis est eget tellus. Vivamus eget sapien. Morbi non nunc id justo dignissim pharetra. Vestibulum sagittis lectus in sem. Fusce erat nisl, dapibus a, volutpat quis, vulputate vel, orci. Sed volutpat eleifend libero. Maecenas purus.</p>
</div>
</div>
For my CSS I have:
#page-wrap {
min-width: 850px;
min-height: 650px;
max-width: 1000px;
margin: 10px auto;
border: 1px solid #000000;
padding: 10px;
overflow: hidden;
background-color: #ffffff;
}
#pagehead{
background-color: #1d1715;
boder: 1px solid #000000;
}
#footer{
background-color: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
margin: 0px;
z-index: 3;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.floatright {
float: right;
padding-top: 30px;
padding-right: 25px;
margin: 0px;
}
#content {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: none;
z-index: 1;
min-height: 595px;
}
#background {
z-index: 2;
background-image: url(images/wsplash.png);
background-position: 100% 100%;
background-repeat: no-repeat;
background-color:#00000;
}
#tabs {
border: none;
background-color: #ffffff;
padding: inherit;
margin: inherit;
clear: both;
}
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
Any help trying to enplane to me how to do this would be much appreciated. Thanks.