Solved

what my div doing behind the select box..

Posted on 2007-11-26
24
370 Views
Last Modified: 2012-06-27
after long search of my div box on my screen i found it behind the select box...
what sould i do in order ot take it in front the select box?
<div id="res" style="cursor:progress;background:#828282;border:1px solid;position:absolute;left:210px;width:200px; top:290px;display:none">

<div id="data" style="float:left;width:100%"></div>

<div style="float:right" onclick="$('res').style.display = 'none'">X</div>

</div>

Open in new window

0
Comment
Question by:sasha85
  • 12
  • 9
  • 2
  • +1
24 Comments
 
LVL 7

Expert Comment

by:bdichiara
ID: 20353920
There's only one trick I have found to bring any element above a select box. That's using an iframe. It's rather messy. Take a look here:

http://dotnetjunkies.com/WebLog/jking/archive/category/139.aspx
0
 
LVL 5

Expert Comment

by:arunrs
ID: 20354007
For firefox, you can use the style's "z-index" attribute to set a higher value for the div and for IE, you can use an iFrame instead of div with the height and width the same as that used for div.

Hope this is useful.
arunrs
0
 

Author Comment

by:sasha85
ID: 20354379
the iframe way working on firefox too?
can you exaplain hoe this way goes...i didn;t find any coding or examples on the link...
0
 
LVL 7

Expert Comment

by:bdichiara
ID: 20354545
it should work for both. This is the example of something i wrote a while back. It's all I have as far as examples, but if you need me to show you specifically how to do yours, i can.

http://www.jsvalidate.com/dev/jscombobox.php
0
 

Author Comment

by:sasha85
ID: 20354736
http://ilmc.brinkster.net/comersus/crm/divlect.htm
i still do not understand how the iframe can solve this...

this div got to be an image of windows alert...maybe i better insert into the div submit button, make it's width and size big like real alert and somhow decorate?

0
 

Author Comment

by:sasha85
ID: 20354751
nope...the button idea not good as well...the select box eating it too...
if your iframe idea will work that will be wonderful!:)
0
 
LVL 17

Expert Comment

by:gops1
ID: 20355250
Here is something with Iframe that you can try:
<html>

      <head>

            <title>Script Demo Gops</title>

			<script type="text/javascript">

				function showmenu(obj){
 

					obj.style.display="inline";

					IfrRef.style.left=getposOffset(obj, "left")+"px";

					IfrRef.style.top=getposOffset(obj, "top")+"px";
 

					IfrRef.style.width=obj.offsetWidth;

					IfrRef.style.height=obj.offsetHeight;

					IfrRef.style.zIndex=obj.style.zIndex - 1;

					IfrRef.style.display="inline";
 

				}
 
 

				function getposOffset(what, offsettype){

					var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

					var parentEl=what.offsetParent;

					while (parentEl!=null){

						totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

						parentEl=parentEl.offsetParent;

					}

					return totaloffset;

				}
 

				var IfrRef=null;

				window.onload=function(){

					var ifrm=document.createElement('iframe');

					ifrm.style.position='absolute';

					ifrm.style.display="none";

					ifrm.id='divs';

					ifrm.backgroundColor='transparent';

					var bod=document.getElementsByTagName('body')[0].appendChild(ifrm);

					IfrRef=document.getElementById('divs');

				}

			</script>

      </head>

<body>

	<div id="res" style="cursor:progress;background:#828282;border:1px solid;position:absolute;width:200px;display:none">

		<div id="data" style="float:left;width:100%"></div>

		<div style="float:right" onclick="$('res').style.display = 'none'">X</div>

	</div>

	<select>

		<option>Opt 1</option>

		<option>Opt 1</option>

		<option>Opt 1</option>

	</select>

	<br><br><br><br>

	<a href="#" onclick="showmenu(document.getElementById('res'))">Show Menu</a>

</body>

</html>

Open in new window

0
 

Author Comment

by:sasha85
ID: 20355317
http://ilmc.brinkster.net/comersus/crm/divlect1.htm
it acting the same...i see the div behind the select box
0
 
LVL 17

Expert Comment

by:gops1
ID: 20355339
Did you try the code I have given
0
 

Author Comment

by:sasha85
ID: 20355513
0
 
LVL 17

Expert Comment

by:gops1
ID: 20356177
oh I forgot to give the zIndex. Here is it again. Test it.
<html>

      <head>

            <title>Script Demo Gops</title>

			<script type="text/javascript">

				function showmenu(obj){
 

					obj.style.display="inline";

					obj.style.zIndex="1000";

					IfrRef.style.left=getposOffset(obj, "left")+"px";

					IfrRef.style.top=getposOffset(obj, "top")+"px";
 

					IfrRef.style.width=obj.offsetWidth;

					IfrRef.style.height=obj.offsetHeight;

					IfrRef.style.zIndex=obj.style.zIndex - 1;

					IfrRef.style.display="inline";
 

				}
 
 

				function getposOffset(what, offsettype){

					var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

					var parentEl=what.offsetParent;

					while (parentEl!=null){

						totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

						parentEl=parentEl.offsetParent;

					}

					return totaloffset;

				}
 

				var IfrRef=null;

				window.onload=function(){

					var ifrm=document.createElement('iframe');

					ifrm.style.position='absolute';

					ifrm.style.display="none";

					ifrm.id='divs';

					ifrm.backgroundColor='transparent';

					var bod=document.getElementsByTagName('body')[0].appendChild(ifrm);

					IfrRef=document.getElementById('divs');

				}

			</script>

      </head>

