Why am I getting a strange flickering problem

m2244 · 09-19-2012, 06:43 PM

With the code below I have several buttons but when I hover over them they flicker side to side. This problem seems to only happen with the middle 4.

Are their hit areas overlapping somehow because I have not styled them yet?

Code:

<div id="floatingConsol" name='floatingConsol'>

<input type="button" id="googleSearchButton" class="searchButton"></input>
<input type="button" id="youtubeSearchButton" class="searchButton"></input>
<input type="button" id="wikiSearchButton" class="searchButton"></input>
<input type="button" id="DrudgeSearchButton" class="searchButton"></input>
<input type="button" id="TownHallSearchButton" class="searchButton"></input>
<input type="button" id="BenelliSearchButton" class="searchButton"></input><br/>
<div id="page_display">test text</div>

<script type="text/javascript" language="JavaScript">
	createListeners();
</script>

Code:

function createListeners(){
	$('.searchButton').click(function(){alert(this.id);});
	
	$(".searchButton").mouseenter(function () {$('#page_display').html(this.id);});
	
	$(".searchButton").mouseleave(function () {$('#page_display').html("");});
}

m2244 · 09-19-2012, 06:58 PM

Got it. I need to take a deep breath.

When the text in the 'page_display' textfield was too large, it caused that div to move left a bit causing the mouseleave event to fire and it would move back. Flicker.

Sorry for this question.