JavaScript Programming Tips from Liv -- www.liviutudor.com

Popups menus on web pages is such a common thing nowadays -- and really easy to implement as well. Because it turned into such a "trendy" thing to implement on a website, there are loads of commercial / shareware components that one can buy nowadays to implement this popup menu. I would recommend that you steer away from that and save your money, since implementing this is really not difficult at all. Here's how it works.
Using JavaScript and DOM, you can create a new <div> element inside the document -- bear in mind that the <div> tag supports a width parameter, so you can limit the width of your menu! In fact, you don't need to create the <div> using JavaScript, it can already be created in your HTML and have the visibility set to hidden, so you can only show it when you need it. Also make sure that the positioning is set to absolute so you can move the <div> around the page independent of other elements in the page. Last but not least, assign it an ID so you can quickly find your <div> (menu) in the DOM using getElementById() function. Also, since it's a <div> tag you can apply a class to it to "skin" it to match your website look and feel. Also, bear in mind that in JavaScript we have access to each element HTML tags that it encases, via innerHTML property. This means we can change the code inside our <div> to build up a dynamic menu.
Last but not least, there is a oncontextmenu event in JavaScript which is fired when the right mouse button is clicked (right-click).

<script type="text/javascript">
var menuobj = document.getElementById( "mypopupmenu" );
var ie5 = document.all;
function showmenu(e){
menuobj.innerHTML = '<div class="menuitems" url="http://liv.liviutudor.com">Visit My Personal Site</div>';
menuobj.innerHTML += '<div class="menuitems" url="http://blog.liviutudor.com">Visit My Blog Site</div>';
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX;
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY;
//if the horizontal distance isn't enough to accomodate the width of the context menu
if( rightedge < menuobj.offsetWidth )
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
//same concept with the vertical position
if( bottomedge < menuobj.offsetHeight )
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility="visible"
return false
}

function hidemenu(e){
menuobj.style.visibility="hidden"
}

function highlight(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="mymenuitems"||!ie5&&firingobj.parentNode.className=="mymenuitems"){
if (ns6&&firingobj.parentNode.className=="mymenuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
}
}

