Fun with Javascript.

    Date: 02/18/06 (WebDesign)    Keywords: php, css, html, seo

    [Error: Irreparable invalid markup ('') in entry. Owner must fix manually. Raw contents below.]

    I'm working on a site design using a good deal of DHTML and have run into a snag. I'm trying to detect where the user's mouse is, but I can't for the life of me get the correct position. I'm using the mouse detection script from quirksmode, but instead of giving me a position anywhere near the mouse (which in the case of what I was attempting to detect would of been somewhere in the neighbourhood of 100,350), but instead thinking my mouse is down outside of the page view somewhere around 560X. (Just in case it makes a difference, I have part of the page pulled in with a php require() ).


    tooltip.js

    function inittooltip(target)
    {
    tltp = new getObj(target);
    tltp.obj.onmouseover = showtooltip;
    tltp.obj.onmouseout = stoptooltip;
    }

    function showtooltip(e)
    {
    var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
    var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1)

    var posx = 0;
    var posy = 0;
    var targ;

    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
    posx = e.pageX;
    posy = e.pageY;
    }else if (e.clientX || e.clientY)
    {
    posx = e.clientX;
    posy = e.clientY;
    if (isIE)
    {
    posx += document.body.scrollLeft;
    posy += document.body.scrollTop;
    }
    }

    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;

    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug

    if (targ == "[object HTMLImageElement]") targ = targ.parentNode;

    tltarg = new getObj('tltp' + targ.id);
    alert(posx);

    tltarg.style.top = posx + 'px';
    tltarg.style.left = posy + 'px';
    tltarg.style.display = "block";
    }

    function stoptooltip(e)
    {

    }

    function getObj(name)
    {
    if (document.getElementById)
    {
    this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
    }
    else if (document.all)
    {
    this.obj = document.all[name];
    this.style = document.all[name].style;
    }

    else if (document.layers)
    {
    this.obj = getObjNN4(document,name);
    this.style = this.obj;
    }
    }

    function getObjNN4(obj,name)
    {
    var x = obj.layers;
    var thereturn;
    for (var i=0;i {
    if (x[i].id == name)
    thereturn = x[i];
    else if (x[i].layers.length)
    var tmp = getObjNN4(x[i],name);
    if (tmp) thereturn = tmp;
    }
    return thereturn;
    }



    index.php



    ini_set('display_errors', 1);
    error_reporting(E_ALL & ~E_NOTICE);
    ?>

    Babillon Networks




    require('template/main/start.php');
    ?>





    start.php










































    mainstyle.css
    #mainmenu {
    background-color: #C7C7C7;
    max-width: 350px;
    min-height: 200px;
    padding: 10px 10px 10px 10px;
    }

    #navbox {
    position: relative;
    top: 10px;
    }

    #maintitle {
    position: relative;
    float: left;
    padding-right: 20px;
    }

    #display {
    position: relative;
    min-width: 330px;
    min-height: 170px;
    top: -4px;
    background-color: #FFFFFF;
    }

    .tooltip {
    display: none;
    background-color: #C7C7C7;
    border-style: solid;
    border-width: 2px;
    border-color: #B70302;
    }



    Source: http://community.livejournal.com/webdesign/1064403.html

« Oh help! Who should host my... || shameless plug »


antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home