|
Hi there,
I modified a javascript a while ago and combined it with a database driven image map - I'm nearly done with programming the map script and did all the modifications that i needed (bold text as title, image, description and an SQL counter), but there's still one thing bugging me:
if I approach the lower border of the map, the presented div layer will be positioned outside of the window, below the cursor.
How could I modify the script, so that the div layer will always be shown in the visible window area?
Thank you for your help!
Sascha
This is the link to the main map script: http://www.ars-aventuris.de/modules.php?op=modload&name=herotheatre&file=index&action=map&mode=region&parm=BOR
|
|
|
I'll take a look at your script, when I have the time. But you can certainly adjust the "top" property of the DIV's style. Also, JavaScript has an Event Object, which among other things, gives you the "clientX and clientY" values.
I think you could combine these to 1) determine where the mouse is and 2) adjust the div's position relative to the mouse.
I'll add to this when I've looked at your actual script.
<Added>
It looks like your script is already tracking the x,y values. Notice these lines from the script:
if(iex || nav)
{
skin.top=y+yyy;
skin.left=x+Xoffset;
}
if(n_6)
{
skin.top=(y+yyy)+"px";
skin.left=x+Xoffset+"px";
}
|
|
That's where you can make your adjustments, by testing the value of "y".
<Added>
I placed an edited version of your page/frame/script here:
http://www.tgreer.com/codetoad/swafnil.html
To show how/where you could make adjustments. Note that I hard-coded the adjustment.
Ideally, you would make the adjustment dynamically, based up on the dimensions of the DIV. But you don't know those measurements into the value of "content" has been assigned to the ".innerHTML" property. This is done through a different function call, function "popup".
What you could do is modify the popup function to return the dimensions of the DIV. In IE this is "offsetheight"... I don't know what is is in Mozilla. But you could adjust the "skin.top" value to bottom edge (600) minus the offsetheight of the div.
Did this post help? If so, thank Codetoad by clicking on one of the ads. Then thank me by going to my site and doing the same!
<Added>
Pardon my typo: I wrote "into" where I meant "until".
|
|
|
|
|
Hi tgreer,
THANK YOU! The code modifications you made really helped completing my RPG map - I thanked you as you wanted to, through clicking a codetoad ad and visiting your site through your profile.
Could I also add a remark to the script? I'd be glad to mention your work!
Have a great sunday!
Sascha
|
|
|
Sascha,
I'm glad I could help. Thanks for clicking some ads, every little bit helps. You don't need to put my name anywhere; I appreciate the thought.
|
|
|
|
|
I have spent the afternoon tinkering with your script trying to incorporate it into my xhtml code and css. Unfortunately, your script requests the class for the ul to be toggled between the .collapse and .expand class selectors small personal loan. This causes a number of problems in IE6 and IE7. The ul's are absolutely positioned into the same placeholder space when visible. Therefore, to style them I moved the .placeholder css code to the .expand css code, but IE seems to keep the space that would have been allocated for the ul when it is collapsed. This results in a flickering effect as you hover over the "top" li (which was previously an anchor in my first post) foreclosed homes.
My original script changed only the display: css value between block or none and IE worked fine with that modification. Is there any way to use my original script and add the "addEventListener" or equivalent for the onmouseover event handler?
I need help with a java script that increases image size and decreases on mouseover and mouseout for multiple images per page. In an html page answering service.
This script that I have tried to modify is for one image.
Can anyone help me with this, please.
Jerry
Here is the html page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08:00" />
<meta http-equiv="imagetoolbar" content="no" /> credit reports
|
|
|
|
|
|
|
|