Bottom up website

riet · #1 (**permalink**) Dec 6th, 2007, 14:39

Afternoon all,

I have a question, is it possible to start a website at the bottom of the page scrolling up?

I have a client who has seen something similar in the internet, where the website opens in the middle and you can scroll to the top or down, or in this web page's example they use JavaScript to have a smooth scroll up and down on the navigation rather then going to other pages.

The client is adamant that we do his website in a similar vein however I haven’t come across the code out there to be honest.

No entirely sure if this is the best place for this question to be answered, but cheers in advance for any info.

Thanks

Stuart · #2 (**permalink**) Dec 7th, 2007, 03:13

Can you post a link to the site where you saw it?

riet · #3 (**permalink**) Dec 7th, 2007, 07:56

Hi Thanks for your reply.

This is the website he had the idea from where the page opens in the middle of the website and scrolls up and down.

http://volll.com/

Thanks

Monie · #4 (**permalink**) Dec 7th, 2007, 08:10

Check out the title bar address "http://volll.com/#section_main"
#section_main refer to the center content area..

What you have to do is, on your page, you would probably have 3 section of a content area let say you have 3 main div:

HTML: Select all

<body>
<div id="myTopDiv">
...
</div>

<div id="myMiddleDiv">
...
</div>

<div id="myBottomDiv">
...
</div>
</body>

you would probably want the page load from the red div content, am I right?
To do that, you just have to add this extra code

HTML: Select all

<body>
<div id="myTopDiv">
...
</div>

<div id="myMiddleDiv">
...
</div>

<a name="section_main">
<div id="myBottomDiv">
...
</div>
</body>

and your website address will be like this: www.yoursite.com/#section_main
Hope that helps..

riet · #5 (**permalink**) Dec 7th, 2007, 08:16

Hi Monie,

Thanks for your reply. Using this way is if the url was just http://www.yousite.comwould this still open at the correct section?

I have been wracking my brain about this as i figured it would be some onload function i havent come across!

If it is like you say it would be brilliant as the website and design is already set up in 5 main div sections... all i now need to to is figure out the opening at the bottom div!

Monie · #6 (**permalink**) Dec 7th, 2007, 08:26

Thats the only way I know! I never try them, but I know this are the only way

You just have to put the <a name=""> tag to the bottom most page that you want to first loaded when the user type in the address.

I am not sure if the link work, you might want to try them first.
Tell me if it is not working, we can think of something..

riet · #7 (**permalink**) Dec 7th, 2007, 08:52

Hi Monie,

Thanks again for your reply.

I have tried it on a an example web page using the code you have suggested and i cant seem to get it working. I have attached the code, as you can see its just using some basic styling so i can try to get it working without putting it into the main design first.

HTML: Select all

<style>
DIV#myTopDiv {
 width: 781px; 
 POSITION: absolute; 
 HEIGHT: 500px; 
 top:10px;
 background-color:#33FFFF;
}
DIV#myMiddleDiv {
 width: 781px; 
 POSITION: absolute; 
 HEIGHT: 500px; 
 top:700px;
 background-color:#00CCFF;
}
DIV#myBottomDiv{
 width: 781px; 
 POSITION: absolute; 
 HEIGHT: 500px; 
 top:1500px;
 background-color:#CCCCCC;
}
 
</style>
</head>
<body>
<div id="myTopDiv">
...
</div>
<div id="myMiddleDiv">
...
</div>
 
<a name="section_main">
<div id="myBottomDiv">
...
</div>
 
</body>

I tired this with the #section_main and without in the url bar and i still only had the load onto the top.

Many thanks!

Aso · #8 (**permalink**) Dec 7th, 2007, 09:36

You'll need to use PHP or htaccess to redirect all requests for www.yoursite.com to www.yoursite.com#section_main. Not sure on the exact syntax but I'm sure someone else can help

welshstew · #9 (**permalink**) Dec 7th, 2007, 09:49

If you are using a windows server you can just set up the link as the default doc in your IIS.

If you want to use htaccess then I think you add something like:

DirectoryIndex thisismypage.html#thisisthecenter

to the htaccess file

riet · #10 (**permalink**) Dec 7th, 2007, 09:54

Hi All,

Thanks for your input regarding IIS and htaccess, i think this would be the best way for it, just gave it a try using IIS and the example monie gave me worked!

Thanks for all your help!

Blake121 · #11 (**permalink**) Dec 7th, 2007, 15:48

If it matters I worked out a javascript way. Might be easier for some.

Code: Select all

<html>
<head>
<script type="text/javascript">
    function movePage(theDiv) {
        window.location = window.location + "#" + theDiv;
    }
 </script>
</head>
<body onload="movePage('middle')">

 <div id="top">
  <p>Foo</p>
 </div>

 <div id="middle">
  <p>Bar</p>
 </div>

 <div id="bottom">
  <p>Foo Bar</p>
 </div>

</body>
</html>

You just use the onload handler to load the function when the page is first loaded. You type in the name of the div you want to start at when calling the function.

Monie · #12 (**permalink**) Dec 8th, 2007, 00:27

Hai riet, have you tried manually typing the address?
Which part you stuck with? The redirect thing "#" or the <a name> thing?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Monster Bottom Padding	Maverick25r	Web Page Design	4	Jan 31st, 2008 15:03
Div stretch to bottom in IE6	Aso	Web Page Design	16	Nov 27th, 2007 12:49
Odd bottom spacing problem	FabianN	Web Page Design	2	May 6th, 2007 16:27
Divs within another div go to the bottom of page...	Nitesh9999	Web Page Design	10	Mar 1st, 2006 14:08
Bottom border width	jimz	Web Page Design	2	Feb 20th, 2006 04:09

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Bottom up website