Help needed with a website effect

[ThaSpYz]

Hi,
The problem I am having is here:

http://www.thaspy.com/lobby.php?lobby=hostonly&pagetitle=Host%20Only%20Maps

If you click the Info buttons on that page, you will notice it pops up a box with more information. But if you click the Info buttons near the bottom of the list, you will see it opens under the iframe below. Basically the javascript popup is staying in its frame, but I want it to open on top of the entire website no matter what. I'll post part of the code, although its looped many times for the amount of items in the list, so I'll just post one loop, if that makes any sense.


<script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX-2
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+11
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>

<script language="JavaScript1.2">
var menu8=new Array()
menu8[0]='<div width="100%" style="background:url(images/info_blue_bg.gif);padding=0;spacing=0;"><img src="images/info_top_bg.gif"><div style="padding:5"><font size="1" face="Verdana" color="#FFFFFF">Totally redone CSL map. Tons of fun! Also found in the Variety Pack.</font></div><img src="images/info_host.gif"><div width="100%" style="background:url(images/info_black_bg.gif);padding=0;spacing=0;"><img src="images/spacer.gif" width="8" height="1"><img src="images/ping4.gif"><font color="#CBCBCB" face="Verdana" size="1">thaspy.com<br><img src="images/info_players.gif"><br><img src="images/spacer.gif" width="8" height="1"><img src="images/ping4.gif">_ThaSpY__<br><br></font></div><img src="images/info_bottom_bg.gif"></div><br>'
</script>



<ilayer height=35px><layer visibility=show><span class=iewrap1><span class=iewrap2 onClick="dropit2(dropmenu8);event.cancelBubble=true;return false"><a onClick="if(document.layers) return dropit(event, 'document.dropmenu8')" onmouseover="document.images['info_8'].src='images/info_hover.gif'" onmouseout="document.images['info_8'].src='images/info_up.gif'" onmouseup="document.images['info_8'].src='images/info_hover.gif'" onmousedown="document.images['info_8'].src='images/info_down.gif'" style="cursor: default;"><img border="0" src="images/info_up.gif" width="26" height="13" name="info_8" align="top"></a></span></span></layer></ilayer>


<div id=dropmenu8 style="position:absolute;left:0;top:0;width=148;visibility:hidden;border:0px solid #333333;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu8.style.padding="0px"
for (i=0;i<menu8.length;i++)

document.write(menu8[i])

</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu8.captureEvents(Event.CLICK)
document.dropmenu8.onclick=hidemenu2
}
</script>


Most of this code is looped for how many items are on the list. View source of the page for exact. Well the solution here could be really simple, if so, I'd love an answer. If my solution is miles away, then I guess you can ignore this post. Thanks!

[pixelmech]

Hello,

You stated yourself the problem: The window you are popping up with the info is in that particular frame, so it will only ever show in that frame. Regardless of what frame it is in, you will have that problem. Frames can be a pain.

You could check and see where on the list the user clicked. If the user clicked on say the last 10 items, then you shift that info window up. It shouldn't be too hard, I think you know how many names you have at runtime. If you have 30, when a user clicks 20 or higher adjust your script with an extra block to kick the window up.

On a side now, you have a LOT of code bloat on that page that could be removed.

You don't need to constantly repeat the <script language="JavaScript1.2"> blocks. Just wrap ALL your JS in that page in ONE script block.

Secondly, you have all this local style code in EVERY SINGLE item! This is an incredible waste of space! Use CSS to your advantage. This will make your JavaScript code easier to read and maintain as well, believe me. FONT tags have gone the way of the dodo as well.

You could easily change this:


menu11[0]='<div width="100%" style="background:url(images/info_blue_bg.gif);padding=0;spacing=0;"><img src="images/info_top_bg.gif"><div style="padding:5"><font size="1" face="Verdana" color="#FFFFFF">No description.</font></div><img src="images/info_host.gif"><div width="100%" style="background:url(images/info_black_bg.gif);padding=0;spacing=0;"><img src="images/spacer.gif" width="8" height="1"><img src="images/ping4.gif"><font color="#CBCBCB" face="Verdana" size="1">thaspy.com<br><img src="images/info_players.gif"><br><img src="images/spacer.gif" width="8" height="1"><br><br></font></div><img src="images/info_bottom_bg.gif"></div><br>';


into this


.classNameHere {
width: 100%;
background:url(images/info_blue_bg.gif);
padding: 0;
margin: 0; }

.popHeader {
font-family: verdana, sans-serif;
font-size: 10px;
color: #fff; }

.anotherClass {
width: 100%;
background:url(images/info_black_bg.gif);
padding: 0;
margin: 0; }

menu11[0]='<div class="classNameHere"><img src="images/info_top_bg.gif"><div class="popHeader">No description.</div><img src="images/info_host.gif"><div class="anotherClass"><img src="images/spacer.gif" width="8" height="1"><img src="images/ping4.gif"><span class="spy">thaspy.com</span><br><img src="images/info_players.gif"><br><img src="images/spacer.gif" width="8" height="1"><br><br></div><img src="images/info_bottom_bg.gif"></div><br>';


And with some work, you SHOULD be able to get rid of ALL your spacer gifs and BR tags, which will help more. This is a busy page and a quicker page will make your customers happy :)

Sorry a bit off track, but this stuff actually helps you code your JS. It's hard to figure stuff out when you have so much presentational code mixed in with your markup.

HTH

Tom