DHTML popup tutorial
Moderator: General Moderators
DHTML popup tutorial
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??
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
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...
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...
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')});
}
google.com/search?q=javascript+mouse+x+yThe Ninja Space Goat wrote:Alright I've got it almost... all I need now is to figure out how get the mouse's coordinates:
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)
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.
(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
}Code: Select all
if (!e) var e = window.event;ie uses event as a global, other browsers do not (you need to pass it)
Code: Select all
<div onMouseOver="someFunction(event)"></div>here's an example:
untested:
edit: oops I forgot to put the onMouseOut...but you get the idea.
edit2: also forgot to make the divs absolutely positioned
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>edit2: also forgot to make the divs absolutely positioned
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');
}