Script Question

Get Started
1

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? :slight_smile:

2

@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:


<!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:


<!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:


$(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