Handy Little Popups

[Lord-Nikon]

Hi All (again )

I need your help again. I don't know if you guys have seen this on the web before: You have a link or a calender and when you mouse over a date a small window popsup bottom right of your mouse with details of that date in it and as soon as you remove your mouse, the popup disappears... HOW DO THEY DO THAT?

Now, what I've tried is the following:
1. Created a onmouseover event that calls a JScript function that gets me my php code that I need.
2. Written a css style to change my tooltip look and feel to look more like a window then a faded little box
3. Assign my details from my php code to a string variable
4. Changes the tooltip of the hovered space (link etc.) to my string...

Is this the right way to go about doing this or is this completely wrong? Please advise if you know the "real" secret to that...

An example : Hover your mouse over the 10th and see what I mean

 

[FarligOpptreden]

I think the jQuery library has some handy tooltip functions to handle your needs.

The way you implemented it though, looks a bit confusing. The way I would've done it is as follows:
1) Add an "onmouseover" event to handle the display of the popup.
2) Add an "onmouseout" event to handle the hiding of the popup.
3) Write a function to handle the creation of the popup box, which should typically be an absolutely positioned div, with the "top" and "left" of the "style" changing as you move the mouse to correspond with the cursor's x and y coordinates.

Hope this helps?

 

[FarligOpptreden]

Alright, a quick sample might be something like this:

Add a link to the page with the following attributes:

<a href="#" onmouseover="ShowPopup('This is displayed in a popup!');" onmouseout="HidePopup()">Some link</a>

Add a CSS class with something similar to this:

div.HoverCssClass
{
  position: "Absolute";
  width:120px;
  height:120px;
  border:solid 1px black;
  background-color:Silver;
  color:Black;
}

Finally, include the following script to your page:

<script language="javascript" type="text/javascript">
var div;
function ShowPopup(content)
{
  var x = event.clientX;
  var y = event.clientY;

  if (!div)
  {
    div = document.createElement("div");
    div.id = "divMyPopup";
    div.className = "HoverCssClass";
  }
  
  if (document.body.clientHeight > y + 130)
  {
    div.style.top = y + 10;	
  }
  else
  {
    div.style.top = y - 120;
  }
	
  if (document.body.clientWidth > x + 130)
  {
    div.style.left = x + 10;	
  }
  else
  {
    div.style.left = x - 120;
  }

  div.innerText = content;
  document.body.appendChild(div);
}

function HidePopup()
{
  div = document.getElementById("divMyPopup");
  if (div)
  {
    document.body.removeChild(div);
  }
  div = null;
}
</script>

This should give you an idea of how to approach the "custom popup" scenario.

*NOTE: This code hasn't actually been fully tested but just serves as a sample.

 

[Lord-Nikon]

Again thanks for your help FarligOpptreden! Basically I won't bother about X, Y positions of the popup as the popup will ALWAYS be displayed in the same spot no matter where you hover, only the details will change for this

I did however manage to do something pretty similar to your example:

<script type="text/javascript">
function mouseover(){
	it = document.getElementById('x1');
	it.style.visibility = 'visible'; 
}
function mouseout(){
	it = document.getElementById('x1');
	it.style.visibility = 'hidden'; 
}
</script>

and just formatted my DIV using CSS

EDIT: This is only for displaying the DIV, I haven't actually got that far as to add the details yet... Still working on that.. I need to get my details from my mySQL server and have it displayed in the DIV Will bug you later after some trial and error if you don't mind

 

[FarligOpptreden]

A better alternative to just showing/hiding the DIV is to create it when needed by using the DOM (as in the sample I gave you). This way, no unnecessary markup is transferred between the client and server nd you can also use the code on multiple pages without worrying about having the "x1" DIV statically added to every page...

 

[Lord-Nikon]

Now for the tricky part!

I've got my DIV to display when I'm hovering my mouse over a link. Basically, what I'm creating is a Online Calendar and Schedular for all our consultants on the road. I know there is a MASSIVE amount of scripts out there that I can just download and use, but that takes ALL the fun out of learning how to do this myself

So now I've got the current month and days in a nice calendar that looks really good. All the days are basic hyperlinks to a php script that will once clicked, give you the details about that day (00:00 - 23:00 - hours and bookings) which is working great! How do I get that day displayed in a nice summary when I just hover my mouse over the day? How do I send my day info from JScript to PHP and back to JScript to display it in my handy little popup Remember that each day has got an entry in a mySQL database...

ANY help would be much appreciated!

 

[FarligOpptreden]

That would necessitate an AJAX call. As I'm not too big on PHP AJAX I couldn't really help you out... Sorry man! The idea is that the onmouseover event handler performs an AJAX call to the server, retrieves the necessary data and renders the results back into the DIV. The OTHER option (not the best, IMHO) would be to pass the event data through to the tooltip's popup function by specifying it server side, so that the resulting day might look something as follows:

<div
    id="divDay25January2009">
    class="someCssClass"
    onmouseover="ShowPopup('13:00-14:00|This is the event information.#14:00-15:00|This is some more event information');"
    onmouseout="HidePopup();"
>25</div>

...then, in your ShowPopup() function, parse the string to get all the event information.

By looking at the sample you gave earlier in the thread, another option might be to list all the events at the bottom of the page with corresponding IDs for the DIVs so that you only have to display the content of the DIV at the bottom of the page in the tooltip. Does that even make sense?