Page 1 of 1
DHTML popup tutorial
Posted: Thu Nov 30, 2006 1:25 pm
by Luke
Does anybody know a good tutorial or script that teaches you how to create a DHTML popup. I would like an effect sort of like when you hover your mouse over the binoculars on ask.com...
http://www.ask.com/web?q=stuff&qsrc=0&o ... &sugreqs=2. I don't need the website snapshot, I just want my popup to look sort of like theirs. Any help? Maybe somebody can just let me know what I need to do to even get started on creating my own??
Posted: Thu Nov 30, 2006 1:59 pm
by nickvd
1) Create The static html/css you require to get the popup to look the way you want.
2) Break the html down into chunks you can either create (using the dom) or insert via the icky innerHTML property
3) Create an hover/blur (or mouseover/out) event handler
4) When it triggers, either add the (dom-created) element to the page (using css to style it) or use innerHTML.
5) Use one of the various methods to determine mouse location (for positioning of the popup, or use different logic depending on your needs)
Or....
Look at ask's source code and STEA^H^H^H^Hborrow
Post more info about how you want it to work (what will be hovered, or will it be clicked/scripted to pop up), I may be able to help you further once I get a better grasp of exactly how you want it to work, but what I outlined above should be enough to jog your mind in the right direction...
Posted: Thu Nov 30, 2006 2:01 pm
by Luke
thanks... I'll give it a go and post back if/when I have troubles!

Posted: Thu Nov 30, 2006 6:44 pm
by Luke
Alright I've got it almost... all I need now is to figure out how get the mouse's coordinates:
Code: Select all
function adsImagePopupInit(containerId)
{
var container = $(containerId);
// Loop through container's <img> tags and disable their links (allows for page to still work w/out javascript enabled)
// While looping through, also add on mouseover and mouseout events to cause the popup and popdown
var anchors = container.getElementsByTagName("img");
for(var i in anchors)
{
if(typeof anchors[i] == 'object')
{
var image = anchors[i];
image.parentNode.href = 'javascript:;';
image.onmouseover = function()
{
adsImagePopup('ads_popup_container', this);
}
image.onmouseout = function()
{
adsImagePopdown('ads_popup_container');
}
}
}
var adsPopupContainer = $('ads_popup_container');
adsPopupContainer.style.display = 'none';
}
function adsImagePopup(popupElement, fromElement)
{
if(typeof popupElement == 'string')
{
var popupElement = $(popupElement);
}
popupElement.innerHTML = '<img src="' + fromElement.src + '">';
popupElement.style.display = 'block';
popupElement.style.position = 'absolute';
popupElement.style.zIndex = '1000';
// I need to change the positioning to be where the mouse is here
}
function adsImagePopdown(popupElement)
{
if(typeof popupElement == 'string')
{
var popupElement = $(popupElement);
}
popupElement.style.display = 'none';
}
if (window.addEventListener){
window.addEventListener('load', function (){ adsImagePopupInit('product_alternates')}, false);
}
else if (window.attachEvent){
window.attachEvent( "onload", function (){ adsImagePopupInit('product_alternates')});
}
Posted: Thu Nov 30, 2006 9:24 pm
by Zoxive
The Ninja Space Goat wrote:Alright I've got it almost... all I need now is to figure out how get the mouse's coordinates:
google.com/search?q=javascript+mouse+x+y
Posted: Fri Dec 01, 2006 10:05 am
by Luke
The problem I find with searching for javascript help on the internet is that most of the javascript tutorials and scripts that you get as results are really badly written and/or really old. I want to use some up-to-date, well-written javascript.
Posted: Fri Dec 01, 2006 12:17 pm
by Luke
I found this script, and a few others... they all seem to give me the same error... that e is undefined.
(reguardless of if you set the e argument or not)
Code: Select all
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
Well... doesn't this line take care of that?
Anyway... what am I supposed to set as e? some sort of event? I'm confused... javascript is a strange world to me.
Posted: Fri Dec 01, 2006 12:36 pm
by Burrito
ie uses event as a global, other browsers do not (you need to pass it)
Code: Select all
<div onMouseOver="someFunction(event)"></div>
Posted: Fri Dec 01, 2006 12:46 pm
by Luke
What are you supposed to pass to it? I tried passing "event" and "window.event". I don't know what either of those are... I need to do some homework I guess.
Posted: Fri Dec 01, 2006 12:51 pm
by Burrito
here's an example:
untested:
Code: Select all
<script>
function showPop(which,evt)
{
tp = evt.clientY;
which.style.top = parseInt(tp + 5 + document.body.scrollTop);
which.style.display = "block";
}
function hidePop(which)
{
which.style.display = "none";
}
</script>
<span onMouseOver="showPop(document.getElementById('first'),event)">Mouse Over me</span>
<span onMouseOver="showPop(document.getElementById('second'),event)">Mouse Over me too</span>
<div style="display:none;border:1px #000000 solid;height:40px;top:0px" id="first">some hidden div</div>
<div style="display:none;border:1px #000000 solid;height:40px;top:0px" id="second">some hidden div</div>
edit: oops I forgot to put the onMouseOut...but you get the idea.
edit2: also forgot to make the divs absolutely positioned
Posted: Fri Dec 01, 2006 12:57 pm
by Luke
This is part of a function that loops over a bunch of links, changes their href and then ads mouseover and mouseout effects instead (to trigger the popup and close). When I send the "event" parameter, I am told it's undefined... why?
Code: Select all
var image = anchors[i];
image.parentNode.href = 'javascript:;';
image.onmouseover = function()
{
adsImagePopup('ads_popup_container', this, getMouseCoordinates(event));
}
image.onmouseout = function()
{
adsImagePopdown('ads_popup_container');
}
Posted: Mon Dec 04, 2006 2:46 pm
by Luke
bump