PDA

Click to See Complete Forum and Search --> : How do you make a DIV appear/lay over frames?

DoyleRules
05-21-2003, 02:05 PM
I'm having problems trying to get a DIV to appear above/below the frame it is coded in, or to appear between two frames. Any ideas? ...yes, I have a specific reason for doing this, ...otherwise I would just code the DIV into the other frame.

Thanks,
<--=MikeDoyle=--<<
Jona
05-21-2003, 02:12 PM
You mean....

Left frame:


<script type="text/javascript">
<!--
function changeDIV(info){
parent.rightFrame.document.getElementById("myDIV").innerHTML=info;
}
//-->
</script>


Right frame:


<div id="myDIV">
Hello, this is text.
</div><br>
<input type="button" value="Change" onClick="parent.changeDIV('OK, this is some new text.');">
khalidali63
05-21-2003, 04:27 PM
If you mean you want the div to overlap a frame?
that you can not do.Its the limitation or restriction which html model impses on the way certain html elements prioritised for display.
What you can do is use newer browsers (NS6+ ,IE6+ and opera 7+)
and use IFrame...
DoyleRules
05-22-2003, 12:16 PM
khalidali63,
that's what I suspected. I thought I had read this in several places that this could not be done due to security, but I saw that Microsoft had over come this with the following script. ...But this script doesn't seem to work well when trying to impliment some other scripts within the popup DIV. Check it out! It really does allow you to position a Layer/DIV over frames over the border of the window, form elements and everything...it's pretty sweet:

<script>
var oPopup = window.createPopup();
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
</script>
<span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span>

<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>

....anyone have an idea on how I could impliment the following script, with the above script?:

<script type="text/javascript">
function colorPicker() {
if ("TD"==event.srcElement.tagName)
if (document.all.Text.contains(event.srcElement))
document.getElementById("myBody").style.color = event.srcElement.bgColor
}
</script>
<body>
<DIV id="myBody">This is a test.</DIV>
<TABLE onClick="colorPicker()" BORDER=1 cellpadding="0" cellspacing="0" bgcolor="#000000" ID="Text">
<TR>
<TD WIDTH="10" HEIGHT="10" BGCOLOR=#000000></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR=#FFFFFF></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR=#0000FF></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="green"></TD>
</TR></TABLE>

Thanks guys,
DoyleRules
05-22-2003, 02:03 PM
Hey Dave Clark or khalidali63,
is it possible to change a threads Title, so that it is different in the list of threads than it originally was?

Thanks,
khalidali63
05-22-2003, 03:04 PM
Originally posted by DoyleRules

....anyone have an idea on how I could impliment the following script, with the above script?:


Can you please be more specific,the code sample you have shows a tool tip where as the code you want ot be fixed has 3 color blocks,what kind of implementation are you talking about between the 2..

for thread title change,let me ask some one ,I have never needed to try it.
DoyleRules
05-22-2003, 06:23 PM
Ok, this is exactly what I am trying... when the two functions are by themselves, they both work great. But, when you place both of them within the same javascript tag, the page gives an error:


<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<script type="text/javascript">
var oPopup = window.createPopup();
function richToolTip(){
var lefter = event.offsetY-55;
var topper = event.offsetX-15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 230, 40, ttip);
}
function colorPicker(){
if ("TD"==event.srcElement.tagName)
if (document.all.Text.contains(event.srcElement))
document.getElementById("myBody").style.color = event.srcElement.bgColor
}
</script>
</HEAD>
<BODY>
<DIV id="myBody">This is the text that should change color.</DIV>
<br>
<br>
<br>
<br>
<DIV align="center">
<input type="button" id="ttip" value="Click Me" onClick="richToolTip()">
</DIV>
<DIV id="oToolTip" style="border:2px black outset;background-color:#999999;position:absolute">
<TABLE><TR><TD>CLICK A COLOR BELOW</TD></TR></TABLE>
<TABLE onClick="colorPicker()" BORDER=1 cellpadding="0" cellspacing="0" bgcolor="#000000" ID="Text">
<TR>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="black"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="red"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="blue"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="green"></TD>
</TR></TABLE>
</DIV>
</BODY>
</HTML>


Thanks again for your help,
pyro
05-22-2003, 06:45 PM
Originally posted by DoyleRules
Hey Dave Clark or khalidali63,
is it possible to change a threads Title, so that it is different in the list of threads than it originally was?

Thanks, Can I answer? :p

What you do is edit your original post (ie. first post in thread). There will be an option at the top to change the thread title.

