Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamically create div

Status
Not open for further replies.

jkalb32

Programmer
Apr 2, 2007
5
US
how can i dynamically create a div to appear at the mouse cursor when the cursor moves over a <span> inside a <p>
 
Use somthing like a mouseover event on the <span> in question. You can then create a new div node and attach it to the document and calculate the mouseX and Y coordinates to position the div.

I have found the Prototype framework very handy in supplying the X and Y of the mouse relative to all manner of things.

Let us know how you go - and if you have any problems, post some example code and we will endeavour to help directly.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
jkalb32, do you really want to CREATE the div at that point or do you just want it to display?

You could have a single already created div set not to display. Using an event over that tag you can position the div, alter it's content based on current need and display it. This way a single hidden div could be reused many times on your page.
Or you could have the div already set the way you want it and just toggle it's display properties as needed, the best approach depends on your needs for the app.

I created code that would detect screen position of the element an event occured on then used that information to place my own div into position using absolute positioning so that it floated over top of the rest of the page. I determined the display location and based on the size of the div, the size of the current window and proximity to the top, bottom and sides of the viewable window would re-position the div so that it would always remain on screen but not directly on top of the source element it relates to.
I have used this code for positioning on-page popup calendars and for tool-tip boxes where the event that calls the function to display the box also passes in the specific message for that box.

In any event, you may not have the need to dynamically create the box, you may be able to just position an existing one or even just toggle the display of an already positioned box.


At my age I still learn something new every day, but I forget two others.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top