Solved

Website programming

Posted on 2009-06-30
7
327 Views
Last Modified: 2012-05-07
Hi, im developing a website (very basic with js floating menu) in html. When ever i open a browser (IE) i get an active content blocker and i'm unable to see my menu bar. This is more of a browser protection function, but very irritating for UE. Need inputs on how can change code to avoid this for general hosting. Same code attached below..


My menu code is:

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->
 

<!-- Begin

var isDOM = (document.getElementById ? true : false); 

var isIE4 = ((document.all && !isDOM) ? true : false);

var isNS4 = (document.layers ? true : false);

function getRef(id) {

if (isDOM) return document.getElementById(id);

if (isIE4) return document.all[id];

if (isNS4) return document.layers[id];

}

function getSty(id) {

return (isNS4 ? getRef(id) : getRef(id).style);

} 

// Hide timeout.

var popTimer = 0;

// Array showing highlighted menu items.

var litNow = new Array();

function popOver(menuNum, itemNum) {

clearTimeout(popTimer);

hideAllBut(menuNum);

litNow = getTree(menuNum, itemNum);

changeCol(litNow, true);

targetNum = menu[menuNum][itemNum].target;

if (targetNum > 0) {

thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);

thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);

with (menu[targetNum][0].ref) {

left = parseInt(thisX + menu[targetNum][0].x);

top = parseInt(thisY + menu[targetNum][0].y);

visibility = 'visible';

      }

   }

}

function popOut(menuNum, itemNum) {

if ((menuNum == 0) && !menu[menuNum][itemNum].target)

hideAllBut(0)

else

popTimer = setTimeout('hideAllBut(0)', 500);

}

function getTree(menuNum, itemNum) {
 

// Array index is the menu number. The contents are null (if that menu is not a parent)

// or the item number in that menu that is an ancestor (to light it up).

itemArray = new Array(menu.length);
 

while(1) {

itemArray[menuNum] = itemNum;

// If we've reached the top of the hierarchy, return.

if (menuNum == 0) return itemArray;

itemNum = menu[menuNum][0].parentItem;

menuNum = menu[menuNum][0].parentMenu;

   }

}
 

// Pass an array and a boolean to specify colour change, true = over colour.

function changeCol(changeArray, isOver) {

for (menuCount = 0; menuCount < changeArray.length; menuCount++) {

if (changeArray[menuCount]) {

newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

// Change the colours of the div/layer background.

with (menu[menuCount][changeArray[menuCount]].ref) {

if (isNS4) bgColor = newCol;

else backgroundColor = newCol;

         }

      }

   }

}

function hideAllBut(menuNum) {

var keepMenus = getTree(menuNum, 1);

for (count = 0; count < menu.length; count++)

if (!keepMenus[count])

menu[count][0].ref.visibility = 'hidden';

changeCol(litNow, false);

}
 

// *** MENU CONSTRUCTION FUNCTIONS ***
 

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {

// True or false - a vertical menu?

this.isVert = isVert;

// The popout indicator used (if any) for this menu.

this.popInd = popInd

// Position and size settings.

this.x = x;

this.y = y;

this.width = width;

// Colours of menu and items.

this.overCol = overCol;

this.backCol = backCol;

// The stylesheet class used for item borders and the text within items.

this.borderClass = borderClass;

this.textClass = textClass;

// Parent menu and item numbers, indexed later.

this.parentMenu = null;

this.parentItem = null;

// Reference to the object's style properties (set later).

this.ref = null;

}
 

function Item(text, href, frame, length, spacing, target) {

this.text = text;

this.href = href;

this.frame = frame;

this.length = length;

this.spacing = spacing;

this.target = target;

// Reference to the object's style properties (set later).

this.ref = null;

}
 

