jQuery.tooltip() built with hoverIntent

Posted by: Martin in jQuery, js, programming on June 14th, 2009

The jQuery tooltip-Plugin I wrote about in a previous Post is now ready to be published and I finally found the time to setup a demo-page and publish it.

The project is now called ‘jtooltip’ and is hosted on google-code.

Tags: , , ,

1 Comment


no comment

Posted by: Martin in WTF, fun, php, programming on January 10th, 2009

The following piece of code was found whilst analyzing actual production-code for one of our customers. It was part of the implementation of a quiz-game that has been online (and – quite astonishingly – actually worked) for over a year. What do you think I said when being asked how much of it could be reused?

$solutions = array(
    "correct","correct","correct","correct",
    "correct","correct","correct","correct",
    "correct","correct","correct","correct",
    "correct","correct","correct","correct",
    "correct","correct","correct","correct",
    "correct","correct","correct","correct",
    "correct" );
 
// [...]
 
    # output rows
    $addon_where = " and solutiontext='".$solutions[$x-1]."'";
    if ($solutions[$x-1]!="") {
        $addon_query = $addon_where;
    } else {
        $addon_query = "";
    }
    $addon_query = "";
 
// [...]

No Comments


using symfony in safe_mode environments

Posted by: Martin in php, programming, symfony on January 10th, 2009

When I first tried to deploy a symfony-application to a server that runs in safe_mode, all I got was an error-page telling me that I am not allowed to do what I wanted to. The reason is simple, but actually a bit hard to find on the net. It is this: php has a problem with the glob-function in safe-mode environments. This bug was introduced whilst trying to fix another problem tha glob-function had.

Now, the symfony-framework uses the glob-function rather a lot – for instance to detect config-files of plugins whose names are (quite naturally) unknown. The fix for the issue is available in php-5.2.5 upwards – which is not available on our target system. The only possible solution for this was to patch the symfony-library to avoid using the buggy glob-function.

So I had to rewrite the glob-function in php (making use of symfony’s sfFinder-class) an put it to use throughout the symfony-library. The corresponding patch is available here. Here’s the code of the glob-function implemented in sfToolkit::glob():

public static function glob($expr) {
  if($tmp = @glob($expr)) { return $tmp; }
 
  $parts = explode(DIRECTORY_SEPARATOR, $expr);
  $searchedDirs = array("");
 
  while(null !== ($part = array_shift($parts)))
  {
    if($part === "") { continue; }
 
    if(!preg_match("/[*?]/", $part))
    {
      foreach($searchedDirs as $idx => $dir)
      {
        $searchedDirs[$idx] .= DIRECTORY_SEPARATOR . $part;
      }
 
      continue;
    }
 
    if(count($parts) > 0)
    {
      $searchedDirs = sfFinder::type('dir')
             ->name($part)->maxdepth(0)
             ->in($searchedDirs);
    }
    else
    {
      $searchedDirs = sfFinder::type('any')
             ->name($part)->maxdepth(0)
             ->in($searchedDirs);
    }
  }
 
  return $searchedDirs;
}

Tags: , , ,

7 Comments


using jQuery.hoverIntent to show tooltips

Posted by: Martin in jQuery, programming on December 30th, 2008

The jQuery-plugin hoverIntent by Brian Cherne extends the jQuery hover-function with timeouts and a sensitivity to determine what the user was up to do instead of instantly exposing its behaviour on an element the mouse just passed by. An excellent idea making flickering overlays and menus a thing of the past.

Based on this Plugin, I was trying to create a tooltip-plugin (better be said “yet another tooltip-plugin”, but that name is already taken) that behaves a little bit like the original browser-tooltips.

The problem when trying to make use of the hoverIntent-functionality – for instance for showing a tooltip – is that you usually don’t want the tooltip to get hidden when the mouse hovers over it. But thats exactly what you end up with following the naïve approach of creating a global helper element to hold the contents for all tooltips and use the hoverIntent-Plugin on the tooltip’s owner-element to show it.

But, the global helper element usually won’t be a child element of the element that owns the tooltip. Therefor anytime the mouse moves from the owner-element into the tooltip element a mouseout-event is fired on the owner-element – causing the tooltip to hide away.

I’ve tried around with some possible solutions including not using hoverIntent at all until I finally came up with a solution: When the tooltip-div is shown, an event-listener is attached to it that receives the mouseover and -out events and delegates them to the owner-element. In order to make this work in the desired way, the target and relatedTarget (fromElement/toElement in IE) properties of the event-object need to be exchanged.

The following is the show-method that is called by the hoverIntent-plugin:

function show(ev) {
    var s=$(this).data('tooltipSettings');
 
    // update the tooltip-container with new content
    _updateHelpers(this, ev, s);
 
    // delegate mouseover and -out events for the tooltip
    var holder = this;
    helpers.wrap.bind( 'mouseover mouseout', function(e) {
        var rt = (e.type == "mouseover" ? e.fromElement : e.toElement)
                || e.relatedTarget;
        e.relatedTarget = e.target;
        e.target = rt;
        // forward event to the owner-element.
        $(holder).triggerHandler(e.type, e);
    });
 
    // show the tooltip container
    helpers.wrap.show();
};

The complete code for this plugin is now available on googlecode. I will continue working on an Article on the details of the plugin.

Tags: , ,

3 Comments




SetPageWidth