Solved

CSS Dynamic Layer Priority

Posted on 2006-10-25
19
425 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 100 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
 
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 100 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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 300 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.

757 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now