www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Tipbox

Threaded View

  1. #1
    Join Date
    Dec 2008
    Posts
    126

    Javascript Tipbox

    I use the below script to create a tooltip that will pop up when mouseover for a form. On iPad/iPhone when I click on the icon it it does pop up but it will not go away when I try to click outside or on the icon again. How do I make it go away onclick or with a timeout. Or any other script that is more mobile compatible. thx.

    on the link
    HTML Code:
    <img src="tip-icon.png" onClick="return false;" onMouseOut="return hideTip();" onMouseOver="return tooltip('write tips here).');" >

    Code:
    captureMouse();
    
    var v_divname;
    var v_text;
    var v_title;
    var v_xoffset;
    var v_yoffset;
    var v_backcolor;
    var v_bordercolor;
    var v_textcolor;
    var v_titletextcolor;
    var v_width;
    var v_border;
    var v_title_padding;
    var v_content_padding;
    var v_fontface;
    var v_fontsize;
    var v_textalign;
    var v_titlefontsize;
    
    var v_xcoordinate = 0;
    var v_ycoordinate = 0;
    var v_visible = 0;
    var v_havemouse = 0;
    var v_layer = null;
    
    function tooltip(displaytext, title, commands) {
    	//Reset variables for this tool tip
    	init_tooltip();
    	
    	//Title and Text
    	v_title=title;
    	v_text=displaytext;
    	
    	//Parse commands if any
    	parseCommands(commands);
    	
    	
    	if (v_layer) { 
    		v_layer=getLayer(v_divname); 
    	}
    	
    	if (!(v_layer=createDivContainer())) { 
    		return false;
    	}
    
    	mainMethod();
    }
    
    function init_tooltip() {
    	
    	v_divname = 'tip';
    	v_text = 'Default Text';
    	v_title = '';
    	
    	//UI Variables
    	v_xoffset = 10;
    	v_yoffset = -30;
    	v_backcolor = '#f7f8f9';
    	v_bordercolor = '#d2dce1';
    	v_textcolor = '#6c92a8';
    	v_textalign = 'left';
    	v_width = 230;
    	
    	v_border = 1;
    	v_title_padding = '1px';
    	v_content_padding = '9px';
    	
    	v_fontface = 'Verdana, Helvetica, Arial, sans-serif';
    	v_fontsize = 11;
    	v_titlefontsize = 11;
    	
    	//SYSTEM VARIABLES
    	v_visible = 0;
    	v_layer = null;
    }
    
    function parseCommands(commands) {
    	if (commands != null) {
    		var comArray = commands.split(',');
    		for (var i = 0; i < comArray.length; i++) {
    			var args = comArray[i].split(':');
    			eval('v_' + trimWhitespace(args[0]) + '="' + trimWhitespace(args[1]) + '"');
    		}
    	}
    }
    
    // Clears popups if appropriate
    function hideTip() {
    	if (v_visible == 1) {
    		if (v_layer != null) {
    			v_layer.style.visibility = 'hidden';
    			v_visible = 0;
    		}
    	}
    	return true;
    }
    
    function mainMethod() {	
    	v_visible = 0;
    	
    	var html = makeHTML(v_text, v_title);	
    	createPopup(html);
    	
    	//if we have mouse coordinates, position layer and make visible
    	if (v_havemouse == 1) {	
    		positionLayer();
    		v_visible = 1;
    		v_layer.style.visibility = 'visible';
    	}
    }
    
    function makeHTML(text, title) {
    	
    	var container_style = 'width:' + v_width + 'px;';
    	container_style += 'border:' + v_border + 'px solid ' + v_bordercolor + ';';
    	container_style += 'background-color:' + v_backcolor + ';';
    	container_style += 'font-family:' + v_fontface + ';';
    	container_style += 'font-size:' + v_fontsize + 'px;';
    	
    	var title_style = 'background-color:' + v_bordercolor + ';';
    	title_style += 'padding:' + v_title_padding + ';';
    	title_style += 'color:' + v_titletextcolor + ';';
    	
    	var content_style = 'padding:' + v_content_padding + ';';
    	content_style += 'color:' + v_textcolor + ';';
    	content_style += 'text-align:' + v_textalign + ';';
    	
    	var txt = '<div id="tipbox_container" style="' + container_style + '">';
    	if (title!=null && title.length>0) {
    		txt += '<div id="tipbox_title" style="' + title_style + '">' + title + '</div>';
    	}
    	txt += '<div id="tipbox_content" style="' + content_style + '">' + text + '</div>';
    	txt += '</div>';
    	
    	return txt;
    }
    
    //Positions popup according to mouse input
    function positionLayer() {
    	
    	var placeX = 300;
    	var placeY = 300;
    	
    	//get final placement
    	placeX = horizontalPlacement();
    	placeY = verticalPlacement();
    	
    	//Move the object
    	v_layer.style.left = placeX + 'px';
    	v_layer.style.top = placeY + 'px';
    }
    
    //called when the mouse moves
    //sets mouse related variables
    function mouseMoveHandler(e) {
    	if (!e) {
    		e = event;
    	}
    	if (e.clientX) {
    	 //if there is an x pos property
    	 //GET MOUSE LOCATION
    		v_xcoordinate = mouseX(e);
    		v_ycoordinate = mouseY(e);	
    		v_havemouse = 1;
    	}
    	if (v_visible == 1) { 
    		positionLayer();	
    	}
    }
    
    //get mouse x coordinate
    function mouseX(evt) {
    	if (evt.pageX) return evt.pageX;
    	else if (evt.clientX) {
    	   return evt.clientX + (document.documentElement.scrollLeft ?
    	   document.documentElement.scrollLeft :
    	   document.body.scrollLeft);
    	}
    	else {
    		return null;
    	}
    }
    
    //get mouse y coordinate
    function mouseY(evt) {
    	if (evt.pageY) { 
    		return evt.pageY; 
    	}
    	else if (evt.clientY) {
    	   return evt.clientY + (document.documentElement.scrollTop ?
    	   document.documentElement.scrollTop :
    	   document.body.scrollTop);
    	}
    	else { 
    		return null;
    	}
    }
    
    //Set mouse handler
    function captureMouse() {
    	document.onmousemove = mouseMoveHandler;
    }
    
    //Creates the popup
    function createPopup(input) {
    
    	var popupwidth = v_width;
    	var text;
    	var zindex;
    	
    	text =  createBackLayer(popupwidth,zindex++);
    	text += '<div style="position: absolute; top: 0; left: 0; width: ' + popupwidth + 'px; z-index: ' + zindex + ';">' + input + '</div>';
    	
    	if (typeof v_layer.innerHTML != 'undefined') {
    		v_layer.innerHTML = text;
    	} 
    	
    	//After writing html measure height of backlayer to set height of iframe
    	var backlayer=self.document.getElementById("backdrop");
    	var container=self.document.getElementById("tipbox_container");
    	backlayer.height = container.offsetHeight;
    }
    
    //Back layer prevents forms from showing through popups
    function createBackLayer(width, Z) {
    	//Create backdrop with 0 height
    	return '<iframe id="backdrop" frameborder="0" scrolling="no" width="' + width + '" height="0" style="z-index: ' + Z + '; filter: Beta(Style=0,Opacity=0);"><p></iframe>';
    }
    
    //get horizontal box placement
    function horizontalPlacement() {
    	placeX = v_xcoordinate + v_xoffset;
    	return placeX;
    }
    
    //get vertical box placement
    function verticalPlacement() {
    	return v_ycoordinate + v_yoffset;
    }
    
    // create the div container for popup content if it doesn't exist
    function createDivContainer() {
    	var divContainer = self.document.getElementById(v_divname);
    	return divContainer;
    }
    
    function trimWhitespace(str) {  
    	while(str.charAt(0) == (" ") ) {  
    		str = str.substring(1);
    	}
    	while(str.charAt(str.length-1) == " " ) {  
    		str = str.substring(0,str.length-1);
    	}
    	return str;
    }
    Last edited by phpnewbie08; 04-19-2014 at 04:51 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles