473,748 Members | 4,935 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS Float Positioning Question revisited

8 New Member
It came to me while sleeping that my question was not being answered (all answered where in the form of changing the question) because the answer was not readily available. So I thought I might ask how to determine with of the actual window and calculate the image left from that since I could determine the image width.

But then I realized that the position of the mouse pointer would work just fine and so some googling resulted in this code:

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3. function getMousePosition(e) 
  4.    return e.pageX ? {'x':e.pageX, 'y':e.pageY} : 
  5.           {'x':e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 'y':
  6.           e.clientY + document.documentElement.scrollTop + document.body.scrollTop}; 
  7. }; 
  8.  
  9. function showMousePos(e) 
  10.    if (!e) e = event; // make sure we have a reference to the event 
  11.    var mp = getMousePosition(e);
  12.    var divref = document.getElementById('PopUp');
  13.    divref.style.left = mp.x + 'px';
  14.    divref.style.top  = mp.y + 'px';   
  15.    divref.style.display = 'block'; 
  16.    return;
  17. }; 
  18.  
  19.  
  20. -->
  21. </script>
  22.  
  23. <body>
  24.     <p align="center">
  25.     <img src="images/Marchsep.gif" onmouseover="showMousePos();" onmousemove="showMousePos();" onmouseout="document.getElementById('PopUp').style.display = 'none';" >
  26.     <div id='PopUp' style='display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px; 
  27.                            background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
  28.          onmouseout= "this.style.display = 'none' ">
  29.     This is a CSS Popup. I would like it to be positioned so that the top left of the pop up is based on the top left of the IMG. But I have settled for it being positioned so that the top left corner of the popup is where the mouse pointer is.
  30.     </div></p>
  31.  
  32. </body>
While not what I originally envisioned this does the trick and has the added flair of the float moving around a bit with the mouse (as long as the pointer is still on the image).

However, implied passing of the object reference to ShowMousePos() confuses me and has left me unsure of how to pass the 'PopUp' reference to that function, so I had to hardcode it into the routine. This is fine for testing but I need to pass the reference when I go to intergrate this into the application.

How do I pass the PopUp reference while still accessing the implied event reference?

Thanks again
Garth
Mar 22 '07 #1
1 1459
iam_clint
1,208 Recognized Expert Top Contributor
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3. function getMousePosition(e) 
  4.    return e.pageX ? {'x':e.pageX, 'y':e.pageY} : 
  5.           {'x':e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 'y':
  6.           e.clientY + document.documentElement.scrollTop + document.body.scrollTop}; 
  7. }; 
  8.  
  9. function showMousePos(e, obj) 
  10.    if (!e) e = event; // make sure we have a reference to the event 
  11.    var mp = getMousePosition(e);
  12.    var divref = document.getElementById(obj);
  13.    divref.style.left = mp.x + 'px';
  14.    divref.style.top  = mp.y + 'px';   
  15.    divref.style.display = 'block'; 
  16.    return;
  17. }; 
  18.  
  19.  
  20. -->
  21. </script>
  22.  
  23. <body>
  24.     <p align="center">
  25.     <img src="images/Marchsep.gif" onmouseover="showMousePos('PopUp');" onmousemove="showMousePos('PopUp');" onmouseout="document.getElementById('PopUp').style.display = 'none';" >
  26.     <div id='PopUp' style='display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px; 
  27.                            background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
  28.          onmouseout= "this.style.display = 'none' ">
  29.     This is a CSS Popup. I would like it to be positioned so that the top left of the pop up is based on the top left of the IMG. But I have settled for it being positioned so that the top left corner of the popup is where the mouse pointer is.
  30.     </div></p>
  31.  
  32. </body>
Expand|Select|Wrap|Line Numbers
  1.  
Mar 22 '07 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

12
10940
by: Stan Brown | last post by:
I've been thinking about float-ing a span versus float-ing a div, and the same for absolute positioning. When what is floated or positioned is a short chunk of text, I don't see any _visual_ difference between the two. What I want to do is float (or position) a revision date at the right margin of a line that also has some text left justified. I tried earlier to do this and failed utterly in MSIE 4. But I was using span not div, and...
1
3538
by: Aaron | last post by:
I'm using relative positioning to move a right-floated image 10px upwards.. Text wrapping around the image should go underneath it once it reaches the bottom of the image, yet it acts as if the image is still in it's original position and doesn't start wrapping until it's 10px below the bottom of the image. How can I work around this? TIA, Aaron
1
3320
by: JKenyon | last post by:
I am attempting to display two images on a web page. The second "image" is actually two images, one overlaid on the other. The first one is aligned on the left using float:left. I have enclosed the next two images in a <DIV> tag with float: right in order to force the containing content to be aligned on the right. I also set position:relative so that any absolute positioning within the <DIV> will be relative to the itself. The...
2
4319
by: Penguinny | last post by:
Dear all, I am trying to make a relatively simple layout with two adjustment columns filled with short news pieces, but there's a catch. I cannot control the html for these news bits, so I am left with CSS only for positioning etc. My problem is the following. The most natural way to do what I want is to use "float: left" (or "float: right") for my news bits and see them all filling the space. However, there's the catch: if the news...
2
5718
by: Dr. Richard E. Hawkins | last post by:
I've googled around, and asked everyone I know, but I still can't find any reference to anyone else having faced this particular IE bug with floats. I've put a page at http://dochawk.org/sample.html . This was made by stripping out the google ads from the regular pages. It validates as strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!) The main (right) column is made with alternating left and right floats to...
16
2621
by: Wolfgang Meier | last post by:
Hi, Although it might seem like I am firing out random posts in quick succession this matter is indeed one I thought about for quite some time without coming to a conclusion: Why is it that most professional CSS authors prefer /float/ing elements over elements held in place by /position/? Given, for example, the following layout...
34
2614
by: Xah Lee | last post by:
i have a very simple html doc using the following style: <style type="text/css"> ..x-note {background-color:#afeeee; margin:1ex; padding:1ex; float:right; line-height:130%; width:60ex; clear:both;} p {line-height:130%; width:70ex;} </style> typically, the <p> is main text of novels, and in between is <div class=x-note>...</div> that are annotations floating on the right side.
3
2572
by: Gert Brinkmann | last post by:
Hello, very often when using the float-property I do have problems with positioning the element in its parent container. And/Or the parent container behaves confusingly regarding its height. An example: <html> <head>
3
1769
by: hantechs | last post by:
<html> <body> <p style="width:30%;">text1</p> <p style="float:left;">text2</p> </body> </html> The effect of this html code is : text1 and text2 each is on a line. My question is: Why text2 is positioned on the right of text1? Because the CSS2.1 said: A floating element must be placed as high as possible; A left-floating element must be put as far to the left as possible; A
0
8991
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9370
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9247
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6796
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4602
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4874
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3312
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2782
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2215
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.