• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 488
  • Last Modified:

CSS Dynamic Layer Priority

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
JoshWegener
Asked:
JoshWegener
  • 8
  • 8
  • 2
  • +1
3 Solutions
 
sodalitasCommented:
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
 
JoshWegenerAuthor Commented:
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
 
davbouchardCommented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
JoshWegenerAuthor Commented:
JavaScript... the page will be in PHP, but I do not want the screen to refresh....
0
 
davbouchardCommented:
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
 
JoshWegenerAuthor Commented:
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
 
ellandrdCommented:
yes
0
 
JoshWegenerAuthor Commented:
Ok... well how?
0
 
ellandrdCommented:
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
 
JoshWegenerAuthor Commented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
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
 
JoshWegenerAuthor Commented:
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
 
JoshWegenerAuthor Commented:
Just read your post, cool, I will be waiting :)
0
 
ellandrdCommented:
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
 
JoshWegenerAuthor Commented:
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
 
ellandrdCommented:
i see my code helped you figure it out!!  brillant - im glad you got it.

ellandrd ;-)
0
 
ellandrdCommented:
thanks for splitting the points...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 8
  • 8
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now