View Full Version : Why does just the title comes up?

01-21-2011, 02:45 AM
I want to add the script on this page:

to my test page at, http://www.web-user.net/test/1/test2.html.But as you see it does not work.

The sliding panel also needs these two pages to work:


When I add the jkpanel.js
(<script type="text/javascript" src="jkpanel.js">) to my test page it shows just the title.There is nothing else.

What in the jkpanel.js is messing things up or is it something else going on



01-21-2011, 03:24 AM
a little bit confused here.
you want to add script from here:

to here

In test2.html you don't have content at all....:confused:

<p style="font-size: 110%;"><img style="float: left; margin: 0pt 10px 10px 0pt;" src="saturn.jpg">Saturn
is the sixth planet from the Sun and the second largest planet in the
Solar System, after Jupiter. Along with the planets Jupiter, Uranus, and
Neptune, it is classified as a gas giant (also known as a Jovian
planet, after the planet Jupiter). The planet Saturn is composed of
hydrogen, with small proportions of helium and trace elements.[10] The
interior consists of a small core of rock and ice, surrounded by a thick
layer of metallic hydrogen and a gaseous outer layer. The outer
atmosphere is generally bland in appearance, although long-lived
features can appear. Wind speeds on Saturn can reach 1,800 km/h,
significantly faster than those on Jupiter. Saturn has a planetary
magnetic field intermediate in strength between that of Earth and the
more powerful field around Jupiter.</p>

that is the code in the sliding content panel header, which is gone in test2.html

01-21-2011, 04:02 AM
files at the bottom.


BTW-test2.html is this page with the sliding panel added( supposedly)

01-21-2011, 06:05 AM
There could also be other problems but on test2.html there's no closing </script> tag here:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="jkpanel.js">
<style type="text/css">

#dropdownpanel{ /*Outermost Panel DIV*/ . . .

And there's none for the rest of the page. As a result, everything that follows that typo is considered a text node of that script tag whose actual script is external. In effect, it (the style, the closing </head> tag, and the entire body section) is ignored.

01-21-2011, 05:45 PM
Geez, John-that was too obvious for me to see.I looked that script over how many times and never saw that.


Now the panel comes down but is behind the three columns?

Why is that?

Is it something to do with the css positions?

I guess I will take this there now.

Thanks John.


01-21-2011, 07:07 PM
That's stacking. In your stylesheet, add the highlighted:

@import "layout.css";

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 100;

01-22-2011, 02:48 AM
That did the trick.

I never heard of stacking as to css....

Anyway,thanks again.


01-22-2011, 04:25 AM
The z-index property (stacking) can be a little hard to grasp at first and technically only applies when both elements involved have their position property set to something other than static (the default position property for elements with no position property set is static). However, often browser quirks and perhaps sometimes the css specification, extend z-index stacking to other situations, and never forget that position when not specified is inherited from the parent.

Generally though, when only one of the two elements involved has position other than static, the positioned element stacks on top.

There are at least a few of fine points to this. But the basic concept is a three dimensional coordinate system for all elements other than those with static positioning:

left (the property name) is the x-axis
top (the property name) is the y-axis
stacking is the z-axis (the property name)

The default z-index when it applies is 0. Negative values are allowed, but this often places the element beneath the body, and so unseen. The higher z-index stacks on top of the lower one. When the z-indexes are equal, the first element is covered by the second one.