Jump to content

AJAX pop up on hover


cmgmyr
 Share

Recommended Posts

I want to have a script that when you rollover an image it loads a page into a "pop-up". Kind of what Netflix does here: http://www.netflix.com/BrowseSelection?lnkctr=nmhbs. But I want to be able to move the mouse onto this pop up so that the user can click on elements in it (this will also have ajax elements in it). I uploaded an example of what I'm looking for (I just made it in photoshop).

 

Does anyone know a tutorial that I can use, or an example? I've been looking for a while but I haven't found something that does what I want it to.

 

Thanks!

 

[attachment deleted by admin]

Link to comment
Share on other sites

Thanks for the link. I checked it out, but I think it's going to be way too bulky for the application. Between the javascript includes and the html that I would have to include in the link...it's a lot of code.

 

Thanks again though! Any other ideas? :)

Link to comment
Share on other sites

give this a shot...(NOTE:  I did not create this code, it was given to me in response to a similar post that i made on another forum at: http://www.webmasterworld.com/css/3337813.htm)

 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<title>test page</title>

<script type="text/javascript" language="JavaScript"> 
<!-- Copyright 2006 Bontrager Connection, LLC 
var cX = 0; var cY = 0; 
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;} 
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;} 
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; } 
else { document.onmousemove = UpdateCursorPosition; } 
function AssignPosition(d) { 
d.style.left = (cX+10) + "px"; 
d.style.top = (cY+10) + "px"; 
} 
function HideContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "none"; 
} 
function ShowContent(d) { 
if(d.length < 1) { return; } 
var dd = document.getElementById(d); 
AssignPosition(dd); 
dd.style.display = "block"; 
} 
function ReverseContentDisplay(d) { 
if(d.length < 1) { return; } 
var dd = document.getElementById(d); 
AssignPosition(dd); 
if(dd.style.display == "none") { dd.style.display = "block"; } 
else { dd.style.display = "none"; } 
} 
//--> 
</script> 

<style type="text/css"> 
div.FAQ { color: #336633; font-weight: bold; font-size: 12px; font-family: Arial, sans-serif; background-color: #ffffcc; text-align: center; padding: 10px; border: solid 1px; position: absolute; display: none } 
#UNIQUEID { background-color: #ffc; position: absolute; display: none }
</style> 

</head> 

<body bgcolor="#ffffff"> 
<p> 
blah blah blah... 
</p> 
<p> 
blah blah blah... 
</p> 
<p> 
blah blah blah... 
</p> 
<p> 
blah blah blah... 
</p> 
<a onmouseover="ShowContent('UNIQUEID'); return true;" onmouseout="HideContent('UNIQUEID'); return true;" href="#" target="_self">LINK</a> 
<div id="UNIQUEID" class="FAQ">IMAGE OR TEXT HERE<br> </div> 
<p></p> 
</body> 
</html> 

 

hope this helps.

Link to comment
Share on other sites

hmmm, very interesting. Close too. But the problem that I'm seeing with a lot of scripts is that I can't "use" the pop up. Meaning...I need to be able to put html, images, text, links, pics, anything else in that "pop up", I also need to be able to move the mouse over onto it so that I can use the elements in it. Thanks for the script though!

Link to comment
Share on other sites

Chris,

 

I'd give overLib another look.

 

It requires one script and one div statement.

 

Everything inside of the return overLib('')  quotes is simply html ( which can include calls to other javascript ) AND can be define as a Javascript Var.

 

Here is overLib in a simple form...

 

Download the overLib package, and move overlib.js to the javascript folder ( or change the pointer in my example below.)

 

You will see all is well, and really very simple.

 

Scot L. Diddle, Richmond va

 

 

 



<html>
<head>
<title>overLIB test</title>

<link type="text/css" rel="stylesheet" href="css/default.css">

<script language="JavaScript" src="javascript/overlib.js"></script>

</head>

<body>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

<a href="#" class="mainmenu" onmouseover="return overlib('<a style=\'margin-left: 85%;\' href=\'javascript:void();\' onmouseOver=\'return nd();\' >Close</a><br /><br /><a href=www.somesite.com>Make overLIB even more powerful.</a><br /><br > This remains sticky until you mouseOver another overLib enabled link (or mouseOver the Close Link above...)', STICKY);" onmouseout="return nd();">overLib Test Link</a><br><br>

</div>

</body>

</html>

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.