popup window size

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

popup window size

Post by Wag »

Can the size of the popup be changed?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

Can the size of what pop up be changed? Are you talking about the submenus, or some window, i.e. new window?

Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

I'm refering to popups like this...

http://milonic.com/menusample91.php

What controls the size because it seems as I click around the US map, some of the popups vary in size.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

You would use the menuheight, menuwidth, itemheight, itemwidth properties to do that. Below my name you will find links to the different style, menu, item properties so you can see what can be applied where. I would assume they are different sizes because no size is specified so that they become as wide and as high as the text space / item numbers needed.

Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

Ruth, thaanks for your reply.

Another question about popup location in relation to where the cursor is when it opens the popup.
Right now the top of the popup is aligned with the cursor, can I make the bottom of the popup aligned with the cursor?
I'm refering to popups like this...

http://milonic.com/menusample91.php
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

http://milonic.com/menu_methods.php

You can set the top and left offsets in the popup call, so you would need to

1. get the width of the submenu - if you want to shift the left position
2. get the height of the submenu - to shift the top position
3. set the top and left offsets in the call, i.e.

Code: Select all

<area onMouseOver="popup('Washington',1,-220,1)"


Normally, the submenus open with the top left corner of the submenu at the mouse x/y coordinates, so the above code in the image map example sets the washington submenu to be at 1px to the right of the mouse and 220 pixels up from it [-220] making it look as if the bottom left corner of the submenu is at the mouse x/y coordinates.

Keep in mind that this is set from the mouse X/Y coordinates, so it will be from the position the mouse enters the mouseover area, this is not a 'fixed' position per se, it is 'fixed' as to where it is in relation to the mouse, not a fixed position on the 'map'.

You could also set a delay for it to open, i.e. 'washington',1,-220,1,null,500)

Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

Your a star Ruth, Thanks!

One last question for now.

Can 2 popups be called from one hotspot?

I tried these but no luck.

onMouseOver="popup('test',1,-220,1)" ('test2',1,-250,1)" onMouseOut="popdown()" shape="circle" coords="199,253,11">

onMouseOver="popup('test',1,-220,1 'test2',1,-250,1)" onMouseOut="popdown()" shape="circle" coords="199,253,11">
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

No, I don't think you can call two, however, if you tell me what you want, I bet I could figure a workaround so it looks like you are :)

Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

I'm refering to popups like this...

http://milonic.com/menusample91.php
I would like to simply double what pops up in the example.

One spot (state), 2 popups with with image and text. Has to include the submenu also.

or

If 2 images with text info can be seperated within 1 popup with the submenu included, that would probably work also.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

Since I don't know what you actually want I can only give you some information

1st, the 'popup' is actually a submenu. So, when you mouseover the image map you are opening a submenu, you're just doing it from an image map instead of an always visible main menu. You could also open it from a text link on a page, or some image someplace on the page. That's info just so when I give you some ideas we are both on the same page as to what's being discussed :)

2nd. You cannot open two submenus from one link.

3rd. There are properties in the menu so that you can use things like divide. So, let' say you created a 4 item horizontal submenu that opens on the pop up. You could use divides=2 and you would get item 1 and 2 on the top and 3 and 4 on the bottom. You could then put an image into 1 and 2 and text into 3 and 4, or you could put an image in 1 and 3 and text would be in 2 and 4, so the text would be either below each image or next to each image. You could set the image items to be headers which would keep the mouse from changing when placed on the images, and the text items could be regular and you could set a showmenu= to show a submenu from each of them.

Using the image map sample, could you tell me how you would want the menu to look and I could set something up for you to try.

Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

Hi Ruth
This is the best example I can give of what I want to happen.

Image


Go to the url below, and select COMPANY DIRECTORY, if you mouseover St Cloud, there is 2 images with info.
Right now they are stacked and you can only see one.
I would like them to be side by side so both show without scrolling.

http://www.godfathersexterminating.com/ ... athers.htm
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

OK, try this as your st cloud menu and the submenus that open off of it. It seemed fine in IE6, FF1.5 NN7.2 and 9, Safari 3

Code: Select all

