SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flicker problem with mouseovers and divs

    Hello all, javascript novice here.

    On a customer request, I came up with what I thought was a pretty cute, transparent tool tip script.

    You can see the demo online here: http://www.designbyfamous.com/6/b.html

    Of course, I'm having a flicker problem. If you move your mouse down the blocks, it doesn't exist, or is at least fairly unnoticeable. However, if you move up the blocks, the flicker is, in my customer's words, "pretty severe". Ugh.

    Relevant code:

    HTML:
    HTML Code:
    <div class="bnav">
     
     	<div class="hextop">
     		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="uno">1,358</div></a>
     		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="dos">5,283</div></a>
     		<a href="#" onClick="hidetip();" onmouseover="showtip('#CCCCCC','#666666','TEXT');" onmouseout="hidetip();"><div id="tres">391</div></a>
     	</div>
     	<a href="#" onClick="toggle('check'); hidetip();" onmouseover="showtip('#99CCFF','#0066FF','TEXT');" onmouseout="hidetip();"><img src="images/b_check_off.gif" name="check" id="check" width="32" height="14"></a>
     	<a href="#" onClick="toggle('plus'); hidetip();" onmouseover="showtip('#99FF33','#336601','TEXT');" onmouseout="hidetip();"><img src="images/b_plus_off.gif" name="plus" id="plus" width="32" height="14"></a>
     	<a href="#" onClick="toggle('purple'); hidetip();" onmouseover="showtip('#9999FF','#6633CC','TEXT');" onmouseout="hidetip();"><img src="images/b_purple_off.gif" name="purple" id="purple" width="32" height="14"></a>
     	<a href="#" onClick="toggle('stop'); hidetip();" onmouseover="showtip('#FF3300','#CC3300','TEXT');" onmouseout="hidetip();"><img src="images/b_stop_off.gif" name="stop" id="stop" width="32" height="14"></a>
     
     </div>
     
     
     <!-- hidden div for tooltip -->
     <div id="tooltip">check<div id="toolback"><!-- transbox --></div></div>
    CSS:
    Code:
    #tooltip {
     	position: absolute;
     	width: 76px;
     	height: 13px;
     	color: #000000;
     	text-align: center;
     	font-size: 9px;
     	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     	border: 1px solid Red;
     	visibility: hidden;
     	z-index: 1000px;
     }
     
     #toolback {
     	position: absolute;
     	width: 76px;
     	height: 13px;
     	opacity: .50;
     	filter: alpha(opacity=50);
     	-moz-opacity: 0.5;
     	background: Red;
     	z-index: 999px;	
     	visibility: hidden;
     }
    javascript:
    Code:
    // find mouse position
     window.onload = init;
     function init() {
     if (window.Event) {
     	document.captureEvents(Event.MOUSEMOVE);
     }
     document.onmousemove = getPosition;
     }
     
     function getPosition(e) {
     x = (window.Event) ? e.pageX : event.clientX;
     y = (window.Event) ? e.pageY : event.clientY;
     }
     
     
     // show tooltip
     function showtip(color,border,text) {
     var tooltip = document.getElementById("tooltip");	
     var toolback = document.getElementById("toolback");	
     
     //move to be better situated with the cursor
     var Yadjust= y - 14;
     
     //change the color
     	toolback.style.background=color;
     	tooltip.style.borderColor=border;
     
     //position it
     	tooltip.style.left=x + "px";
     	tooltip.style.top=Yadjust + "px";
     	
     //position background in tooltip
     	toolback.style.left=0 + "px";
     	toolback.style.top=0 + "px";
     	
     //add text
     	document.getElementById("tooltip").firstChild.nodeValue=text;
     
     // make it appear
     	tooltip.style.visibility="visible";
     	toolback.style.visibility="visible";
     }
     
     function hidetip() {
     var tooltip = document.getElementById("tooltip");	
     var toolback = document.getElementById("toolback");	
     	
     	tooltip.style.visibility="hidden";
     	toolback.style.visibility="hidden";
     }

    I have googled and searched here, and everything about flicker seems be regarding background images. My script doesn't use any images.

    Can anything be done to fix the flicker?

    (As always, thank you so much for any help. These forums are always such an invaluable resource).
    Last edited by Jenna; Jul 10, 2006 at 23:14.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the tooltip hiding itself when you move your mouse over it?

    Douglas
    Hello World

  3. #3
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Excellent question! That would make sense, actually. The browser is reading that as onmouseout, I guess?

    So that is more than likely the problem, now I just have to figure out the solution. At the moment, I am completely stumped. Any suggestions on how to proceed?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to do it is to move the tooltip with the mouse so that onmouseout event never fires.

    You'll need to distance the tooltip a bit further from the pointer for that to work.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I nver actually read the code you posed, but I assume that it would be possible to set the parent of the tooltip to be the thing you are hovering over. You'll need a bit more code to work out xactly what top/left to set.

    Say: hoveredOverElement.appendChild(tooltipElement)

    Then the tooltip would be part of the thing you are hovering over, so you wouldn't go "out" of it if you move the mouse over the tooltip.

    Another option would be to calculate the onmouseout yourself. So rather than catching the onmousemove of the element you want to tooltip to be shown for, instead you watch window.onmousemove, and work out with a little bit of maths when the mouse is over the thing you want to show the tooltip for. I think that thins is how the Yahoo drag drop manager works.

    Douglas
    Hello World

  6. #6
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks y'all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •