javascript - Two column webpage, menu loading seperate HTML files with Jquery -
it sounds simple none of find on google worked far. i've found similar question on here solution looks i'm looking for: http://jsfiddle.net/sj6bj/4/
here's html:
<html> <head> <title>two-pane navigation</title> </head> <body> <div id="content"> <div id="navigation"> <h1>navigation</h1> <ul> <li><a href="#page1" class="page-link">page 1</a></li> <li><a href="#page2" class="page-link">page 2</a></li> </ul> </div> <div id="pages"> <div id="page1" class="page"> <h1>page 1</h1> <p>this lovely content on page 1.</p> <p>let's add bunch of stuff make scroll.</p> <p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p> <p>this @ bottom of page.</p> </div> <div id="page2" class="page"> <h1>page 2</h1> <p>this lovely content on page 2.</p> </div> </div> </div> </body> </html> javascript (assumes jquery loaded):
$(document).ready(function() { $(".page-link").on("click", function(e) { $(".page").fadeout(250); settimeout(function() { $($(e.currenttarget).attr("href")).fadein(250); }, 250); }); }); css:
#navigation { position: fixed; width: 250px; height: 100%; border-right: 1px solid black; } #pages { margin-left: 270px; /* 250px + 20px of actual margin */ } .page { position: relative; display: none; overflow: scroll; } the problem is, want load different youtube videos autoplay. means given example hear of audio play in back. make sure doesnt happen want load different, seperate html files containing youtube videos.
thanx in advance.
ideally should load pages via ajax. solve problem of youtube content playing in background. , drastically reduce initial page load time.
html
<html> <head> <title>two-pane navigation</title> </head> <body> <div id="content"> <div id="navigation"> <h1>navigation</h1> <ul> <li><a href="page-1.html" class="page-link">page 1</a></li> <li><a href="page-2.html" class="page-link">page 2</a></li> </ul> </div> <div id="pages"> <!-- ajax content loads here --> </div> </div> </body> </html> javascript/jquery
$(document).ready(function() { $(".page-link").on("click", function(e) { $.get($(this).attr('href')) .done(function(data) { $('#pages').html(data); }); return false; }); });
Comments
Post a Comment