Display from 100px height to bottom when the page is loading

JavaScript
1

I have a webPage at http://dot.kr/x-test/test20.php

The page has 3 boxes. the 1st one is in yellow, the 2nd one is in pink, and the last one is in cyan.

if you click a link with “#yellow”, it will is go to the yellow box which is on the top of the page.
if you click a link with “#pink”, it will is go to the pink box which is on the middle of the page.
if you click a link with “#cyan”, it will is go to the cyan box which is on the bottom of the page.

if you click a link without any “#”, it will is go to the yellow box which is on the top of the page.

I like to make it like the following.

if you click a link without any “#”, it will is go to the pink box which is on the middle of the page.
the yellow box is hidden over the top of the browser.
if you drag down of the vertical scroll bar, you can see the yellow box but you can’t see the yellow box when it is loading.

Can I make it displays from the 100px height when the page is loading with your help?
Can I make it with CSS or should I go to the Javascript forums?

2

Try this:

<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title goes here </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;word-break:break-all;}
#cyan,
#pink,    
#yellow {background-color:yellow; height:100px; width:100%;}
#pink   {background-color: pink;  height:800px;} 
#cyan   {background-color: cyan;}
</style>
</head>

<body style="padding:5px;">

  <div id="yellow">
    <a href="#yellow">yellow</a>
    <br>
    <a href="#pink">pink</a>
    <br>
    <a href="#cyan">cyan</a>
    <br>
    <a href="#pink">default</a>
  </div>

  <div id="pink">
    <a href="#yellow">yellow</a>
    <br>
    <a href="#pink">pink</a>
    <br>
    <a href="#cyan">cyan</a>
    <br>
    <a href="#pink">default</a>
  </div>

  <div id="cyan">
    <a href="#yellow">yellow</a>
    <br>
    <a href="#pink">pink</a>
    <br>
    <a href="#cyan">cyan</a>
    <br>
    <a href="#pink">default</a>
  </div>

</body>
</html>
3

Thank you, John_Betong for your code

Using ‘[div id=“yellow”]’ instead ‘[a name=“yellow”][/a]’ is much helpful, but I am afraid that that is not exactly what I want.

I want it displays from the pink box when the page is loading without any “#”.

What the default means without any “#”.

Please click the test21.php at (1) http://dot.kr/x-test/test21.php.
and click the test21.php#pink at (2) http://dot.kr/x-test/test21.php#pink.

if you click the link (1), it displays from the yellow box.
if you click the link (1), it displays from the pink box.

What I want is that it displays from the pink box when you click the link (1).

How can I make it displays from the 100 px height instead of from the top when the page is loading?

4

Hi @joon1

Try this - but had to use a bit of JavaScript:

<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title goes here </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;word-break:break-all;}
#cyan,
#pink,    
#yellow {background-color:yellow; height:100px; width:100%;}

#pink   {background-color: pink;  height:1200px;} 
#cyan   {background-color: cyan;}
#yellow {display:none;}

pre     {background-color: snow; width:88%; margin:2em auto;}
</style>
</head>
<body id="default" style="padding:5px; position:relative;">

    <div id="yellow">
      <!-- <a href="#yellow">yellow</a> <br> -->
      <a href="#pink">pink</a>     <br>
      <a href="#cyan">cyan</a>     <br>
      <a href="#pink">default</a>
    </div>

  <div id="pink">
    <a href="#yellow" onclick="myscript();">yellow</a><br>
    <!-- <a href="#pink">pink</a>    <br>  -->
    <a href="#cyan">cyan</a>    <br>
    <!-- <a href="#pink">default</a> -->
  </div>

  <div id="cyan">
    <a href="#yellow" onclick="myscript();">yellow</a><br>
    <a href="#pink">pink</a>    <br>
    <!-- <a href="#cyan">cyan</a>    <br> -->
    <a href="#pink">default</a>
  </div>

<script type="text/javascript"><!--
function myscript()
{
  document.getElementById('yellow').style.cssText = "display:block;";
}
--></script>
</body>
</html>
5

As you use a bit of Javascript, It works fine.
when it is loading, it begins from the pink div.

but I am also afraid saying that it does not display from the 100px height(vertically).

I quote the below from my original post.

[quote=“joon1, post:1, topic:210879”]
if you drag down of the vertical scroll bar, you can see the yellow box but you can’t see the yellow box when it is loading.
[/quote]I can’t see the yellow box by dragging down the vertical scroll bar.

Going to the yellow box with “#yellow”, Going to the pink box with “#pink”, or Going to the cyan box with “#cyan” is not important.
What I want is that the page displays from the 100px height vertical level instead of the top which is 0px height vertical level.

Most web pages begin from the top (0 height px), but I want my page begins from the 100 height px.

How can I make my page begins from the 100 height px vertically?

6

I have moved this topic to the JavaScript forum where hopefully someone will be able to help.

I think you have four states:

Firstly: a default link which is also the initial state that:
- does not display the top yellow DIV
- jumps straight to the pink DIV but
- allows the scroll bar to scroll back up to the page top and reveal the yellow DIV

Secondly: the three yellow, pink and aqua links jump to their relevant DIV

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.