JavaScript - Tooltips Smooth In Ff, Slow/choppy In Ie?

I am trying to get these Mootool Tooltips to work:
http://demos111.mootools.net/Tips

Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/

Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided.

It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work.

If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has.

Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them...

Thank you VERY much for ANY help.

If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P

Hi.

I have an interactive house on my website with an image map that different areas link to pages when clicked on. A short title when mouse hovers over.

I want to make this look better, better display of text when mouse hovers over, and textbox below image that gives a descrpition of the area selected.

Does anyone have a simple way I could do this?

I am using wordpress.

Thanks, James

I use this tooltip script on my site: http://craigsworks.com/projects/simpletip/

The problem is that I have several links in the same div class and I want to load different content in tooltip when the mouse is over different links. This is the code I use to load tooltip:

Code:

$(document).ready(function(){
// Create your tooltips 
var api = $(".ttip a").simpletip().simpletip(); 
api.load('include.php'); 
});

This is the HTML code:

Code:

<div class="ttip">
<a userid="1" href="#" >user1</a><br />
<a userid="2" href="#">user2</a>
</div>

Now the tooltip works only for the first link. For the second one only some default text is shown instead when I hover it!

Can anyone please help?

Hi there,

I was wondering if there were any scripts (or if you could build be one) which allow first-time visitors to read through step by step tooltips which explain features of a system.

For example, users could click on "next" to make that tooltip dissapear, and the next tooltip reappear.

ANy help would be great,
Thanks

I'd seriously appreciate some guidance with the following:-

The site in question: http://www.professorbet.com/2010/football2010win.php

The problem: Popups work fine, as they open the mini thumbnails when you mouseover. However, as you scroll down the page, the images move with you. So, if you mouseover'd the top result (having not scrolled down) the graph would appear when it was supposed to. However, if you scrolled down 200px, and then mouseover'd the top result (or any result), the thumbnail would popup 200px lower than it should.

The guide site I used: http://www.dynamicdrive.com/dynamici...agetooltip.htm - it doesn't happen on their site (potentially because they're not as stupid as me).

I set up a dummy site of their site: http://www.professorbet.com/1.htm - I just copied the source code for everything and changed literally nothing. It still happens on my version of the site.

If this is a simple fix that anyone knows, I would love the help. If not, I'll just continue crying myself to sleep.

Thank you in advance!

Code:

<script type="text/javascript" src="ddimgtooltip.js">

/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Code:

/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

	//***** NO NEED TO EDIT BEYOND HERE

	tipprefix: 'imgtip', //tooltip ID prefixes

	createtip:function($, tipid, tipinfo){
		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
				'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
				+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
				)
			.css(tipinfo[2] || {})
			.appendTo(document.body)
		}
		return null
	},

	positiontooltip:function($, $tooltip, e){
		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
		$tooltip.css({left:x, top:y})
	},
	
	showbox:function($, $tooltip, e){
		$tooltip.show()
		this.positiontooltip($, $tooltip, e)
	},

	hidebox:function($, $tooltip){
		$tooltip.hide()
	},


	init:function(targetselector){
		jQuery(document).ready(function($){
			var tiparray=ddimgtooltip.tiparray
			var $targets=$(targetselector)
			if ($targets.length==0)
				return
			var tipids=[]
			$targets.each(function(){
				var $target=$(this)
				$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
				var tipsuffix=parseInt(RegExp.$1) //get d as integer
				var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
				var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
				$target.mouseenter(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.showbox($, $tooltip, e)
				})
				$target.mouseleave(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.hidebox($, $tooltip)
				})
				$target.mousemove(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.positiontooltip($, $tooltip, e)
				})
				if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
					$tooltip.mouseenter(function(){
						ddimgtooltip.hidebox($, $(this))
					})
				}
			})

		}) //end dom ready
	}
}

//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser.
Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/
implements a tooltip for multiple select drop down menu.Can you modify the code for single select

I'm trying to slow this image rotator down.


I thought I would just change the setInterval part. But it's not working.

Quote:
$(function() {
setInterval( "nextPage()", 7000 );
});
Below is the full script. Am I missing something?

Code:

// Global variable that controls billboard image rotation
var $rotate = 1;

// Load this script when page loads
$(document).ready(function(){
	
 // Set up a listener so that when anything with a class of 'bbtab' 
 // is clicked, this function is run.
 $('.bbtab').click(function () {

	// Turn off autorotation.
	$rotate = 0;
	
  // Remove the 'bboard_page_active' class from the visible tab contents.
  $('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');

  // Add the 'bboard_page_active' class to the associated tab contents.
  $(this.rel).addClass('bboard_page_active');
  return false; //stop the links default action
 });
});

