Solved

CSS Dynamic Layer Priority

Posted on 2006-10-25
19
466 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 103
Display if field is NOT "" or NOT null 6 37
compare date to getdate() 8 34
In wordpress, how did they do that? 3 15
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
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:
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

751 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