CODEWITHSUNDEEP
javascriptjqueryhtmljquery-animate
user2359466
user2359466

Reputation: 17

Slide external page on top of current page

I have 4 pages of contents, which I want to open on top of the current/home page. All these pages needs to be slide into. E.g. Once the about us is clicked it will get slide in and on clicking another link the previous page will slide out and the new page will slide in. Once the Home page link is clicked any loaded page needs to slide out.

I have added an illustration here

illustration

and here is the site I am trying to put up http://www.beautydishphotography.com.

Currently all the link contents are getting loaded from the DIVs residing on the page itself and I am trying to take those in external HTML files and will load them sliding in/out on clicking the menu buttons.

Here is my current HTML code.

<html>
<head>
    <title>Test Div</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <nav> 
    <div id='menu'> 
    <a href='#'><img src='img/Navigation/home.png' title='Home' alt='' /></a>
    <a href='aboutus.html'><img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' /></a> 
    <a href='portfolio.html'><img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' /></a>
    <a href='contactus.html'><img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /></a>
     </div>
  </nav>
  <div style="clear:both"></div>
  <div id="externalPage" style="height:900px; width:900px; background-color:#999; display:none;">Contact Us</div>
</body>
</html>

I have also placed a #externalPage div which might be needed to load external .html files.

I am very new to jQuery and really getting hard time to make it. Please let me know how can I do it.

Upvotes: 0

Views: 926

Answers (1)

Jonny Sooter
Jonny Sooter

Reputation: 2417

Load your content into a off-screen or invisible div, then .animate() the div into place. You can also change the class names accordingly, thus applying all the styles to your brought in div.

The folks over at GitHub implemented that idea a while back: https://github.com/blog/760-the-tree-slider

Upvotes: 2

Related Questions