function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page   = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
	// Remove the 'bboard_page_active' class from the active page.
	$('#'+$active_page).removeClass('bboard_page_active');
	// Add the 'bboard_page_active' class to the next page.
	$('#bbpage'+$next_page).addClass('bboard_page_active');
	// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}

$(function() {
setInterval( "nextPage()", 7000 );
});

Heya guys.

My gallery javascript is running very laggy in IE8.

Here's an example:

www.amex-trading.dk/pizzaovne.php

It works fine in chrome, but it's slow when using IE.

Any suggestions?

Hello guys,

The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE.

Take a look here - the menu is called "Produkter"

Thanks in regard

Hey All,

I've got the following site that loads great in FF and Chrome (no surprise), but is terribly slow in IE7. It's even quick in IE6, but not 7. Here's the site:

http://www.hanshawengines.com/

Now I'm using JQuery in a couple places, but it's by no means nothing crazy. The page is fairly simple.

I thought of preloading the main content images, but even after they are loaded in the cycle, the loading time is still slow.

Any suggestions on how I could improve this would be greatly appreciated.

Thanks.

hi guys

I am looking at this template:
http://www.csstemplatesfree.org/prev...ero/index.html

I think the sliding at the top happens way too frequently. How can I slow it down? I think it would be better if the slides change once every 6 seconds.

Hi,

I am writing a basic app for a client where the customer puts in their order ID and phone number and press submit. When testing it on my PC it worked flawlessly. When I tested on a desktop PC where the screen was a touch screen as well as on Android devices, it seems the browser is a bit slow to respond. If you press each number slowly (waiting 0.5 second per press) it works fine. However if use it normal to fast then the browser does not catch every button press. Any and all advice is appreciated to heklp make this work.

Code:

