JQuery generated Menu ~ Andrew Pougher

JQuery generated Menu with CSS and dynamic positioning and scrolling ~ Andrew Pougher

by Andrew Pougher

HTML

<div id="sidenav">
    <h2>Menu</h2>
    <ul>
    </ul>
  </div>

    <section>
  <div class="news">
    <h1>Travel Industry Price Hikes</h1>
    <p>Online agency Orbitz has found that Apple Mac users on average spend $20-$30 more a night on hotels than their PC counterparts.

A report in the Wall Street Journal said the discovery meant that Orbitz is now starting to show Mac users different, and sometimes costlier, options than it does for Windows visitors.

‘The Orbitz effort, which is in its early stages, demonstrates how tracking people’s online activities can use even seemingly innocuous information – in this case, the fact that customers are visiting Orbitz.com from a Mac – to start predicting their tastes and spending habits,’ said the WSJ.

Orbitz’s chief scientist, Wai Gen Yee, told the WSJ that Mac users are 40% more likely to book a four- or five-star hotel than PC users – and when Mac and PC users book the same hotel, Mac users tend to stay in more expensive rooms.

The WSJ article said: ‘The effort underscores how retailers are becoming bigger users of so-called predictive analytics, crunching reams of data to guess the future shopping habits of customers.’

It quoted research figures from Forrester which found the average household income for adult owners of Mac computers is $98,560, compared with $74,452 for a PC owner,

However, when the paper tested the system with hotel searches, it said the Mac/PC effect ‘isn’t always obvious’.</p>
  </div>

  <div class="news">
    <h1>Web Services Help Bookings</h1>
    <p>Online agency Orbitz has found that Apple Mac users on average spend $20-$30 more a night on hotels than their PC counterparts.

A report in the Wall Street Journal said the discovery meant that Orbitz is now starting to show Mac users different, and sometimes costlier, options than it does for Windows visitors.

‘The Orbitz effort, which is in its early stages, demonstrates how tracking people’s online activities can use even seemingly...

CSS

body{background:#eee;font-size:12px;padding:12px}

.current{background:#cfcfcf;border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;color:white;text-decoration:none}

#sidenav{display:block;position:absolute;z-index:2;border:1px solid #ddd;padding:5px;background:#fff;line-height:22px}

section{
margin-left:100px;
    border-left:1px solid #ccc;
    padding:5px;border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;}

h1{font-size:23px}

p {text-align:justify}

a{  position:relative;text-decoration:none}
a:hover{
    box-shadow:
        0px 1px 1px rgba(255,255,255,0.8) inset,
        1px 1px 5px rgba(0,0,0,0.4);
     transform: scale(1);

}

JavaScript

$(function() {
    var list = $('#sidenav ul');

    $(".news h1").each(function(i, item) {
        $(this).prepend('<a name="' + $(this).text() + '"></a>');
        $(list).append('<li><a href="#' + $(this).text() + '">' +  $(this).text() + '</a></li>');
    });
    var secw =  $('#sidenav').width();
    $("section").css("margin-left",secw*1.2)

        
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var loc = $(this).attr("href");
var $linage = $(this);
    alert(loc)
//pinpoint
$('ul li').removeClass("current");
$linage.parent("li").addClass("current")
if ($.browser.opera) {
var target = 'html';
}else{
var target = 'html,body';
}

$(target).animate({
    scrollTop: $(loc).offset().top
}, 2000 , function (){location.hash = loc;});
});
return false;

        
        
        });