function lowlight(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="mymenuitems"||!ie5&&firingobj.parentNode.className=="mymenuitems"){
if (!ie5&&firingobj.parentNode.className=="mymenuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}

function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="mymenuitems"||!ie5&&firingobj.parentNode.className=="mymenuitems"){
if (!ie5&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}
</script>
...




	JavaScript Tips -- Page 1 Creating a Web-based Popup Menu Load a Page in the Background while Showing a "Cover" Image Next Page >>



Creating a Web-based Popup Menu Popups menus on web pages is such a common thing nowadays -- and really easy to implement as well. Because it turned into such a "trendy" thing to implement on a website, there are loads of commercial / shareware components that one can buy nowadays to implement this popup menu. I would recommend that you steer away from that and save your money, since implementing this is really not difficult at all. Here's how it works. Using JavaScript and DOM, you can create a new `<div>` element inside the document -- bear in mind that the `<div>` tag supports a `width` parameter, so you can limit the width of your menu! In fact, you don't need to create the `<div>` using JavaScript, it can already be created in your HTML and have the visibility set to `hidden`, so you can only show it when you need it. Also make sure that the positioning is set to `absolute` so you can move the `<div>` around the page independent of other elements in the page. Last but not least, assign it an ID so you can quickly find your `<div>` (menu) in the DOM using `getElementById()` function. Also, since it's a `<div>` tag you can apply a `class` to it to "skin" it to match your website look and feel. Also, bear in mind that in JavaScript we have access to each element HTML tags that it encases, via `innerHTML` property. This means we can change the code inside our `<div>` to build up a dynamic menu. Last but not least, there is a `oncontextmenu` event in JavaScript which is fired when the right mouse button is clicked (right-click). ... <!-- this is your skin --> <style type="text/css"> .mymenu { position: absolute; border: 1px solid navy; background-color: blue; font-family: Verdana, sans-serif; line-height: 20px; cursor: default; font-size: 9 px; visibility: hidden; } .mymenuitems { padding-left: 5px; padding-right: 5px; } </style> <!-- this is the menu --> <div id="mypopupmenu" class="mymenu" onmouseover="highlight(event)" onmouseout="lowlight(event)" onclick="jumptomenu(event)"> </div> <!-- the script that drives it --> <script type="text/javascript"> var menuobj = document.getElementById( "mypopupmenu" ); var ie5 = document.all; function showmenu(e){ menuobj.innerHTML = '<div class="menuitems" url="http://liv.liviutudor.com">Visit My Personal Site</div>'; menuobj.innerHTML += '<div class="menuitems" url="http://blog.liviutudor.com">Visit My Blog Site</div>'; //Find out how close the mouse is to the corner of the window var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX; var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY; //if the horizontal distance isn't enough to accomodate the width of the context menu if( rightedge < menuobj.offsetWidth ) //move the horizontal position of the menu to the left by it's width menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth else //position the horizontal position of the menu where the mouse was clicked menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX //same concept with the vertical position if( bottomedge < menuobj.offsetHeight ) menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight else menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY menuobj.style.visibility="visible" return false } function hidemenu(e){ menuobj.style.visibility="hidden" } function highlight(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="mymenuitems"\|\|!ie5&&firingobj.parentNode.className=="mymenuitems"){ if (ns6&&firingobj.parentNode.className=="mymenuitems") firingobj=firingobj.parentNode //up one node firingobj.style.backgroundColor="highlight" firingobj.style.color="white" } } function lowlight(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="mymenuitems"\|\|!ie5&&firingobj.parentNode.className=="mymenuitems"){ if (!ie5&&firingobj.parentNode.className=="mymenuitems") firingobj=firingobj.parentNode //up one node firingobj.style.backgroundColor="" firingobj.style.color="black" window.status='' } } function jumptoie5(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="mymenuitems"\|\|!ie5&&firingobj.parentNode.className=="mymenuitems"){ if (!ie5&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode if (firingobj.getAttribute("target")) window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target")) else window.location=firingobj.getAttribute("url") } } </script> ... In fact, if you right click on this page, you will get the above popup menu :-) Download the source. Read our download disclaimer.



Load a Page in the Background while Showing a "Cover" Image I have noticed that due to the fact that more and more websites seem to rely on heavy graphics on web pages, sometimes this tends to make the page load and be rendered slower on various clients PCs (because of a slow connection, older PC etc). In such cases, quite often, the website decides to be a bit clever and rather than "boring" the user with a slow-loading page, they sometimes show an image on the whole page while loading the page in the background and once the page is loaded the image is removed and the whole page is shown to the user. Since this tends to become some sort of "trend" in the web world, there are more and more people interested in how to do this. It is actually quite simple and a bit of JavaScript and CSSdoes the trick: the whole idea is to have a "layer" with absolute positioning and `z-index` set to a really high value, so the "layer" is actually on top of everything else in the page. This "layer" should be loaded before everything else so it is the first thing the user sees when visiting the page, while everything else is being loaded in the background. Once the page is loaded, the `onload` event will be fired in JavaScript at which point we could simply hide the "layer". Here's an extract of the code used: <!DOCTYPE ....> ... <head> ... <script type="text/javascript" language="JavaScript"> function hideMyImage() { var splash = document.getElementById("splashscreen"); splash.style.visibility="none"; } </script> ... <style type="text/css"> position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 999; </style> ... </head> <body onload="hideMyImage()"> <div class="mainimage" id="splashscreen"> <img src="myimage.jpg" alt="Page loading, please wait..."/> </div> .... </body> </html>



Go to next page. Go back to the Technical page. Go back to the main page.

JavaScript Tips -- Page 1

Creating a Web-based Popup Menu

Load a Page in the Background while Showing a "Cover" Image