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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to implement a JQuery plugin to a site Im building

    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:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wayne A. Chorney ~ Barrister &amp; 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:

    Code:
    #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.
    Last edited by alioconsult; 03-27-2009 at 10:08 PM. Reason: Didnt close code tags.

  • #2
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops.. never mind. I see that you have the unordered list there, i was looking at your DIVs at the bottom. what is happening with the code as it currently is?
    Last edited by lindsayannb; 03-28-2009 at 08:53 AM.

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tanks for the reply lindsayannb, Ive decided to scrap the idea of using the same div multiple times to display different content as that whole concept seems to be quite complex. So I think Im just gonna be a little redundant and have a new div for each set of content, the unordered list is my CSS styled navigation Im using to switch between the div's. Ive also decided not to use this Jquery plugin for now and just focus on basic Jquery functions like fadeIn and fadeOut. Now this is where I need help. How do I only make one div show up at a time then when the user clicks on the anchor to show only the next div? Ive also ran into the problem of the browsers back and froward buttons is there a way to tie them to the javascript so they can also be used to navigate the unordered list the same way you would if you were to have multiple html documents?

    right now I have:

    Code:
    $(function()	{
    $('a').click(function() {
    $('#contentmain').fadeOut();
    });
    });
    $(function()	{
    $('a').click(function() {
    $('#contentabout').fadeOut();
    });
    });
    $(function()	{
    $('a').click(function() {
    $('#contentcontact').fadeOut();
    });
    });
    How do I initially only show #contentmain, then when a user clicks on on a link such as About fadeOut content main and fadeIn #contentabout and then be able to do this cycle though out all of the navigation buttons?


  •  

    Posting Permissions

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