Header Item with a link

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
FactorX
Beginner
Beginner
Posts: 4
Joined: Tue Jun 08, 2004 5:48 pm

Header Item with a link

Post by FactorX »

I've got a menu that uses headers at the top of each submenu, which are also links. Problem is that all of my header links dont open a new window like the regular menu items. Is there a way to do this without having to change the bgcolor / color for each of the item and also removing the header type.

Here is what im using now

Code: Select all

aI("text=<b>Overview<b>;type=header;url=http://www.somesite.com/link.html;target=_blank;");
Should i be doing something like this instead?

Code: Select all

aI("text=<b>Overview<b>;offbgcolor=#FFFFFF;offcolor=#000000;url=http://www.somesite.com/link.html;target=_blank;");
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Have you tried global styles

headercolor=
headerbgcolor=

with type=header;

maz
FactorX
Beginner
Beginner
Posts: 4
Joined: Tue Jun 08, 2004 5:48 pm

Post by FactorX »

yes i have the headercolor and bgcolor set in my style that give the black text on a white background. But my issues it that even with the target=_blank; parameter in my aI line of the header item it still does not go to the link specified in a New Window. Just uses the current browser window. I have tested this in both IE6 and OP7.51
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi X,

Another approach would be to call a javascript function that opens a new window with the url you pass to it. A function like this (which you could put at the top of your menu_data.js file):

Code: Select all

function openWindow(url, winName, attributes)
{
  newWin = window.open(url, winName, attributes);
}
In your header menu item, you would call that function. I've found that it can't be called using the item's url property (url=javascript:functionName()), but it does work using the items clickfunction property, like so:

Code: Select all

aI("text=Web Search;pointer=arrow;type=header;clickfunction=openWindow('http://www.google.com/','Google','top=0,left=0,width=500,height=600,resizable=no');");
(all on one line of course)

Notice that the function has three parameters: url is, of course, the url you want to open in the new window. winName is the name of the new window (which could then be used as a target in, say, a subsequent <a> link). attributes is a comma-separated string used to define various window attributes (size, location, toolbars, etc.). So, in the example above, the new window would open to http://www.google.com/, with a name of 'Google'. The attributes passed in the example would make the window open at top=0, left=0 (the upper left corner of your screen), with a width of 500px and a height of 600px, and the new window would not be resizable. The entire comma-separated list of attributes should be in quotes, as shown in the example above. You can see a list of various window attibutes, their settings, and browser compatibilities here.

You could write a more complicated openWindow() function, where you actually pass height, width, etc. as separate parameters, define standard settings, like scrollbars, toolbars and resizing, that will be the same for all of your windows, and even have the function automatically center the new window in the screen. I just did this down and dirty one as a quick example.

I also tried using the pointer= menu item property, but it didn't seem to work. (Maybe I used it wrong). You may find that you're stuck with the text cursor used by default by header items.

Using a function like this is nice in that it gives you more control over the placement, appearance, and functionality of the new window (and you could use it in a header item or a standard menu item as well). But if that doesn't matter to you, then you might as well go with the second option you put in your initial post. It seems to me that you're really using header items as fully functional menu items, except that you want their colors to be different. It might just be easier to code them as normal menu items, but specify their colors in the aI() string. If you don't want to have to keep typing in the color info, you could define them in variables in one place, like so:

Code: Select all

myheadercolor = "black";
myheaderbgcolor = "white";
var myHeaderColors = "offcolor="+myheadercolor+";oncolor="+myheadercolor+";offbgcolor="+myheaderbgcolor+";onbgcolor="+myheaderbgcolor+";";
(note that the third line, defining myHeaderColors should not wrap.)

In this example, I've set the preferred fore and bg header colors for both mouse on and mouse off (headers don't have mouseover effects in this case). Then, I've put these colors into the standard menu item properties (like offbgcolor and oncolor, etc), all in one string variable called myHeaderColors. So, whenver I want to apply that set of colors to a menu item (e.g., a "pseudo header"), I'd define the item like so:

Code: Select all

aI("text=Open Google;url=http://www.google.com/;target=_blank;"+myHeaderColors);
It's a normal aI() item, up until the end, where you just add myHeaderColors exactly as shown. If you decide you want a different set of colors, all you have to do is change the values for myheadercolor and myheaderbgcolor in one place, rather than in all of the affected aI() items.

You could even go a step further and add your "my" colors as additional settings in a menuStyle object. Anyway, I don't know if that made sense, but it's getting late and I fear I've rambled on enough. Hope you find some help in there.

Kevin
FactorX
Beginner
Beginner
Posts: 4
Joined: Tue Jun 08, 2004 5:48 pm

Post by FactorX »

Thanks alot for the excellent post.

I've applied the MyHeaderColors variable and it works great just what i was looking for.

Cheers

Great Menu too!
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

You're welcome. Glad it worked out.

Kevin
Post Reply