function writeMenus() {

if (!isDOM && !isIE4 && !isNS4) return;
 

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {

// Variable for holding HTML for items and positions of next item.

var str = '', itemX = 0, itemY = 0;
 

// Remember, items start from 1 in the array (0 is menu object itself, above).

// Also use properties of each item nested in the other with() for construction.

for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {

var itemID = 'menu' + currMenu + 'item' + currItem;
 

// The width and height of the menu item - dependent on orientation!

var w = (isVert ? width : length);

var h = (isVert ? length : width);
 

// Create a div or layer text string with appropriate styles/properties.

// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently

// the width must be a miniumum of 3 for it to work in that browser.

if (isDOM || isIE4) {

str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + 
 

'; height: ' + h + '; visibility: inherit; ';

if (backCol) str += 'background: ' + backCol + '; ';

str += '" ';

}

if (isNS4) {

str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" 
 

visibility="inherit" ';

if (backCol) str += 'bgcolor="' + backCol + '" ';

}

if (borderClass) str += 'class="' + borderClass + '" ';
 

// Add mouseover handlers and finish div/layer.

str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + 
 

')">';
 

// Add contents of item (default: table with link inside).

// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.

// If a target frame is specified, also add that to the <a> tag.
 

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + 
 

'"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' 
 

target="' + frame + '">' : '>') + text + '</a></td>';

if (target > 0) {
 

// Set target's parents to this menu item.

menu[target][0].parentMenu = currMenu;

menu[target][0].parentItem = currItem;
 

// Add a popout indicator.

if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';

}

str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');

if (isVert) itemY += length + spacing;

else itemX += length + spacing;

}

if (isDOM) {

var newDiv = document.createElement('div');

document.getElementsByTagName('body').item(0).appendChild(newDiv);

newDiv.innerHTML = str;

ref = newDiv.style;

ref.position = 'absolute';

ref.visibility = 'hidden';

}
 

// Insert a div tag to the end of the BODY with menu HTML in place for IE4.

if (isIE4) {

document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; 
 

visibility: hidden">' + str + '</div>');

ref = getSty('menu' + currMenu + 'div');

}
 

// In NS4, create a reference to a new layer and write the items to it.

if (isNS4) {

ref = new Layer(0);

ref.document.write(str);

ref.document.close();

}
 

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {

itemName = 'menu' + currMenu + 'item' + currItem;

if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);

if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];

   }

}

with(menu[0][0]) {

ref.left = x;

ref.top = y;

ref.visibility = 'visible';

   }

}
 

// Syntaxes: *** START EDITING HERE, READ THIS SECTION CAREFULLY! ***

//

// menu[menuNumber][0] = new Menu(Vertical menu? (true/false), 'popout indicator', left, top,

// width, 'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');

//

// Left and Top are measured on-the-fly relative to the top-left corner of its trigger, or

// for the root menu, the top-left corner of the page.

//

// menu[menuNumber][itemNumber] = new Item('Text', 'URL', 'target frame', length of menu item,

//  additional spacing to next menu item, number of target menu to popout);

//

// If no target menu (popout) is desired, set it to 0. Likewise, if your site does not use

// frames, pass an empty string as a frame target.

//

// Something that needs explaining - the Vertical Menu setup. You can see most menus below

// are 'true', that is they are vertical, except for the first root menu. The 'length' and

// 'width' of an item depends on its orientation -- length is how long the item runs for in

// the direction of the menu, and width is the lateral dimension of the menu. Just look at

// the examples and tweak the numbers, they'll make sense eventually :).
 

var menu = new Array();
 

// Default colours passed to most menu constructors (just passed to functions, not

// a global variable - makes things easier to change later in bulk).

var defOver = '#336699', defBack = '#003366';
 

// Default 'length' of menu items - item height if menu is vertical, width if horizontal.

var defLength = 25;
 

// Menu 0 is the special, 'root' menu from which everything else arises.

menu[0] = new Array();

// A non-vertical menu with a few different colours and no popout indicator, as an example.
 
 

// *** MOVE ROOT MENU AROUND HERE ***  it's positioned at (5, 0) and is 17px high now.(now positioned at 110,0 and 
 

