Pop-it Menu help with popup windows in links

[Strangeplant]

Hi, I hate to bother you hard working expert guys, but I need help. I need to use the DD Pop-it Menu found at http://www.dynamicdrive.com/dynamicindex1/popit.htm, which works great in combination with the DD Floating Menu Script found at http://www.dynamicdrive.com/dynamici...staticmenu.htm. I have gotten the Pop-it Menu to look very similar to the Floating Menu by adding tags inside the array (see below). But, I have a problem, one major and one minor that I need help with. The major issue is that the links in the Pop-it Menu are movie files (.avi) and I want to use a pop-up window so the user can keep reading while the movie(s) load(s). Well, I have some short old code for a pop-up window that I got from my son and I'm using this function elsewhere on the page, also with no problem. But, when I use the popup window call inside the Pop-it Menu links, I think the reference to the onClick of the Popup window is incorrect, and it doesn't function, instead acting like an ordinary link opening new content (actually replacing the main page.) The popup window code I'm using is this:

<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href,windowname,'width=350,height=290,left=350,top=250,resizable=yes');
return false;
}
//-->

and the call that works outside of the Pop-it Menu is this:

<p class="p2"><a href="http://earth.engr.ccny.cuny.edu/noaa/wc/IMGP1662.mov" onClick="return popup(this, 'indexpopup')">Movie of the MFR-7 Shadowband Radiometer in operation.</a></p>

and the call that doesn't work because of (I think) the onClick event, when used inside of the Pop-up Menu Script, is this:

var linkset=new Array()

linkset[0]='<font style class="mhd">'
linkset[0]+='&nbsp;TOTAL SKY MOVIES&nbsp;&nbsp;'
linkset[0]+='</font>'
//linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<font style class="mlk">'
linkset[0]+='<a href="http://earth.engr.ccny.cuny.edu/noaa/wc/TSIData/050426.avi" onClick="return popup(this, "indexpopup")">26-Apr-2005 14.5M</a>'
... etc.

I've tried changing 'this' to 'main' and 'menuobj' with no change, still overwrites the window.

The second minor problem is trying to get the background color of the the menu headers to look alike. The color doesn't fill the Popit Menu correctly leaving white space on the right header, and I'll link to a site when I get a working popup window mod to post.

[Strangeplant]

Hey guys, OK, I fixed it all. And I'm really impressed on how all the DD script pieces can work together in harmony. A great way to finish the week! http://www.dynamicdrive.com/forums/i...lies/smile.gif
I hope that someone in the future will benefit from my assembly.

1. I scrapped the popup function that I was using and substituted the one from DD Popup Window generator at http://www.dynamicdrive.com/dynamicindex8/popwin.htm.

2. The generated code was this:

<a href="http://earth.engr.ccny.cuny.edu/noaa/wc/TSIData/05" onclick="NewWindow(this.href,'tsipopup','320','450','no','center');return false" onfocus="this.blur()">YourLinkText</a>

Then I took this link code (which, BTW, was too short and truncated the link, so I edited it by hand. Someone should update this generator to fix the length issue, but it's not critical.) and imbeded it into the linkset array of the DD Popit Menu script found at http://www.dynamicdrive.com/dynamicindex1/popit.htm.

The key was to use the 'escape' character in the string because of the multiple quotes. ( just thought it would be worth a try from my Perl past.) I added the \ before each embeded ' inside the beginning and ending single quotes. So the modified linkset array in the Popit Menu became:

/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var defaultMenuWidth="206px" //set default menu width.

var linkset=new Array()

linkset[0]='<font style class="mhd">'
linkset[0]+='&nbsp;TOTAL SKY IMAGER MOVIES&nbsp;&nbsp;'
linkset[0]+='</font>'
//linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<font style class="mlk">'
linkset[0]+='<a href="http://earth.engr.ccny.cuny.edu/noaa/wc/TSIData/050426.avi" onclick="NewWindow(this.href,\'tsipopup\',\'320\',\'450\',\'no\',\'center\');return false" onfocus="this.blur()">26-Apr-2005 14.5M</a>'
~~~
snip
~~~
linkset[0]+='</font>'

This popup window works from the popit menu in all the browses that I tested.

[Strangeplant]

Script: DD Popit Menu
http://www.dynamicdrive.com/dynamicindex1/popit.htm and
Script: DD FLoating Menu
http://www.dynamicdrive.com/dynamici...staticmenu.htm

Ah, I'm not quite finished and I need your help because I can't fix this cosmetic problem. I need to make this Popit Menu look like my main menu, the DD Floating Menu. I can't color the background of the Popit Menu to fill completely like the Floating menu does. I applied a css to both and the background color only applies to the text and extra &nbsp. The code that I'm using to try to color it is in the last post (see linkset array) and the piece of the css sheet that applies to both is below. What can I do? Mad Professor, I'd really, really appreciate your help with this last little bit.

.mhd { /* menu header lines */
font-family: Verdana;
font-size: 10pt;
line-height: 12pt;
letter-spacing: 0;
text-align: left;
word-spacing: normal;
text-decoration: none;
color: #fff;
background-color: #808000; }

[Twey]

Change the background-color in the #popitmenu block of the stylesheet.

[Strangeplant]

Thanks Twey, but I already tried that in the css statement, and it has problems. What I want to achieve, is to match the design in the Floating Menu Script. There, two separate declarations are used, and I have taken this from the DD Floating Menu Script and maybe changed it a bit, but used it in both places. I had to use <font style class="mhd" because <p> and <div> make the Popit Menu title bar go whacky by white space padding above and below the title, and never could get background-color defined within the title without this. Is there another way to get it to work? You can see the best I have so far at: http://earth.engr.ccny.cuny.edu/noaa...ex31USA.html#8 then scrolling down to Sky Image Movies where the DD Popit Menu in invoked on mouseover. Other video format issues just came up when people were testing my work (ug, ugggg and Oh ___!), and I posted about that on the graphics forum. I'm hoping your fantastic insight will prevail.

.mhd { /* menu header lines */
font-family: Verdana;
font-size: 10pt;
line-height: 12pt;
letter-spacing: 0;
text-align: left;
word-spacing: normal;
text-decoration: none;
color: #fff;
background-color: #808000; }
.mlk { /* menu link lines */
font-family: Verdana;
font-size: 8pt;
line-height: 10pt;
letter-spacing: 0;
text-align: left;
text-decoration: none;
margin-left: 10px;
word-spacing: normal;
color: #808080; /* this is ignored as it is overwritten by the active link */
background-color: #fff;
}

[Twey]

I'm hoping your fantastic insight will prevail.

I'm hoping that's sarcasm.

but I already tried that in the css statement, and it has problems.

What problems, exactly? Changing #popitmenu's background-color did the trick for me; you did only want to change the colour of the heading, right?

[Strangeplant]

Yep, it worked for me too. I sure don't know what I was doing wrong when I went through that, but all is OK with the code now. Thanky, Twey for your insight, it was definately better that mine.

Now to figure out the avi format issues.......