z-index, layers, onclick and getElementById

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rolfjb
    New Member
    • Sep 2009
    • 3
    #1

    z-index, layers, onclick and getElementById

    Friends,

    Thanks for being here! I am pretty new to all this ...

    I want to avoid people having to scroll on my website to see the content.

    Therefore I am using 4 layers overlapping each other so you can see all "pages".

    I am trying to use onclick to change the z-index value of the clicked layer to be the highest so it moves to the top and can be read (and setting the other pages z-index to lower values of course).

    Here is an example:
    <div id="layer1" onclick"documen t.getElementByI d('layer1').sty le.zindex='20'" </div>.

    Nothing happens when I click - or at least not what I expected ...:)

    I think I am doing something wrong in <script> but I don't get it.

    Anyone with a good example or a better way to do it?

    Grateful for your suggestions!

    Best wishes
    Tags: getelementbyid, onclick, z-index onclick, zindex
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      in case the divs are fully overlapping then the div that lays 'above' all others intercept the event ... you should show an example or explain a bit more what you would expect the clicks to do ...

      kind regards

        Comment

        • rolfjb
          New Member
          • Sep 2009
          • 3
          #3
          More info on z-index

          Thanks for replying - I really appreciate it!

          Here is the whole example I found in a book:

          Code:
          <HTML>
<HEAD>
<STYLE type="Text/css">
	#layer1 {
	position: absolute;
	top:	50px;
	left:	50px;
	width: 200px;
	height: 100px;
	z-index: 0;
	background-color:red}
	#layer2 {
	position: absolute;
	top:	75px;
	left:	90px;
	width: 150px;
	height: 100px;
	z-index: 10;
	background-color:yellow}
</STYLE>
</HEAD>
<BODY>
	<div id="layer1" onClick="document.getElementById('layer1').style.zindex='20'"></DIV>
	<div id="layer2" onClick="document.getElementById('layer1').style.zindex='0'"></DIV>
</BODY>
</HTML>
          It displays the two layers correctly as such.

          What I expected to happen is that the red layer would come onto the top when I click on it and vice versa.

          This is of course just an example. I would have text within the layers for the visitor to read so the layers would naturally be larger.

          The idea is to avoid having to scroll at all.

          I would also like to use more than two layers - at least five.

          However, it does not seem to work as explained in the book ...:) I have checked it a dozen of times to make sure I copied it correctly but but ...who knows ...

          I hope this clarifies it! Please let me know if more info is needed.

          Best wishes
          Rolf
          Last edited by Dormilich; Sep 16 '09, 09:24 AM. Reason: Please use [code] tags when posting code

            Comment

            • rolfjb
              New Member
              • Sep 2009
              • 3
              #4
              I am very sorry that I did not use [code] - I am new here and I missed that. I will look for an example.

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  Two quick points:
                  1. It's zIndex, not zindex (notice the capital "i"). The dash is converted to camel-case, so z-index becomes zIndex.
                  2. z-indexes are numbers.

                    Comment

                    • Frinavale
                      Recognized Expert Expert
                      • Oct 2006
                      • 9749
                      #6
                      Just to clarify acoder's second point...the numbers should not have quotes around them (they should not be '2') instead they should just be numbers.

                        Comment

                        Previous template Next
                        Working...