is 17px high)
 

// menu[menuNumber][0] = new Menu(Vertical menu? (true/false), 'popout indicator', left, top,

// width, 'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');
 
 

menu[0][0] = new Menu(false, '', 180, 0, 35, '#CCCCCC', '#339900', '#CCCC99', 'itemText');
 

// Notice how the targets are all set to nonzero values...

// The 'length' of each of these items is 120, and there is spacing of 25 to the next item.

// Most of the links are set to '#' hashes, make sure you change them to actual files.
 

menu[0][1] = new Item('ABOUT US', '#', '', 120, 5, 1);

menu[0][2] = new Item('TECHNOLOGY & PRODUCTS', '#', '', 180,5, 2);

menu[0][3] = new Item('SERVICES', '#', '', 120, 5, 3);

menu[0][4] = new Item('FACILITIES', '#', '', 120, 5, 4);

menu[0][5] = new Item('REFERENCES', '#', '', 120, 5,5);

menu[0][6] = new Item('CONTACT US', '#', '', 120, 5, 6);
 
 

// An example of a link with a target frame/window as well...

//menu[0][4] = new Item('  DIVISIONS', 'http://gusnz.cjb.net', '_new', 120, 25, 4);
 

// File menu.

menu[1] = new Array();

// The File menu is positioned 0px across and 22 down from its trigger, and is 150 wide.

// All text in this menu has the stylesheet class 'item' -- see the <style> section above.

// We've passed a 'greater-than' sign '>' as a popout indicator. Try an image...?

//ABOUT US menu

menu[1][0] = new Menu(true, '>', 0, 40, 180, defOver, defBack, 'itemBorder', 'crazyText');

menu[1][1] = new Item('COMPANY PROFILE', '#', '', defLength, 2, 0);

menu[1][2] = new Item('CORPORATE FUNCTIONS', '#', '', defLength, 2, 0);

menu[1][3] = new Item('NEWS & MEDIA', '#', '', defLength, 2, 0);

menu[1][4] = new Item('POLICIES & REGULATIONS', '#', '', defLength, 2, 0);
 
 
 
 

// Non-zero target means this will trigger a popout -- menu[4] which is the 'Reopen' menu.

//menu[1][3] = new Item('THREE', '#', '', defLength, 2, 0);

//menu[1][4] = new Item('FOUR', '#', '', defLength, 2, 0);

//menu[1][5] = new Item('FIVE', '#', '', defLength, 2, 0);
 
 

//menu[0][0] = new Menu(false, '', 180, 0, 35, '#CCCCCC', '#339900', '#CCCC99', 'itemText');
 

// TECHNOLOGY & PRODUCTS menu.

menu[2] = new Array();

menu[2][0] = new Menu(true, '>', 0, 40, 180, '#FFCC00','#FF9900', 'itemBorder','crazyText');

menu[2][1] = new Item('ELECTRO MECHANCIAL', '#', '', defLength, 2, 0);

menu[2][2] = new Item('HYDRO MECHANICAL', '#', '', defLength, 2, 0);

menu[2][3] = new Item('CIVIL & STRUCTURAL', '#', '', defLength, 2, 0);

menu[2][4] = new Item('POWER SYSTEMs ENGINEERING', '#', '', defLength, 2, 0);

menu[2][5] = new Item('RESEARCH & DEVELOPMENT', '#', '', defLength, 2, 0);
 
 

// SERVICES menu

menu[3] = new Array();

menu[3][0] = new Menu(true, '>',0,40, 180,'#CC0066','#990066', 'itemBorder','crazyText');

menu[3][1] = new Item('TURN KEY LARGE HYDRO', '#', '', defLength, 2, 0);

menu[3][2] = new Item('TURN KEY SMALL HYDRO', '#', '', defLength, 2, 0);

menu[3][3] = new Item('MOBILE HYDRO INSTALLATION', '#', '', defLength, 2, 0);

