www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to create a two column animated content page

  1. #1
    Join Date
    Mar 2004
    Location
    Sunderland, UK
    Posts
    152

    How to create a two column animated content page

    I am trying to create a page template that does the following.

    The page is two columns:
    - The Left Column is a static box with links to pages.
    - The Right Column is has boxes/pages of content (a page for each link on the left)

    http://i.imgur.com/Jd1C9.gif

    It starts on page opening showing the top page on the right column in the centre of the screen.

    When you click on a link on the left it smoothly scrolls the right column up or down till the page is in the centre of the screen.

    The page must have no scrolling and you must use the left hand links.


    Any ideas guys? or anything close I can find online to reference?

    It may use JavaScript, CSS, HTML ect and run in browsers down to IE6.

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Well if you didn't want any scrolling you could wrap your content on the right inside a containing div and assign that to have css of overflow:hidden. Then you'd have to use javascript to move the inside content around. If you can have scrolling though which from your mock-up would actually help your page- you could just make each div an anchor and use javascript to animated the the window scroll like this:

    http://www.mediacollege.com/internet...ge/scroll.html

  3. #3
    Join Date
    Mar 2004
    Location
    Sunderland, UK
    Posts
    152
    thanks exactly the start I needed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles