FXsinus.com HOME Home of FX DHTML Web Menus

FX DHTML menu example: Hiding Form Elements












Why hiding form elements is necessary:
During the process of HTML coding you've probably encountered an annoying form element related problem: Some form elements (depending on the browser) are overlapping a styled item. An effective workaround for this problem is to embed the form-tag in a layer. In the example above, all elements are hidden when the FX menu is displayed or made visible. The layout of HTML is largely responsible for this problem and as such, we need to rely on this workaround. Consider all other layout options to avoid having to use this approach.
How hiding form elements works:
All form elements on this page are embedded in a layer (<div>). I'v named the layer "MyForm", you may use any unique name. Only one layer per page can be defined to be hidden, when a submenu is displayed.
If you want to work cross-browser it is important to position the layer correctly. (Netscape 4 requires exact style definitions in the layer). As far as it's possible try to position the layer absolute (yes, you're right for Netscape 4). 
<div id="MyForm" style="position:relative; left:0; top:0; width:900; height:240; visibility:visible;">


<!--your form content-->


</div>
Define a variable called divstohide in the fx_array.js-file: 
var divstohide=['MyForm'];
Associate your menu array with the new variable "divstohide". Now hiding a specific form on your website will be inherited for all submenus of example_1. It wouldn't make sense to define "divstohide" in the first level (var example=[...]). 
var example_1=[
[175,28,,,0,EXMSIEeffect,,,EXgroupstyle,EXgroupbehaviour,,divstohide,0,1],
['Documentation',,,,,,'',,EXitemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,EXitemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,EXitemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,EXitemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,EXitemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,EXitemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,EXitemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,EXitemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,EXitemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,EXitemstyle,,,0,92,37,3,1,1,1]
]

Settings in the fx_array.js-file:

var fxnames=['example',2];
var webmastercheck=1; //set to 0 if everything works fine
var blankgif='image/1x1.gif';
var MSIEeffect=[]
var divstohide=['MyForm']


var groupstyle=[
,            //GroupBgImageActive
,            //GroupBgImageSrc
'#808080',   //GroupBgColorOff
0,           //GroupBorderWidth
1,           //GroupBorderLeft
1,           //GroupBorderTop
1,           //GroupBorderRight
1,           //GroupBorderBottom
0,            //GroupInnerBgImageActive
'',            //GroupInnerBgImageSrc
'#808080',   //GroupInnerBgColorOff
0,           //GroupInnerBorderWidth
0,           //GroupInnerBorderLeft
0,           //GroupInnerBorderTop
0,           //GroupInnerBorderRight
0,           //GroupInnerBorderBottom
0,           //AllowMenuWidthHeightDisaster
1,           //UseDifferentWidthsForMenu
0,           //UseDifferentHeightsForMenu
0,           //Group3DEffect
1,           //GapBetweenItems
]


var groupbehaviour=[
0, //MenuOpensOnClickOrOnMouseOver click:1, mouse:0
0, //MenuClosesOnClick
1, //MenuClosesOnMouseOut
,  //for future purpose
1, //MenuClosesIfMouseOverOtherItem
0, //MenuClosesIfClickOnOtherItem
,  //for future purpose
150,  //MenuDisplayDelay
300, //MenuTimeDisappearGap
'#FFFFFF',  //AlternateOpera5n6TransparencyColor
1, //MenuPathStaysHighlited
1, //PositionIsRelativeOrAbsolute absolute:0 relative:1
1, //ActivationIntensity
,  //ScrollingFollowSpeed ffp
,  //ScrollingFollowRate ffp
,  //RightToLeftHebrew ffp
,  //FirstLineFrame ffp
,  //SecondLineFrame ffp
0,  //MainMenuExpandWidth
,  //MainMenuHorizontalPosition center:c right:r
,  //MainMenuVerticalPosition ffp
,  //MenuIsStaticVertical ffp
,  //MenuIsStaticHorizontal ffp
,  //IntelligentSmoothScrolling ffp
,  //TypeOfMenu (sideMenu,...) ffp
,  //RighClickMenuDisappearDelay ffp
,  //ShowProductInfoFXsinus ffp
,  //DivIdForRelativePositioning ffp
0, //FirstMenuIsCommonHTML
500,//MenuZIndex
,   //EnableDragAndDrop ffp
,   //JavaScriptCommandOnAppear ffp
,   //JavaScriptCommandOnDisappear ffp
,   //JavaScriptFunctionToCallBeforeStart ffp
,   //JavaScriptFunctionToCallAfterBuild ffp
,   //JavaScriptFunctionToCallBeforeFirstOpen ffp
,   //JavaScriptFunctionToCallAfterCloseAll ffp
,   //WindowOnErrorFunctionActivate ffp
,   //DeactivateBrowserSupportForN4 ffp
,   //DeactivateBrowserSupportForIE4 ffp
,   //DeactivateBrowserSupportForOpera ffp
,   //DeactivateBrowserSupportForN6 ffp
,   //for future purpose
'pointer',//ChooseStandardCursor
,   //DisallowTextSelect ffp
'', //LinkTextStatusStandard
1,  //IntelligentSubMenuPositioningCorrection
,   //PreferredScreenResolutionHorizontal
,   //PreferredScreenResolutionVertical ffp
7,  //IntelligentSubMenuPositioningLeftcorr
0   //IntelligentSubMenuPositioningTopcorr ffp

]


var IndicatorArrowRightSubOpensRight=['image/fx_arrow01off.gif','image/fx_arrow01on.gif','image/fx_arrow01on.gif',11,12,2,3]
var IndicatorArrowRightSubOpensUp=[] //for future purpose
var IndicatorArrowRightSubOpensLeft=[] //for future purpose
var IndicatorArrowRightSubOpensDown=['image/fx_arrow01off.gif','image/fx_arrow01on.gif','image/fx_arrow01on.gif',11,12,2,3]
var IndicatorArrowRightSubOpensDownRight=[]



var itemstyle=[
,//ffp
,//ffp
'Verdana',//FontFamilyOFF
'Verdana',//FontFamilyOn
'Verdana',//FontFamilyClick
,//ffp
,//ffp
,//ffp
8,//FontSizeOff
8,//FontSizeOn
8,//FontSizeClick
26,//PaddingLeft
11,//PaddingTop
'#000000',//FontColorOff
'#FFFFFF',//FontColorOn
'#FFFFFF',//FontColorClick
'normal',//FontBoldOff
'normal',//FontBoldOn
'bold',//FontBoldClick
'normal',//FontItalicsOff
'normal',//FontItalicsOn
'normal',//FontItalicsClick
'none',//TextDecorationUnderlineOff
'none',//TextDecorationUnderlineOn
'none',//TextDecorationUnderlineClick
,//LetterSpacing
0,//Item3DEffect
'transparent',//BorderColorOff
'#6699CC',//BorderColorOn
'#006600',//BorderColorClick
0,//BorderWidth
0,//BorderLeft
0,//BorderTop
0,//BorderRight
0,//BorderBottom
'#FFFFFF',//InnerBorderColorOff
'#FFFFFF',//InnerBorderColorOn
'#FFFFFF',//InnerBorderColorClick
0,//InnerBorderWidth
0,//InnerBorderLeft
0,//InnerBorderTop
0,//InnerBorderRight
0,//InnerBorderBottom
0,//BorderImageActive
,//BorderImageSrc
,//InnerBgImageActive
,//InnerBgImageSrc
0,//BgImageActive
'fx_fade01.gif',//BgImageSrc
'#CDD8ED',//BgColorOff
'#6699CC',//BgColorOn
'#000000',//BgColorClick
1,//IndicatorArrowRightActivate
IndicatorArrowRightSubOpensRight,//IndicatorArrowRightSubOpensRight
IndicatorArrowRightSubOpensUp,//IndicatorArrowRightSubOpensUp
IndicatorArrowRightSubOpensLeft,//IndicatorArrowRightSubOpensLeft
IndicatorArrowRightSubOpensDown,//IndicatorArrowRightSubOpensDown
IndicatorArrowRightSubOpensDownRight,//IndicatorArrowRightSubOpensDownRight
,//
,//
0,//LeftArrowActivate
'',//LeftArrowOffSrc
'',//LeftArrowOnSrc
,//LeftArrowClickSrc
14,//LeftArrowWidth
15,//LeftArrowHeight
2,//LeftArrowLeft
2,//LeftArrowTop
0,//for future purpose
0,//for future purpose
1//Item3dEffectIsAuto

]


var example=[
[
190,//GroupWidth
37,//GroupHeight
22,//OffsetLeft
100,//OffsetTop
1,//GroupIsHorizontal
MSIEeffect,//MSIEEffectArray
,//ffp
,//ffp
groupstyle,//GroupStyleArray
groupbehaviour,//GroupBehaviourArray
,//ffp
,//DivsToHide
0,//GroupHorizontalOverlap
0//GroupVerticalOverlap

],

[
'I can hide form elements',//LinkTextOFF
,//LinkTextON
,//LinkTextONCLICK
,//ImageOFF
,//ImageON
,//ImageONCLICK
,//LinkURL
,//LinkTarget
itemstyle,//DEFINES STYLE SETTINGS
'',//LinkTextStatusBar
'',//LinkToolTip
1,//ItemHasSubMenu
252,//ItemWidth
80,//ItemHeight
3,//ActivationIntensity
1,//ChangeItemStyleOnMouseOver
1,//ChangeItemStyleOnMouseOut
1,//ChangeItemStyleOnClick
'',//for future purpose
15,//ImageWidth
15,//ImageHeight
,//CursorOn
,//JavaScriptCommandOff
,//JavaScriptCommandOn
  //JavaScriptCommandClick
],
['I can not hide form elements',,,,,,,,itemstyle,,,1,250,20,3,1,1,1,,,,'pointer']
]

var example_1=[
[175,28,,,0,MSIEeffect,,,groupstyle,groupbehaviour,,divstohide,0,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,37,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1]
]

var example_2=[
[150,30,190,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,0,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['I can hide them',,,,,,'',,itemstyle,,,1,92,37,3,1,1,1],
['Scriptsearch',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['W3C Markup Validation',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1]
]

var example_2_2=[
[150,30,190,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,divstohide,0,1],
['W3C Markup Validation',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['W3C Markup Validation',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,37,3,1,1,1]
]