<title>DLUX Order alert system</title>
<head>
<center><font color="blue"><b>DLUX Order alert system</b></font></center></br></br>
		<body onload="empty_to_do();">

		<script type="text/javascript">

		function addOrderID(key){
        	var order_id = document.forms[0].order_id;
        	order_id.value = order_id.value + key;
			}

		function setToDo(key){
        	var to_do = document.forms[0].to_do;
        	to_do.value = key;
        	setTimeout(submitForm,100);
			}

		function addPhoneNumber(key){
        	var phone_number = document.forms[0].phone_number;
			var phone_number_real = document.forms[0].phone_number_real;
        	phone_number.value = phone_number.value + key;
			phone_number_real.value = phone_number_real.value + key;
			phone_number_real.value = phone_number_real.value.substr(0,10);
			if(phone_number_real.value.length <1){
				phone_number.value = '';
				}
			if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
				}
			if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
				}
			if(phone_number_real.value.length > 5){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
				}
			}

		function delOrderID(key){
        	var order_id = document.forms[0].order_id;
        	order_id.value = order_id.value.substring(0, order_id.value.length - 1);
        	}

		function delPhoneNumber(key){
        	var phone_number = document.forms[0].phone_number;
        	var phone_number_real = document.forms[0].phone_number_real;
        	phone_number_real.value = phone_number_real.value.substring(0, phone_number_real.value.length - 1);
			if(phone_number_real.value.length <1){
				phone_number.value = '';
				}
			if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
				}
			if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
				}
			if(phone_number_real.value.length > 5){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
				}
			

        	}

		function resetOrderID(key){
       		var order_id = document.forms[0].order_id;
        	order_id.value = '';
        	}

		function resetPhoneNumber(key){
			var phone_number = document.forms[0].phone_number;
			var phone_number_real = document.forms[0].phone_number_real;
			phone_number.value = '';
			phone_number_real.value = '';
			}

		function submitForm(){
        	document.forms[0].submit();
			}

		function emptyCode(){
     		document.forms[0].order_id.value = "";
    		document.forms[0].to_do.value = "";
      		document.forms[0].phone_number.value = "";
			document.forms[0].phone_number_real.value = "";
			}

		function empty_to_do(){
        	document.forms[0].to_do.value = "";
			}

		function empty_order_id(){
        	document.forms[0].order_id.value = "";
			}

		function empty_phone_number(){
        	document.forms[0].phone_number.value = "";
        	document.forms[0].phone_number_real.value = "";
			}

		</script>

		<style>
		body {
        	text-align:center;
        	background-color:#D3D3D3;
        	font-family:Verdana, Arial, Helvetica, sans-serif;
			}

		#keypad {margin:auto; margin-top:20px;}

		#keypad tr td {
        	vertical-align:middle;
        	text-align:center;
        	border:1px solid #000000;
        	font-size:18px;
			font-weight:bold;
			width:180px;
			height:160px;
			cursor:pointer;
			background-color:#666666;
			color:#CCCCCC
			}

		#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

		.display {
        	width:130px;
        	margin:10px auto auto auto;
        	background-color:#000000;
        	color:#00FF00;
        	font-size:18px;
        	border:1px solid #999999;
			}
	
		#message {
        	text-align:center;
        	color:#009900;
        	font-size:14px;
        	font-weight:bold;
        	display:none;
			}

		#submit {
			width: 10em;
			height: 5em;
			}
		</style>

		<form action="" method="post">
		<font color="red"><b>Order ID:  </b></font> <input type="text" name="order_id" value="9" maxlength="10" class="display"/>
		<table id="DOVID_keypad" cellpadding="15" cellspacing="5">
		<tr>
			<td><input type="button" style="width:75;height:75" value="1" onclick="addOrderID('1');"></td>
			<td><input type="button" style="width:75;height:75" value="2" onclick="addOrderID('2');"></td>
			<td><input type="button" style="width:75;height:75" value="3" onclick="addOrderID('3');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="4" onclick="addOrderID('4');"></td>
			<td><input type="button" style="width:75;height:75" value="5" onclick="addOrderID('5');"></td>
			<td><input type="button" style="width:75;height:75" value="6" onclick="addOrderID('6');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="7" onclick="addOrderID('7');"></td>
			<td><input type="button" style="width:75;height:75" value="8" onclick="addOrderID('8');"></td>
			<td><input type="button" style="width:75;height:75" value="9" onclick="addOrderID('9');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="RESET" onclick="resetOrderID('');"></td>
			<td><input type="button" style="width:75;height:75" value="0" onclick="addOrderID('0');"></td>
			<td><input type="button" style="width:75;height:75" value="BACK" onclick="delOrderID('');"></td>
		</tr>

		</table>
		<br/>
		<font color="red"><b>Phone Number:  </b></font> <input type="text" name="phone_number" value="" maxlength="15" class="display"/><input type="hidden" name="phone_number_real" value="" maxlength="10" class="display"/></tr>
		<table id="keypad" cellpadding="5" cellspacing="3">
		<tr>
        	<td onclick="addPhoneNumber('1');">1</td>
        	<td onclick="addPhoneNumber('2');">2</td>
        	<td onclick="addPhoneNumber('3');">3</td>
		</tr>
		<tr>
        	<td onclick="addPhoneNumber('4');">4</td>
        	<td onclick="addPhoneNumber('5');">5</td>
        	<td onclick="addPhoneNumber('6');">6</td>
		</tr>
		<tr>
	        <td onclick="addPhoneNumber('7');">7</td>
    	    <td onclick="addPhoneNumber('8');">8</td>
       		<td onclick="addPhoneNumber('9');">9</td>
		</tr>
		<tr>
        	<td onclick="resetPhoneNumber('');">RESET</td>
        	<td onclick="addPhoneNumber('0');">0</td>
        	<td onclick="delPhoneNumber('');">Back</br>Space</td>
		</tr>
		</table>
		<br>
		<table id="keypad" cellpadding="10" cellspacing="3">
			<td onclick="setToDo('submit');">Submit</td>
		</table>
		<input type="hidden" name="to_do" value="" maxlength="100" readonly="readonly" /></tr>
		</form>

		</html>

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

I pretty sure just looking at this that there must be a simpler way of executing this.

I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight

Code:

<div id="apply_row" class="rotate_color highlight">
  milk
</div>
<div id="apply_row" class="rotate_color highlight">
  coffee
</div>
<div id="apply_row" class="rotate_color highlight">
  cheese
</div>

And I have the javascript written to give a different color for dd and :even and to add a highlight color when user puts the mouse over.

Code:

$(document).ready(function()
{
  	//alternate div colors
	$("div.rotate_color:odd").css("background-color", "#FFFFFF");
	$("div.rotate_color:even").css("background-color", "#F9F5E8");
        
        //highlight and return back to original color on mouseout
	$("div.highlight").mouseover(function(){
   		$(this).css("background-color", "#F6E9D0");
  		$("div.highlight").mouseout(function(){
  			//clear background color to none
  			$(this).css("background-color", "");
                        //change back to original
  			$("div.rotate_color:odd").css("background-color", "#FFFFFF");
			$("div.rotate_color:even").css("background-color", "#F9F5E8");
		});
  	});
	

  
});

This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why).

Any suggestions???


Thanks,
Daniel

Hi. I am using a mouseover dropdown menu within a rather large table. The script is only 1.6kb so I don't understand why it is going so slow. Mind you this effect is instant in Firefox, Chrome, Safari, Opera. However, in IE 7 it takes about 3-4 seconds. Any advice on how to get this time down in IE 7? Here is a quick sample of the code. Code:

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}

// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}

further reference: http://problemcorrected.com