with(milonic=new menuname("st cloud")){
margin=3;
style=MapSample;
orientation='horizontal';
divides=4;
aI("align=center;decoration=underline;fontsize=14px;fontweight=bold;text=Sam Pierskalla;type=header;");
aI("image=spacer.gif;itemwidth=10px;");
aI("align=center;decoration=underline;fontsize=14px;fontweight=bold;text=Jeron Winter;type=header;");
aI("align=center;image=Sam.jpg;imagepadding=5px;itemheight=50;type=header;");
aI("image=spacer;itemwidth=10px;");
aI("align=center;image=JeronBrainerd.jpg;itemheight=50;type=header;imagepadding=5px;");
aI("text=Area: St. Cloud<br>Phone: 320-259-5974<br>Toll Free: 800-317-5974<br>&nbsp;;padding=5px;type=header;");
aI("image=spacer.gif;itemwidth=10px;type=disabled;");
aI("text=Area: St Cloud West<br>Phone: 320-259-5974<br>Toll Free: 800-317-5974<br>&nbsp;;padding=5px;type=header;");
aI("showmenu=StCloudSubmenu;text=State License Info Here;padding=5px;");
aI("image=spacer.gif;itemwidth=10px;type=disabled;");
aI("showmenu=BrainerdSubmenu;text=State License Info Here;padding=5px;");
}

with(milonic=new menuname("StCloudSubmenu")){
style=MapSample;
top="offset=-50";
aI("itemwidth=195px;text=All Licenses;url=Licenses/Sam.pdf;target=_blank;");
}
with(milonic=new menuname("BrainerdSubmenu")){
style=MapSample;
top="offset=-50";
aI("itemwidth=195px;text=All Licenses;url=Licenses/Jeron.pdf;target=_blank;");
}
This took a little figuring mostly because I had to figure what you wanted in your layout. I'm going to go into detail here, so it will help others who want to do something like this with their setup.

1. You need to decide how you want it to look.
2. Once you do that, I suggest that you create items that just have a number in them and an offborder= code, so, aI number 1 would be text=1;offborder=2px solid red; and aI number2 would be text=2; offborder=2px dotted lime;and so on for however many items your layout required you to create.
3. Now, save the data file with just this main menu [in your case this is actually a submenu since you are opening it from a popup call, but it works the same] Now you have a menu that has items surrounded by different colored borders and you can set up the divides in that menu and view it and see if it will be what you want. How many divides? Will there be items that open submenus? If so, do you want the main menu to be a horizontal menu set to divide so that the submenus open directly below the item that is moused over? Anyway, this gives you a visual to work with for layout before you get to putting what you want in each item. So, taking your setup as an example.

1. You wanted the names, images, info and then license link for two people to each appear as if they were two separate menus opening side by side. This means you need two 'columns' and then you'd need x number of items, i.e. name, image, area, telephone, toll free #, link to submenu. That says you need 6 items on each side. However, since the area, telephone and toll free are just info that don't do anything like open submenus, it would be easier to put them all into one item using the html br code to start a new line for each information item, doing that it says you need 4 items on the left and 4 on the right.

2. Now, you need to consider things like, well, I don't want each 'column' to butt right up to the other one, so for design reasons it would be best if there were a 'spacer' column between the right and left, so that would mean you'd have 3 columns of 4 items, total of twelve items. You then create your menu, be it sub or main with the 12 aI strings in it.