Hope that helps...
khalidali63
05-22-2003, 10:44 PM
Hey Pyro,did you mean an option at the top
"Thread subject" or "thread title"
?
pyro
05-22-2003, 10:49 PM
Oops... my bad. You're right, that is just the Post Subject. I know we can swich the title, as mods, but I'm not sure if regular users can switch them. Hmm...
DoyleRules
05-23-2003, 09:09 AM
No biggie about the Thread Title, ...but um, back to my last post. So, how can I make that code work and not give an error message? Both functions work fine by themselves, but when you put both of them within the same <script> </script> tag, you get an error message from the browser, and it doesn't specify what the problem is. The code that I am trying to do is 4 posts before this one!

Thanks,
khalidali63
05-23-2003, 01:23 PM
Your code doesn't make sense to me( I could be under the dope influence ..*_*),
are you trying to get the color picker to appear in teh tool tip?
DoyleRules
05-23-2003, 03:46 PM
Yes, you'll notice, if you copy and paste the code, create the html document. ...There is a color picker in the bottom left corner of the screen. If you click on the colors, they change the color of the text above. There is a button in the middle of the page, that says "Click Me", ...when you click on it, it is supposed to make the color picker appear above the button, and still change the colors of the text when a color is clicked on. ...but it gives an error message.
DoyleRules
05-24-2003, 03:59 PM
I'm still having trouble, I've even taken the colorpicker function out of the main header script and put it in it's own seperate script right above the table. Still, it gives an undescriptive error about the script. Please help me, I have tried changing this every which way and cannot get past it.


<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<script type="text/javascript">
var oPopup = window.createPopup();
function richToolTip(){
var lefter = event.offsetY-55;
var topper = event.offsetX-16;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 230, 41, ttip);
}
</script>
</HEAD>
<BODY>
<DIV id="myBody">This is the text that should change color.</DIV>
<br>
<br>
<br>
<br>
<DIV align="center">
<input type="button" id="ttip" value="Click Me" onClick="richToolTip()">
</DIV>
<DIV id="oToolTip">
<DIV style="border:2px black outset;background-color:#999999;position:absolute">
<TABLE><TR><TD>CLICK A COLOR BELOW</TD></TR></TABLE>
<script type="text/javascript">
function colorPicker(){
if ("TD"==event.srcElement.tagName)
if (document.all.Text.contains(event.srcElement))
document.getElementById("myBody").style.color = event.srcElement.bgColor
}
</script>
<TABLE onClick="colorPicker()" BORDER=1 cellpadding="0" cellspacing="0" bgcolor="#000000" ID="Text">
<TR>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="black"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="red"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="blue"></TD>
<TD WIDTH="10" HEIGHT="10" BGCOLOR="green"></TD>
</TR></TABLE>
</DIV>
</DIV>
</BODY>
</HTML>


If possible, I would like to combine the popup colorpicker script with the position script below, ...I want to position the color picker so that it pops up above the button, in the same place all of the time with something to the effect of this:


<script type="text/javascript">
function positionDiv(){
var obj = document.getElementById("button");
var w = obj.offsetLeft;
var h = obj.offsetTop;
var divObj = document.getElementById("div_1");
var display = (divObj.style.visibility!="visible")?"visible":"hidden";
divObj.style.left = w - 0 + "px";
divObj.style.top = h - 122 + "px";
divObj.style.visibility=display;
}
window.onresize=positionDiv;
</script>


Thanks,
khalidali63
05-24-2003, 05:59 PM
holly cripes,you still have not found a solution..hunmm...

let me see..
khalidali63
05-24-2003, 06:10 PM
Originally posted by DoyleRules
khalidali63,
that's what I suspected.
............... but I saw that Microsoft had over come this with the following script.
Thanks guys,

Nope thats not overcoming a problem,
They have just used a new window,which by definition will be on top of any other element if in focus() anyways.

So in this situation I'd rather use window.open to make this work for most browsers.

Anyways I have not made it work for any other browser,hey its your solution right?..:p


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
My Title
</title>
<script type="text/javascript">
var oPopup = window.createPopup();
function richToolTip(){
var lefter = event.offsetY-10;
var topper = event.offsetX+40;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 230, 101, ttip);
}

function colorPicker(color){
document.getElementById("myBody").style.color = color;
}
</script>
</head>
<body>
<div id="myBody" style="text-align:center;font-weight:bold;">
This is the text that "will" change color.
</div>
<br/>
<div align="center">
<input type="button" id="ttip" value="Click Me" onclick="richToolTip()"> <br/>
<div id="oToolTip" onmouseout="oPopup.hide()" style="display:none;">
<div id="block" style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px">
<b>CLICK A COLOR BELOW</b>
<hr size="1" style="border:1px solid black;">
<table border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" id="Text">
<tr>
<td width="10" height="10" onclick="parent.colorPicker('black');" bgcolor="black">
</td>
<td width="10" height="10" onclick="parent.colorPicker('red');" bgcolor="red">
</td>
<td width="10" height="10" onclick="parent.colorPicker('blue');" bgcolor="blue">
</td>
<td width="10" height="10" onclick="parent.colorPicker('green');" bgcolor="green">
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>