Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Dynamic Layer Priority

Posted on 2006-10-25
19
Medium Priority
?
481 Views
Last Modified: 2008-03-04
Hello,

Ok, so lets say I have 2 div's with absolute postions set... they overlap each other. When one gets focus I want it to come to the front, and if you click the other, it comes to the front..... Any ideas how to do this?

Thanks,
Josh
0
Comment
Question by:JoshWegener
  • 8
  • 8
  • 2
  • +1
19 Comments
 
LVL 6

Assisted Solution

by:sodalitas
sodalitas earned 400 total points
ID: 17804483
How do they get focus?  by clicking on them?

First thing that comes to mind is have the onlclick event call a function which changes the div's style, so something like this (off the top of my head so may not work right off the bat):

<DIV class="blah" ID="div1" STYLE="z-index: 3" onclick="javascript:bringtofront("div1");"></DIV>
<DIV class="blah2" ID="div2" STYLE="z-index: 2" onclick="javascript:bringtofront("div2");"></DIV>

<script lang=Javascript>
function bringtofront(obj) {
  if (obj == "div1") {
    document.getElementById("div1").style = "z-index:2";
    document.getElementById("div2").obj.style = "z-index:3";
  } else {
    document.getElementById("div1").style = "z-index:3";
    document.getElementById("div2").obj.style = "z-index:2";
  }
}
</script>
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17804648
Humm, I need somthing more Dynamic.... because the DIVs are Dynamicly created, and there might be any where from 1 to x on the screen.
0
 
LVL 6

Expert Comment

by:davbouchard
ID: 17805104
Depending on the language it changes but, you need a function that loops thru each control with an Index higher than the div you clicked and reduce all of them by 1 and then set the one clicked to 1.

It can be done with both PHP and ASP but if you want a more specific answer, please provide your language and in which way to you generate your elements.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:JoshWegener
ID: 17805442
JavaScript... the page will be in PHP, but I do not want the screen to refresh....
0
 
LVL 6

Assisted Solution

by:davbouchard
davbouchard earned 400 total points
ID: 17813521
What I meant was that you should create the JS from the PHP code and make it dependent on the amount of divs.

Something that would look like this, not exactly sure if syntax is correct :

<?php
$NbrDivs = GetDivNbr(); //Let's assume this returns an array of 1 = "Content1", 2 = "Content2"

echo "<script type='text/javascript'>
function bringtofront(obj) {
";
foreach($NbrDivs as $Div -> $Content){
echo  "document.getElementById('div$Div').style.zindex = document.getElementById('div$Div').style.zindex - 1;
";
}
echo "document.getElementById(obj).style.zindex = 1;}
</script>";
 ?>

<?
foreach($NbrDivs as $Div -> $Content){
echo "<div id='$Div' onclick='bringtofront(\"$Div\")' >$Content</div>" ;
}
?>
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17813914
That is the problem, the divs are created on the fly (no page refresh). Is there a way in JavaScript to loop through all of the DIV elements?
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17814151
yes
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17815522
Ok... well how?
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17817655
something like this:

var divElems = document.getElementsByTagName('div');

for (var i=0;i<divElems.length;i++)
{
   // add your nessessary code here as i dont knwo what your wanting to do...
}

ellandrd
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17819496
ellandrd -> What I am trying to do is, have a function that loops thru each div and add 1 to its z-index. then set the div that was clicked on to 1 (bring it to the front)
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17819761
OK i see what you mean and after reading over your question again, you can't set focus to a div element. There is no .focus method for a div.

Focus is used for things you can "tab" between... i.e. links, buttons, textboxes.

however what do these div contain?  links or text even images might help...
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17819780
also an onclick event isnt available for a div either... sorry

im not sure how your going to be able to detect a click or mouse down press for a div?
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17819837
sorry i was wrong - div does have a onclick event...  im trying to put together an exmaple for you - click ona div it comes ot focus...

give me a few mins...


ellandrd
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17819901
I have a fix for the DIV on click thing..

// table border = 1 so you can see the div for the test.
<DIV>
  <table onClick="alert('div onClick')" width="100%" height="100%" border=1>
    <TR>
      <TD>
        // Stuff in div goes here
      </TD>
    </TR>
  </table>
</DIV
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17819909
Just read your post, cool, I will be waiting :)
0
 
LVL 16

Accepted Solution

by:
ellandrd earned 1200 total points
ID: 17820036
see ive found this but cant get it to work...

http://www.thescripts.com/forum/thread150522.html


here's my code...


<script type="text/javascript">
<!--
function bringtofront(elem)
{
      var topDiv = 2;
      var bottomDiv = 1;
      
      if(document.getElementById(elem).id == 'div1')
      {
            document.getElementById('div1').style.zIndex = topDiv;
            document.getElementById('div2').style.zIndex = bottomDiv;
      }
      else
      {
            document.getElementById('div1').style.zIndex = bottomDiv;
            document.getElementById('div2').style.zindex = topDiv;
      }
}
//-->
</script>

<div id="div1" style="position:absolute;top:100px;left:100px;z-index:1;background:red;width:200px;height:200px;" onclick="javascript:bringtofront('div1');">
      <p>this is a div A</p>
</div>
<div id="div2" style="position:absolute;top:200px;left:200px;z-index:2;background:blue;width:200px;height:200px;" onclick="javascript:bringtofront('div2');">
      <p>this is my div B</p>
</div>
0
 
LVL 1

Author Comment

by:JoshWegener
ID: 17820179
I got it!!
---------------------------------
<script type="text/javascript">
<!--
function bringtofront(elem)
{
  var topDiv = 2;
  var bottomDiv = 1;
  var divElems = document.getElementsByTagName('div');
 
  for (var i=0;i<divElems.length;i++)
  {
    if(divElems[i].id == elem)
      divElems[i].style.zIndex = 1000;
    else
      divElems[i].style.zIndex = divElems[i].style.zIndex - 1;
  }
}
//-->
</script>


<div id="div1" style="position:absolute;top:100px;left:100px;z-index:1000;background:red;width:200px;height:200px;" onclick="javascript:bringtofront('div1');">
     <p>this is a div A</p>
</div>
<div id="div2" style="position:absolute;top:200px;left:200px;z-index:1000;background:blue;width:200px;height:200px;" onclick="javascript:bringtofront('div2');">
     <p>this is my div B</p>
</div>
<div id="div3" style="position:absolute;top:150px;left:150px;z-index:1000;background:yellow;width:200px;height:200px;" onclick="javascript:bringtofront('div3');">
     <p>this is my div B</p>
</div>
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17822397
i see my code helped you figure it out!!  brillant - im glad you got it.

ellandrd ;-)
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 17852062
thanks for splitting the points...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question