jquery - How can I overlay a html page on an one page design? -
i coding 1 page design - 1 page content on homepage - have different links different external content pages, single.html
. searching how can overlay single page on index.html, smooth navigation continue work , stand @ last position user was, example portfolio
.
on internet read can load content jquery’s function load
, seems not work me.
the code looks following:
$("#buttoncontact").click(function(e){ event.preventdefault(); $.ajax({url:"contact.html",success:function(result){ $("body").html(result); }}); });
perhaps snippet of code doesn’t work me. explanation of code is, when user clicking on button id of buttoncontact
, contact.html
should loaded overlay on homepage. should markup single page - single.html
same index, head
stuff etc or should remove snippets of code out of page?
on www.dangblast.com see working example of means. click on thumbnail , content overlay whole homepage.
simple html. might put on multiple pages, put on single page. simple that.
so if have menubar links different pages:
<a href='home'>home</a> <a href="contact">contact</a>...
... use page anchors instead, like:
<a href="#home">home</a> <a href="#contact">contact</a>...
(notice difference hash tags (#) in href
attribute.)
on each section of page, simple add id
attribute headers or sectioning elements:
<h2 id="home">hello, world!</h2> <p>lorem ipsum dolor sit amet...</p> <h2 id="contact">give call</h2> <p>lorem ipsum dolor sit amet...</p>
or
<section id="home"> <h1>hello, world!</h1> <p>lorem ipsum dolor sit amet...</p> </section> <section id="contact"> <h1>give call</h1> <p>lorem ipsum dolor sit amet...</p> </section>
do google search "single page design" , you'll find lots of great implementation tips.
Comments
Post a Comment