<body>

	<div id="res" style="cursor:progress;background:#828282;border:1px solid;position:absolute;width:200px;display:none">

		<div id="data" style="float:left;width:100%"></div>

		<div style="float:right" onclick="$('res').style.display = 'none'">X</div>

	</div>

	<select>

		<option>Opt 1</option>

		<option>Opt 1</option>

		<option>Opt 1</option>

	</select>

	<br><br><br><br>

	<a href="#" onclick="showmenu(document.getElementById('res'))">Show Menu</a>

</body>

</html>

Open in new window

0
 

Author Comment

by:sasha85
ID: 20357143
the script realy works!:)
but i having truble with fiting it to my original code(ajax)

do you see any way to use here
showmenu(document.getElementById('res'))
?


set page = new AjaxedPage

page.draw() 
 

sub init() : end sub 
 
 

sub callback(action) 

if not rstempj.EOF and action = "poll" and session("alertime")<>ptime then

session("alertime")=ptime

page.return(poll())

end if

end sub 
 
 
 

function poll()  

  poll = "<p align=center style='background-image: url(ajax\middlealertwin.jpg);color:#000000;font-size:20px;'>" & palert & "<br>" & ptime & "</p>"

end function
 
 
 

sub main() 

%> 

<script>  

var tId=""; // create global variable to hold the interval handler 

function pollDB() {

 /* call the server and when return, call the javascript function showResult with the result */   

ajaxed.callback('poll', showResult);

  

} 
 

function showResult(result) {    

$('res').style.display = 'block';

$('data').innerHTML = result; // put the result into the div with id="res"

}
 
 

// onLoad (or set the same in the page load asp thingy ) 

window.onload=function() { tId=setInterval('pollDB()',4500); 

}
 

</script> 
 
 

<div id="res" style="cursor:progress;border:0px solid;position:absolute;left:210px;width:295;top:290px;display:none">

<div id="data"></div>

<div style="float:center" onclick="$('res').style.display = 'none'">x</div></div>
 
 

<% end sub %>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:sasha85
ID: 20357167
this is how i call the script
window.onload=function() { tId=setInterval('pollDB()',4500);
}
*after 45000msec it going to pillDB that call to showResult that prints my div's

how can i use-
showmenu(document.getElementById('res'))
?

sorry i am very new with js:(
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357180
Lets go step by step.
Step 1 target onload function
// onLoad (or set the same in the page load asp thingy ) 

var IfrRef=null;

window.onload=function() { 

	tId=setInterval('pollDB()',4500); 

	var ifrm=document.createElement('iframe');

	ifrm.style.position='absolute';

	ifrm.style.display="none";

	ifrm.id='divs';

	ifrm.backgroundColor='transparent';

	var bod=document.getElementsByTagName('body')[0].appendChild(ifrm);

	IfrRef=document.getElementById('divs');	

}

Open in new window

0
 
LVL 17

Expert Comment

by:gops1
ID: 20357209
I guess you should call inside function showResult()
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357220
But I am not sure which DIV is overlapping is it "res" or "data"
0
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 20357233
this how it should be:
// onLoad (or set the same in the page load asp thingy ) 

var IfrRef=null;

window.onload=function() { 

	tId=setInterval('pollDB()',4500); 

	var ifrm=document.createElement('iframe');

	ifrm.style.position='absolute';

	ifrm.style.display="none";

	ifrm.id='divs';

	ifrm.backgroundColor='transparent';

	var bod=document.getElementsByTagName('body')[0].appendChild(ifrm);

	IfrRef=document.getElementById('divs');	

}
 
 

function pollDB() {

	 /* call the server and when return, call the javascript function showResult with the result */   

	ajaxed.callback('poll', showResult);

  

}
 

function showmenu(obj){

	obj.style.display="inline";

	obj.style.zIndex="1000";

	IfrRef.style.left=getposOffset(obj, "left")+"px";

	IfrRef.style.top=getposOffset(obj, "top")+"px";
 

	IfrRef.style.width=obj.offsetWidth;

	IfrRef.style.height=obj.offsetHeight;

	IfrRef.style.zIndex=obj.style.zIndex - 1;

	IfrRef.style.display="inline";
 

}
 
 

function getposOffset(what, offsettype){

	var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

	var parentEl=what.offsetParent;

	while (parentEl!=null){

		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

		parentEl=parentEl.offsetParent;

	}

	return totaloffset;

}
 
 

function showResult(result) {    

	

	//$('res').style.display = 'block'; // Commenting this line

	showmenu($('res'));

	$('data').innerHTML = result; // put the result into the div with id="res"

}

Open in new window

0
 
LVL 17

Expert Comment

by:gops1
ID: 20357242
I have only organized the javascript functions. So add other required codes that I have missed out.
0
 

Author Comment

by:sasha85
ID: 20357387
there is a good news and a bad news:)
it's kind of funny...you have to see it for yourself:)
http://ilmc.brinkster.net/comersus/crm/gops.asp
it works with session so you will may be see it only once...
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357445
ok which function is hiding the DIV? In the same function you need to add this line:
IfrRef.style.display="none";
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357479
I guess here:

<div style="float:center" onclick="$('res').style.display = 'none';IfrRef.style.display='none';"><center><INPUT TYPE="submit" VALUE="OK"></div>
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357747
How is it doing now?
0
 

Author Comment

by:sasha85
ID: 20357920
gops, i think that there need to be a gops street in every country...:)
0
 
LVL 17

Expert Comment

by:gops1
ID: 20357937
I am glad and Thanks for the compliment
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

920 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

15 Experts available now in Live!

Get 1:1 Help Now