Why does just the title comes up?

[ajfmrf]

I want to add the script on this page:
http://www.web-user.net/test/1/test1.html

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:
http://www.web-user.net/test/1/jquery-1.2.2.pack.js
http://www.web-user.net/test/1/jquery-1.2.2.pack.txt

http://www.web-user.net/test/1/jkpanel.js
http://www.web-user.net/test/1/jkpanel.txt

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

Thanks,

Bud

[davelf]

a little bit confused here.
you want to add script from here:
http://www.web-user.net/test/1/test1.html

to here
http://www.web-user.net/test/1/test2.html

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

<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

[ajfmrf]

files at the bottom.

Here,http://www.web-user.net/test/1/jkpanel.js
http://www.web-user.net/test/1/jkpanel.txt

BTW-test2.html is this page with the sliding panel added( supposedly)
http://web-user.net/test/1/1.html

[jscheuer1]

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.

[ajfmrf]

Geez, John-that was too obvious for me to see.I looked that script over how many times and never saw that.

Sorry.

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.

Bud

[jscheuer1]

That's stacking. In your stylesheet, add the highlighted:

@import "layout.css";

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

[ajfmrf]

That did the trick.

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


Anyway,thanks again.

Bud

[jscheuer1]

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.