DHTML popup tutorial

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

DHTML popup tutorial

Post 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??
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

thanks... I'll give it a go and post back if/when I have troubles! :D
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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')});
}
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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?

Code: Select all

if (!e) var e = window.event;
Anyway... what am I supposed to set as e? some sort of event? I'm confused... javascript is a strange world to me.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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');
			}
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

bump
Post Reply