Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"Popup" in frame too big

Status
Not open for further replies.
RWF

RWF

Programmer
Apr 16, 2001
24
US
I have a popup(not a window) that is too big to fit inside the navigation frame.

I have no control over the frame itself, only the popup.

Is it possible to "float" the popup outside the frame? If necessary, it would ok to have the popup appear in the main page assuming I could use absolute positioning.

Here is the code:
=================

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>Page title</title>

<style>
<!--

.menuskin{
position:absolute;
background-image:url(&quot;/legend/backgrounds/rdblkmrb.jpg&quot;);
border:1px solid black;
font:bold 16px Times;
line-height:18px;
z-index:100;
visibility:hidden;
}

.menuskin a{
text-decoration:none;
color:white;
padding-left:10px;
padding-right:10px;
}

#mouseoverstyle{
background-color:none;
}

#mouseoverstyle a{
color:#55FF55;
}
-->
</style>

<script language=&quot;JavaScript1.2&quot;>

//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit //This credit MUST stay intact for use

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<div class=&quot;menuitems&quot;><a href=&quot;i1.htm&quot;>Item 1</a></div>'
linkset[0]+='<div class=&quot;menuitems&quot;><a href=&quot;i2.htm&quot;>Item 2</a></div>'

var ie4=document.all&&navigator.userAgent.indexOf(&quot;Opera&quot;)==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById(&quot;popmenu&quot;) : ns4? document.popmenu : &quot;&quot;
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover=&quot;clearhidemenu()&quot; onmouseout=&quot;hidemenu()&quot;>'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility=&quot;visible&quot;
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? &quot;hidden&quot; : &quot;hide&quot;
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout(&quot;hidemenu()&quot;,500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className==&quot;menuitems&quot;){
source_el.id=(state==&quot;on&quot;)? &quot;mouseoverstyle&quot; : &quot;&quot;
}
else{
while(source_el.id!=&quot;popmenu&quot;){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className==&quot;menuitems&quot;){
source_el.id=(state==&quot;on&quot;)? &quot;mouseoverstyle&quot; : &quot;&quot;
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

</script></head>


<body>

<div id=&quot;popmenu&quot; class=&quot;menuskin&quot; onMouseover=&quot;clearhidemenu();highlightmenu(event,'on')&quot; onMouseout=&quot;highlightmenu(event,'off');dynamichide(event)&quot;>
</div>

<a href=&quot;#&quot; onMouseover=&quot;showmenu(event,linkset[0])&quot; onMouseout=&quot;delayhidemenu()&quot;>Strategy Menu</a><br>
</body>
</html>

Many Thanks in Advance!
 
Sort by date Sort by votes
It is impossible to have a div display outside its frame, or have a div span over frames. I'm sorry, if you're frame is too small you're either going to have to limit the size of your div (maybe put a scroll bar in?) or find some other way to display your menu.

cheyney
 
Upvote 0 Downvote
Of course not what I wanted to hear. Nonetheless, an excellent answer.

The response begs the question, is is necessary to have the div tag? And if not, would it then be possible to go outside the frame.

The contents of the frame are a series of anchors in one TD cell, nothing more.

Not familiar with Scroll bars, but I will investigate, and you have given me another idea also.

:)
 
Upvote 0 Downvote
the only html &quot;element&quot; (but its not even that) that i know of that can display outside/over frame boundaries is alternate text. This is like if you have <img alt=&quot;alt text&quot; src=....>, then when you hover over the image a little tool-tip label appears below your cursor to display the text. unfortunately you have little-to-no control over the appearance and functionality of these.

If you're desperate, you COULD pop up a small window (which you can control the size of) and use it as sort of a remote control, personally I hate that and think its dirty design. but if you're desperate... :)

another option, if you have control of the main frame, is to close the navigation frame and open another frameset in which you specify the size of the navigation frame..I don't know if you can/want to do this.

sorry i couldn't suggest more options, but if you're tight for space its hard to display a useful menu.

cheyney

 
Upvote 0 Downvote
Another bit of info.... If you use iframes instead, the divs can span over multiple iframes.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
118
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
314
xwb
xwb
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
104
ggriffit
ggriffit
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
617
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
203
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top