Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 382
  • Last Modified:

what my div doing behind the select box..

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
sasha85
Asked:
sasha85
  • 12
  • 9
  • 2
  • +1
1 Solution
 
bdichiaraCommented:
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
 
arunrsCommented:
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
 
sasha85Author Commented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
bdichiaraCommented:
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
 
sasha85Author Commented:
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
 
sasha85Author Commented:
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
 
gops1Commented:
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
 
sasha85Author Commented:
http://ilmc.brinkster.net/comersus/crm/divlect1.htm
it acting the same...i see the div behind the select box
0
 
gops1Commented:
Did you try the code I have given
0
 
sasha85Author Commented:
0
 
gops1Commented:
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
 
sasha85Author Commented:
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
 
sasha85Author Commented:
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
 
gops1Commented:
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
 
gops1Commented:
I guess you should call inside function showResult()
0
 
gops1Commented:
But I am not sure which DIV is overlapping is it "res" or "data"
0
 
gops1Commented:
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
 
gops1Commented:
I have only organized the javascript functions. So add other required codes that I have missed out.
0
 
sasha85Author Commented:
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
 
gops1Commented:
ok which function is hiding the DIV? In the same function you need to add this line:
IfrRef.style.display="none";
0
 
gops1Commented:
I guess here:

<div style="float:center" onclick="$('res').style.display = 'none';IfrRef.style.display='none';"><center><INPUT TYPE="submit" VALUE="OK"></div>
0
 
gops1Commented:
How is it doing now?
0
 
sasha85Author Commented:
gops, i think that there need to be a gops street in every country...:)
0
 
gops1Commented:
I am glad and Thanks for the compliment
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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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