menu[3][4] = new Item('UNDERWATER POWER GENERATION', '#', '', defLength, 2, 0);
 
 
 
 
 

// FACILITIES menu

menu[4] = new Array();

// This is across but not down... a horizontal popout (with crazy stylesheets :)...

menu[4][0] = new Menu(true, '>',0,40,200,'#00CC66','#009933', 'itemBorder', 'crazyText');

// These items are lengthier than normal, and have extra spacing due to the fancy borders.

menu[4][1] = new Item('CONSULTANCY', '#', '', defLength, 2, 0);

menu[4][2] = new Item('DESIGN & ENGINEERING', '#', '', defLength, 2, 0);

menu[4][3] = new Item('FABRICATION & MANUFACTURING', '#', '', defLength, 2, 0);

menu[4][4] = new Item('ERECTION TESTING COMISSIONING', '#', '', defLength, 2, 0);

menu[4][5] = new Item('PLANT OPERATION & MAINTENANCE', '#', '', defLength, 2, 0);
 
 

// REFERENCES

menu[5] = new Array();

menu[5][0] = new Menu(true, '<', 0, 20, 150, defOver, defBack, 'itemBorder', 'crazyText');
 
 
 

// CONTACT USmenu

menu[6] = new Array();

menu[6][0] = new Menu(true, '<',0,40,120,'#6633CC','#9966FF', 'itemBorder', 'crazyText');

menu[6][1] = new Item('VISIT US', '#', '', defLength, 2, 0);

menu[6][2] = new Item('CAREERS', '#', '', defLength, 2, 0);

menu[6][3] = new Item('FEEDBACK', '#', '', defLength, 2, 0);
 
 
 
 
 
 

// *** OPTIONAL CODE FROM HERE DOWN ***
 

// These two lines handle the window resize bug in NS4. See <body onResize="...">.

// I recommend you leave this here as otherwise when you resize NS4's width menus are hidden.
 

var popOldWidth = window.innerWidth;

nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');
 
 

// This is a quick snippet that captures all clicks on the document and hides the menus

// every time you click. Use if you want.
 

if (isNS4) document.captureEvents(Event.CLICK);

document.onclick = clickHandle;
 

function clickHandle(evt)

{

 if (isNS4) document.routeEvent(evt);

 hideAllBut(0);

}
 
 

// This is just the moving command for the example.
 

function moveRoot()

{

 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);

}

//  End -->

</script>
 

<!-- *** IMPORTANT STYLESHEET SECTION - Change the border classes and text colours *** -->

<style>

<!--
 

.itemBorder { border: 1px solid black }

.itemText { text-decoration: none; color: #000000; font: Bold 12px Arial, Helvetica }
 

.crazyBorder { border: 2px outset #663399 }

.crazyText { text-decoration: none; color: #FFFFFF; font:  10px Arial, Helvetica }
 

-->

</style>
 

</HEAD>
 

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
 

<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) 
 

nsResizeHandler()">
 

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

Open in new window

0
Comment
Question by:asaraf21
  • 3
  • 3
7 Comments
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 24744468
Can you give me the URL of original source?

You might be mis-configured or not included everything
0
 

Author Comment

by:asaraf21
ID: 24744514
Took this code years back from <!-- Web Site:  http://gusnz.cjb.net --> Not sure if this still exists. BTW the code complies and executes after we manually accept the security blocker popup.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24744614
Maybe time to pull that menu into this millenium :-)
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:asaraf21
ID: 24744652
suggestions / samples of other contemporary floating menus ?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24745074
Millions. However "floating menu" does not mean anything to me. Do you have a site we can visit to see what you mean?
0
 

Author Comment

by:asaraf21
ID: 24745274
code attached in txt file. Please convert to html and view.
Copy-of-index.txt
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24745569
Well. he still is around and has a nice one (choose horizontal)
http://www.twinhelix.com/dhtml/fsmenu/demo/
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now