SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Script Question

  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Script Question

    Hi,

    I'd like to use the script contained in this website ( http://hitechavs.businesscatalyst.com/index.html ) that allows the content area to change when an option in the left menu bar is hovered over.

    I'm basically working with an empty html space ( http://durginglobal.com/td/draft/ ), and am looking to replace all that text by integrating this feature.

    Could you someone please advise me?

  2. #2
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    @webdevsys

    This uses javascript (jQuery library). One way to do this is through ajax and loading some html using selectors.

    So you might set up a html page that has 4 sections that have the content you want to load. For your content you would create 4 html pages laid out (using css) the way you want. Your main page would be like so:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
      <title>My Options</title>  
      <link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen" charset="utf-8"/> 
      <script src="../../lib/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script> 
      <script type="text/javascript" src="script.js"></script>
    </head>
    <body> 
      <div id='options'>
         <ul>
           <li><a href="option1.html">Option 1</a></li>
           <li><a href="option2.html">Option 2</a></li>
           <li><a href="option3.html">Option 3</a></li>
           <li><a href="option4.html">Option 4</a></li>
         </ul> 
     </div>
     <div id="content">  
       Roll over an option to find out more!
      </div>
    </body>
    </html>
    Your content files would go like this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Option 1</title>
      <link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen" charset="utf-8"/>
      <script src="../../lib/jquery-1.6a1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
       <h1>Option 1</h1>
        <p id="info"> ~ Your info would be laid out here ~  </p>
     </body>
    </html>
    You would create a html page for each option. Then your jQuery script would go like:
    Code:
    $(document).ready(function(){
      $('#options ul a').live('mouseover',function(e) {
        var url = $(this).attr('href') + ' #info';
        $('#content').html('loading...').load(url);
        e.preventDefault();
      })
      $('#info').live('mouseover', function() {
        $(this).css('background-color', green');
      });
      $('#info').live('mouseout', function() {
        $(this).css('background-color', 'inherit');
      });
    });
    This will on mouseover load the url variable into the #content div. If you mouse over the content then the background will go green and if you mouse out it goes back to normal.

    Hope this helps.
    Steve
    ictus==""


Bookmarks

Posting Permissions

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