Go Back   CodingForums.com > :: Client side development > JavaScript programming > Post a JavaScript

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-31-2012, 08:03 PM   PM User | #1
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,103
Thanks: 197
Thanked 2,421 Times in 2,399 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
Topdeck Popper Script updated

The original of this script was Mike McGrath. The script as published was intended for ancient browsers and is thus no longer useable, but I have updated it to bring it into line with modern standards. It works in IE, FF and GC.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
	
<html>
<head>

<!-- Original script by Mike McGrath.  Updated 2012 by Philip M -->

<style type = "text/css">
body {overflow:scroll;overflow-x:hidden}
.popper { position : absolute;  visibility : hidden; }
.generalred {font-family:Arial; color:red; font-size:100%; font-weight:bold }
</style>

</head>

<body link="#0000FF" alink="#0000FF" vlink="#0000FF">

<div id="topdeck" class="popper">&nbsp;</div>

<script type = "text/javascript">

var skn = topdeck.style;
document.onmousemove = get_mouse;

function pop(msg,bakgrcol) {

var content ="<table style='background-color:#000000;text-align:center;font-family:Arial;font-size:95%;border-collapse:collapse;border:1px solid #000000' width='180'><tr><td>" + 
"<table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFFFFF;font-family:Arial;font-size:85%;text-align:center;'><b>Detailed Info</b></td></tr></table>" +
"<table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:5px;text-align:center;font-family:Arial;font-size:85%;'>"+msg+"</td></tr></table></td></tr></table>";

// font sizes are adjustable to taste

document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";  
  
}

function getMousePosition(e) { 
return e.pageX ? {'x':e.pageX, 'y':e.pageY} : {'x':e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 'y':e.clientY + document.documentElement.scrollTop + document.body.scrollTop}; 
} 

function get_mouse(e) { 
if (!e) e = event; // make sure we have a reference to the event 
var mp = getMousePosition(e); 
var xx = mp.x; 
var yy = mp.y; 
skn.left = (xx - 60) + "px";  // px required
skn.top = (yy + 20) + "px";
} 

function kill() {
skn.visibility = "hidden";
}

</script>

<!-- Fragments from a customer's web page showing example coding/usage -->

<p align="center" class = "generalred">We suggest that you take a look at <b>Slater's</b> exciting range of  </b><br><a href="slatcoaches.html" ONMOUSEOVER="pop ('Complete list of <b>Slater\'\s </b> highly detailed injection moulded plastic kits for historic railway passenger carriages including examples from the 19th century to the end of the steam era', '#00CC33')"; ONMOUSEOUT="kill()">carriage kits</a> and <a href="slatwagons.html" ONMOUSEOVER="pop ('Complete list of the extensive range of <b>Slater\'\s</b> highly detailed injection moulded plastic kits for historic railway goods wagons including examples from the 19th century to the end of the steam era', '#00CC33')"; ONMOUSEOUT="kill()">goods wagon kits</a> (click to view the complete lists).</p>

<p align="center" class = "generalred"> We have over 200 different locomotive kits in stock. Click here to view <br><a  href="locokits.html" ONMOUSEOVER="pop ('Just a selection from the vast range of steam and diesel locomotive kits from the leading manufacturers which we stock and recommend.', '#00CC33')"; ONMOUSEOUT="kill()">a selection of the most popular models.</a></p>

</body>
</html>
__________________

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Philip M is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:00 AM.


Advertisement
Log in to turn off these ads.