Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 483
  • 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
Technology Partners: 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!

 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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