3. Once this is done, you have to decide on what orientation you want, because that will decide the divides you need to use.
.....a. If the orientation is vertical, then the divides will be 3. If you use vertical, remember that any submenus that open from an item will open at the right of the item [or the left if the item is near the right hand side of the browser window. THis means that the item will open all the way right or left of the whole menu, all the columns. So, the left column item would open all the way to the total right of the last column, or if it's close to the browser right side of the window, then it would open where it looks like it is supposed to be just to the left of the left column item. If you know there is enough room for it to not be forced to the left, then using a vertical orientation parent menu is not a problem. You would just have add a left="offset=x number of px"; to that left column item that opens a sub. The x number of px being equal to the width of the parent item that opened it, so it would open just to the right of its parent.
.....b. If the orientation is horizontal, then the submenus will open at the bottom of the menu. Not necessarily at the bottom of the item. So, you would have to set a top="offset=x number of px"; either a positive or negative number to get it where you want it. In your case, since it is only the last item that opens a submenu, it just opens below the item as would seem normal. However, you have another issue. Since you are using frames, some browsers won't actually 'see' the bottom of the browser and use the collision detection for the opening submenu very well, so I just added a negative top offest to get the submenu to open above the parent item since it does detect the browser edge for the parent menu. Don't ask because I don't know why it does for one and not the other :)

4. Once this is done, you are now ready to put your own coding in the items. Since you are using horizontal orientation, the 2nd of each 3 items is the spacer item. The easiest way for that to be done is to use a spacer image and set the type as type=disabled; That way the center column will have the offbgcolor as its background.

5. Because you are using images and they are not necessarily the same size, you would need some other coding in the item like imagealign=center; imageposition=center; I use both because I'm not sure if some browsers read them the same and it doesn't hurt :) Also, since the info is not put into one item, align=center; is not a good option since the items wouldn't match at the left side, but you still want a little padding, so the info item has padding=5px;

Well, that's most of it I think. It gives you an idea how to figure things like columns, i.e. divides to create a look you want. I did a couple of other things, like adding a line break and a non-breaking line space in the info items at the bottom to give them a white area below where the submenu for the last item opens. Little things like that you will figure as you do more designing and experimenting with the menu. You can also do things like create a table in one item and code in images using html coding. Heck, you could even create a submenu that has a flash object in it. Just remember that's can cause problems since the object has to load, oh and if the person mouses off the submenu the object stops since the menu closes :) I just wanted to give you some examples of things you can do. I know someone who actually put an iframe into a submenu with a page in it. I think they were just experimenting.

Sorry for how long this was, but wanted to make sure I explained pretty well in depth what I did to get this. It seems sort of involved, but actually once you get the idea it's pretty quick to do.

Ruth
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: popup window size

Post by Ruth »

Hi,

I just realized that I had left some things out of the data file for that st cloud menu, the long one, so I'm posting it here, again, with the corrections. Notice all the items with image=spacer.gif and the headerbgcolor that is in them, that's to keep that middle 'column' cornflower blue and not white as is the headerbgcolor in the style section. Don't forget you'll need to make a little transparent gif image for those items.

Code: Select all

with(milonic=new menuname("st cloud")){
margin=3;
style=MapSample;
orientation='horizontal';
divides=4;
aI("align=center;decoration=underline;fontsize=14px;fontweight=bold;text=Sam Pierskalla;type=header;");
aI("image=spacer.gif;itemwidth=10px;type=header;headerbgcolor=CornflowerBlue;");
aI("align=center;decoration=underline;fontsize=14px;fontweight=bold;text=Jeron Winter;type=header;");
aI("align=center;image=Sam.jpg;imagepadding=5px;imagepadding=5px;type=header;imagealign=center;imageposition=center;");
aI("image=spacer.gif;itemwidth=10px;type=header;headerbgcolor=CornflowerBlue;");
aI("align=center;image=JeronBrainerd.jpg;type=header;imagepadding=5px;imagealign=center;imageposition=center;");
aI("text=Area: St. Cloud<br>Phone: 320-259-5974<br>Toll Free: 800-317-5974<br>&nbsp;;padding=5px;type=header;");
aI("image=spacer.gif;itemwidth=10px;type=header;headerbgcolor=CornflowerBlue;");
aI("text=Area: St Cloud West<br>Phone: 320-259-5974<br>Toll Free: 800-317-5974<br>&nbsp;;padding=5px;type=header;");
aI("showmenu=StCloudSubmenu;text=State License Info Here;padding=5px;");
aI("image=spacer.gif;itemwidth=10px;type=header;headerbgcolor=CornflowerBlue;");
aI("showmenu=BrainerdSubmenu;text=State License Info Here;padding=5px;");
}
Ruth
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

Ruth
Thanks for the update.
I have been busy with other things but today I will try your code.
Wag
User avatar
Wag
Advanced
Advanced
Posts: 28
Joined: Wed Oct 31, 2007 4:07 pm

Re: popup window size

Post by Wag »

Seems to work very well.
http://www.godfathersexterminating.com/

Ruth
Can't thankyou enough! Again you are a star!
Wag
Post Reply