PDA

View Full Version : JS drop down menu issues



rohis
11-29-2005, 01:23 PM
I'm working on a drop-down menu for this site:

http://www.freewebs.com/beckwithma/library/Whitman-Hanson%20Regional%20Schools.htm


There are a few things I need to know how to do, or if someone could do them for me it would be greatly apreciated.


1: When you mouse over the menu for the first time, a thing pops up that sais 'trial version' I want to remove whatever is causing that from the code.
2: I want slightly larger horizontal space between the items on the list
3: I need to know how to have some of the links in the drop down menue target a frame and some target a new window.

Here are the .JS files:

http://www.freewebs.com/beckwithma/library/apymenu.js
http://www.freewebs.com/beckwithma/library/newdata1.js


This is a project for my school's library website, so I don't have any sortof budget to hire a menu builder or pay for some software, so i borrowed the code for this from another site.

thank you.

jscheuer1
11-29-2005, 05:37 PM
1: When you mouse over the menu for the first time, a thing pops up that sais 'trial version' I want to remove whatever is causing that from the code.

Get a freeware, creditware or PD menu, there are so many, none of them have this type of junk. Removing it without paying for the script is illegal, a violation of copyright and perhaps against the rules of this forum.

rohis
11-29-2005, 06:21 PM
sorry, I was unaware.

jscheuer1
11-29-2005, 06:37 PM
I should have added, have a look here for possible alternatives:

http://dynamicdrive.com/dynamicindex1/index.html

http://dynamicdrive.com/dynamicindex1/indexb.html

http://dynamicdrive.com/dynamicindex1/indexc.html

rohis
11-29-2005, 06:47 PM
I think what we are going to do is purchase this menu bar if I can make it work right.

Can anyone tell me how to target specific links on the JS menu to open in an iframe?

jscheuer1
11-29-2005, 10:26 PM
One would hope that there are some instructions for this menu but, it looks like here:


