ansaurus

Question

Answer 1

A:

you can have an element down at the bottom of the page

<div id="extraDiv" style="display:none"> some extra stuff </div>

and using javascript, do a

document.getElementById("extraDiv").style.display = "block";

to make the page longer. If you want animation, then you can use jQuery, scriptaculous, or other javascript libraries.

動靜能量 2009-06-06 08:54:50

Answer 2

A:

You could use jQuery to accomplish this, which would have the cool scroll rather than it just popping up. Have you're main content in a div, then the content you want to show in a hidden div, like:

<div>Main Content</div>
<div id="hiddenLab" style="display:none">Content to show</div>

You would then use the jQuery slideToggle command to slide it up and down, something like:

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     $(function() {
      $("#hidden").click(function(){
       $("#about").slideToggle("slow");
      });
     });  
    </script>
    <style type="text/css">
     #maincontent { width:100%; height:100px;background:green} 
     #about { width:100%; height:1000px;display:none;background:red;} 
    </style>
</head>
<body>
    <div id="maincontent">
     <a id="hidden" href="#">Click to see hidden</a> 
    </div> 
    <div id="about">Content to show</div> 
</body>

Fermin 2009-06-06 08:58:26

Where the the jQuery command go?In the CSS file or HTML?

Keiron Lowe 2009-06-06 09:18:36

The jQuery command goes inside your Javascript. jQuery is just a javascript library. To get the above code to run add an element (image, link etc) with an id="earthWorm", the above code will fire on the click of that element.Check out these videos (http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/) for a quick overview of jQuery if you're interested, it's real easy to learn and you can do some real nice things with it.

Fermin 2009-06-06 09:36:08

I cant get this to work.The Script is: <script type="application/javascript">$("hidden").click(){$("about").slideToggle("slow";});</script>The HTML is:<body><div id="maincontent"><center><br /><a href="index.html"><img src="Keiron Lowe.png" alt="Keiron Lowe"/></a><img src="Keiron Lowe.png" id="hidden" /><br /><br /><img src="Seperator.png"/></div><div id="about" style="display:none">Content to show</div></body>And the CSS is: #maincontent {width:auto;height:1000px;}#about {width:auto;height:1000px;}help?

Keiron Lowe 2009-06-06 13:11:13

Have you included the jQuery .js file?

Fermin 2009-06-06 15:39:10

Re-read your code there, try $("about").slideToggle("slow"); not $("about").slideToggle("slow"; }); or even try putting in an alert() to see if the click code is firing.

Fermin 2009-06-06 15:47:05

Nahh Still Not Working HTML And Script.: <script type="text/javascript" src="jQuery.js" /><script type="application/javascript"> $("hidden").click(){ $("about").slideToggle("slow"); </script></head><body> <div id="maincontent"> <center><br /> <a href="index.html"><img src="Keiron Lowe.png" alt="Keiron Lowe"/></a><img src="Keiron Lowe.png" id="hidden" /><br /> <br /> <img src="Seperator.png"/> </div> <div id="about" style="display:none">Content to show</div> CSS:#maincontent {width:100%;height:100%;}#about {width:auto; height:1000px; }

Keiron Lowe 2009-06-06 19:21:40

Thanks that worked perfectly!

Keiron Lowe 2009-06-07 20:43:30

You can hit the tick under the answer to mark it as correct!

Fermin 2009-06-07 22:46:11

ansaurus

tags:

views:

answers:

Increasing Page Height With Javascript.

related questions