var menuItems = [
["Pathfinders","http://www.apycom.com","","","",,,],
["|Language Arts","http://dhtml-menu.com","","","",,,],
["|Poetry","http://dhtml-menu.com","","","",,,],
["|Science","http://dhtml-menu.com","","","",,,],
["|Math","http://dhtml-menu.com","","","",,,],
["|History","http://dhtml-menu.com","","","",,,],
["|Health","http://dhtml-menu.com","","","",,,],
["|World Language","http://dhtml-menu.com","","","",,,],
["|Vietnam","http://dhtml-menu.com","","","",,,],
["|Buisines ED","http://dhtml-menu.com","","","",,,],
["|Family Consumer Science","http://dhtml-menu.com","","","",,,],

and similar in the newdata1.js file that one can use the javascript: convention to run code instead of simply supplying an address. This is a common feature of these types of menus, usually. It also looks like a target may be able to be specified in one of the empty "" sections, which empty "" section that is, I can't say for sure. I'd start with the first and try them all just to see. Again, instructions for this menu would make these things clearer. Here is what I would try:


var menuItems = [
["Pathfinders","http://www.apycom.com","","","",,,],
["|Language Arts","javascript:window.open('http://dhtml-menu.com')","","","",,,],
["|Poetry","javascript:parent.frameName.location.href='http://dhtml-menu.com'","","","",,,],
["|Science","http://dhtml-menu.com","_blank","","",,,],
["|Math","http://dhtml-menu.com","frameName","","",,,],
["|History","http://dhtml-menu.com","","","",,,],
["|Health","http://dhtml-menu.com","","","",,,],
["|World Language","http://dhtml-menu.com","","","",,,],
["|Vietnam","http://dhtml-menu.com","","","",,,],
["|Buisines ED","http://dhtml-menu.com","","","",,,],
["|Family Consumer Science","http://dhtml-menu.com","","","",,,],

and then just see what happens when those links are clicked. Where I have 'frameName' use an assigned name of a frame or iframe. If it is an iframe, the 'parent' bit can be skipped. Also 'window.parent' may be required in place of just 'parent' or 'document.frameName' in the case of an iframe.

rohis
12-02-2005, 05:27 PM
thanks, it was this one that worked
"javascript:parent.frameName.location.href='http://dhtml-menu.com'"

any idea on how to make the h spacing between the 5 main groups wider?

jscheuer1
12-02-2005, 07:13 PM
I'd try adjusting this variable in the newdata1.js file:


var itemBorderWidth=1;

rohis
12-05-2005, 01:08 PM
Adjusting the border width vertically elongates it too wich I want to avoid and there is a thin red border higlight that I have that gets to thick when I adjust the border width.

Theres no tag to adjust the Hspace of the parent items in the menu?


There are instructions for this menu, but they are weak and don't have information on doing this.

jscheuer1
12-05-2005, 04:54 PM
I'd also play with these:


var itemSpacing=0;
var itemPadding=0;

However, both of those may add to the vertical height as well. This entry in the configuration looks interesting:


var itemStyles = [
["fontStyle=bold 7pt Verdana",],
["itemBackColor=red,red","itemBorderColor=red,red",],
];

Unfortunately, 'itemBackColor' and 'itemBorderColor' are not valid css or valid standard javascript css notation, 'fontStyle' is valid for javascript css but is here used in an invalid manner, suggesting that it has been co-opted by the script for its own purposes. Once again, the documentation might help, could I have a look at it?

rohis
12-05-2005, 05:33 PM
The documentation was downloaded with the menu, here it is:



var pathPrefix="www.mydomain.com/files/"; Path prefix for item links and images.
var saveNavigationPath = 1; 0 - disable items highlight; 1 - items highlight during menu navigation. Default is 1.


var topDX = 0; 1st level Submenu X offset.
var topDY = 0; 1st level Submenu Y offset.
var DX = -3; Submenu X offset.
var DY = 0; Submenu Y offset.


Added in v2.70

var absolutePos = 1; 0-relative position, 1-absolute position
var posX = 190; X coordinate of top-left menu corner, if absolutePos = 1;
var posY = 160; Y coordinate of top-left menu corner, if absolutePos = 1;


var absolutePos = 1; 0-relative position, 1-absolute position
var posX = 190; X coordinate of top-left menu corner, if absolutePos = 1;
var posY = 160; Y coordinate of top-left menu corner, if absolutePos = 1;


var blankImage = "img/blank.gif"; path to blank image
var isHorizontal = 1; 0-vertical, 1-horizontal
var menuWidth = ""; width of top-level menu (% or px), if "" fits to largest item


var absolutePos = 1; 0-relative position, 1-absolute position
var posX = 190; X coordinate of top-left menu corner, if absolutePos = 1;
var posY = 160; Y coordinate of top-left menu corner, if absolutePos = 1;


var floatable = 1; if 1 the menu "floats" on window scrolling staying always visible
var floatIterations = 8; defines speed of floating


var movable = 0; if 1 you can drag the menu by using top spacer
var moveCursor = "move"; cursor type when you mouseover the drag spacer
var moveImage="img/move.gif"; image of the drag spacer
var moveWidth = 12; width of drag spacer
var moveHeight = 24; height of drag spacer



var fontStyle="bold 9pt Verdana"; font style
var fontColor=["#444444","#ffffff"]; normal and mouseover font color
var fontDecoration=["none","none"]; normal and mouseover font color decoration
("none", "underline", "line-through", "overline")


var itemBackColor=["#ffffff","#4792E6"]; normal and mouseover color of item background
var itemBorderWidth=0; item border width
var itemAlign="left"; alignment of item text
var itemBorderColor=["#6655ff","#665500"]; normal and mouseover border color
var itemBorderStyle=["solid","solid"]; normal and mouseover border style ("none","solid","double","dotted","dashed","groove", "ridge")
var itemBackImage=["bkgr1.gif","bkgr2.gif"]; normal and mouseover background image
var itemSpacing=0; item spacing
var itemPadding=4; item padding
var itemCursor="default"; mouseover cursor ("hand", "default", "move"...)
var itemTarget="_blank"; default target for all items ("_self","_blank","_parent",
"_top"...), if "" target is "_self"


var iconWidth = 16; item icon width
var iconHeight = 16; item icon height
var iconTopWidth = 24; icon width of top-level menu items
var iconTopHeight = 24; icon height of top-level menu items


var menuBackImage=""; menu background image
var menuBackColor="#ffffff"; menu background color
var menuBorderColor="#cccccc"; menu border color
var menuBorderStyle="solid"; menu border style ("none","solid","double","dotted","dashed","groove", "ridge")
var menuBorderWidth=1; menu border width
var subMenuAlign = "left"; alignment of submenu item text


var transparency=75; transparency in %%
var transition=3; transition visual effect number (0-39)
var transOptions="options"; for more details click here.
var transDuration=300; visual effect delay in ms
var shadowColor="#777777"; shadow color
var shadowLen=3; shadow length in px
var shadowTop=0/1; disable/enable shadow for top menu. Default is 1.


var arrowImageMain=["arrwm1.gif","arrwm2.gif"]; normal and mouseover arrow images for top-level menu
var arrowImageSub=["arrow1.gif","arrow2.gif"]; normal and mouseover arrow images for all submenus
var arrowWidth =9; arrow width
var arrowHeight=9; arrow height


var separatorImage="separ.gif"; separator image
var separatorWidth="100%"; separator width
var separatorHeight=3; separator height
var separatorAlignment="right"; separator alignment
var separatorVImage=""; vertical separator image
var separatorVWidth=5; vertical separator width
var separatorVHeight=16; vertical separator height


var statusString="link"; status string, "link" shows item links, "text" shows item label text, with other strings shows this string


var pressedItem=-2; Defines an item that will appear in the highlighted state (-2 - normal mode, -1 - toggle mode is active, but highlighted item not defined, 0,1,2,3,... - # of pressed item including separators)


var menuItems = [[..]];

format:
[item_label, item_link, normal_icon, mouseover_icon, tooltip, item_target, item_style, menu_style]

example:
var menuItems =
[
["Home","testlink.html","icon.gif","iconover.gif","Home Tip",,"1"],
["|Our Products","testlink.html","icon1.gif","icon2.gif","Our Products Tip","_blank",,"0"],
];

* item_label:
separator is"-";
sub item text starts with "|" symbol;
* item_target
if "_" the item is inactive/disabled
* item_style and menu_style
you can use individual styles for items or whole submenu. item_style and menu_style are the
indexes of required style within style arrays, defined in itemStyles and menuStyles variables,
example

var itemStyles =
[
["fontStyle=normal 9pt Tahoma","fontColor=#000000,#9999ff"],
["itemBackImage=img/iconback3.gif,img/iconback4.gif"],
];
var menuStyles =
[
["menuBackColor=#ffffff","menuBorderStyle=dotted"],
];

Available parameters for items are:

fontStyle = style1,style2
fontColor = color1,color2
fontDecoration = decor1,decor2
itemBackColor = color1,color2
itemBorderColorcolor1,color2
itemBorderWidth = width1,width2
itemBorderStyle = style1,style2
arrowImageMain = img1,img2
arrowImageSub = img1,img2
itemBackImage = img1,img2
itemWidth = number

Available parameters for menus are:

menuBorderWidth = width
menuBorderStyle = style
menuBorderColor = color
menuBackColor = color
menuBackImage = img



You can modify the menu items "on fly" without the page reloading and refreshing using
apy_changeItem function:

apy_changeItem (nM, nS, nI, newText, newTarget, newTip, newImgOver, newImgOut);

where:
nM - number of menu on page;
nS - number of submenu;
nI - number of item;
newText - new item text;
newTarget - new item target;
newTip - new item tooltip;
newImgOver, newImgOut - new icon images for mouseover and normal state.

examples:

apy_changeItem(0,0,1, 'Apycom', '_blank', 'Apycom Tip', 'img/b092.gif', 'img/b09.gif');

apy_changeItem(0,1,2, '<b>Download!</b>', '', 'Download it!');



You can create a CSS-based menu.

The menu uses common CSS-styles from the .css-file.
You can specify a css-style for each submenu and item.

For enabling CSS mode following parameters are necessary:

var cssStyle=0/1; - disable/enable css mode;

var cssClass="className"; - general class. For example:
.myClass {...}
...
var cssClass="myClass";

var menuStyles = [ ["CSS=className"] ]; - individual css class for submenu;

var itemStyles = [ ["CSS=classNameNormal,classNameOver"] ]; - individual css class for item.





You can create a popup menu.
You should set following parameters:

var popupMode=1;

To show a popup menu assign the following function call to event:

yourEvent = "return apy_popup(menuN, pause, event);"

Where:
yourEvent - event type (onMouseOver, onClick, onContextMenu, etc.)
menuN - menu number on page.
pause - inactivity delay.
event - reserved. Do not change.

For example:

<img src="pic" onMouseOver="return apy_popup(0, 2000, event);">

jscheuer1
12-05-2005, 09:03 PM
Great! If adjusting the:


var itemSpacing=0;
var itemPadding=0;

doesn't work out to your satisfaction, we can try using the css mode and make our own style sheet for the menu but, all style values for the menu may then need to be set via css. If that is the case, I hope you are at least somewhat fluent in css styling.