Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How was this done?

    http://www.jorgenarnor.com/item/2005/9/21/duct_tape

    When you mouseover the links (in the red text) a little bubble thing pops up. How was this done? I've looked at the source code, but can't seem to figure it out. Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Ah, as I thought... Sweet Titles.
    Things like that (fading etc.) can only be done with JavaScript, so you should also go more into detail than just looking at the source code.

    Code:
    /*
    Sweet Titles (c) Creative Commons 2005
    http://creativecommons.org/licenses/by-sa/2.5/
    Author: Dustin Diaz | http://www.dustindiaz.com
    */
    var sweetTitles = { 
    	xCord : 0,				// @Number: x pixel value of current cursor position
    	yCord : 0,				// @Number: y pixel value of current cursor position
    	tipElements : ['a','abbr','acronym'],	// @Array: Allowable elements that can have the toolTip
    	obj : Object,			// @Element: That of which you're hovering over
    	tip : Object,			// @Element: The actual toolTip itself
    	active : 0,				// @Number: 0: Not Active || 1: Active
    	init : function() {
    		if ( !document.getElementById ||
    			!document.createElement ||
    			!document.getElementsByTagName ) {
    			return;
    		}
    		var i,j;
    		this.tip = document.createElement('div');
    		this.tip.id = 'toolTip';
    		document.getElementsByTagName('body')[0].appendChild(this.tip);
    		this.tip.style.top = '0';
    		this.tip.style.visibility = 'hidden';
    		addEvent(document,'mousemove',this.updateXY);
    		if ( document.captureEvents ) {
    				document.captureEvents(Event.MOUSEMOVE);
    		}
    		var tipLen = this.tipElements.length;
    		for ( i=0; i<tipLen; i++ ) {
    			var current = document.getElementsByTagName(this.tipElements[i]);
    			var curLen = current.length;
    			for ( j=0; j<curLen; j++ ) {
    				addEvent(current[j],'mouseover',this.tipOver);
    				addEvent(current[j],'mouseout',this.tipOut);
    				current[j].setAttribute('tip',current[j].title);
    				current[j].removeAttribute('title');
    			}
    		}
    	},
    	updateXY : function(e) {
    		if ( document.captureEvents ) {
    			sweetTitles.xCord = e.pageX;
    			sweetTitles.yCord = e.pageY;
    		} else if ( window.event.clientX ) {
    			sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
    			sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
    		}
    	},
    	tipOut: function() {
    		if ( window.tID ) {
    			clearTimeout(tID);
    		}
    		if ( window.opacityID ) {
    			clearTimeout(opacityID);
    		}
    		sweetTitles.tip.style.visibility = 'hidden';
    	},
    	checkNode : function() {
    		var trueObj = this.obj;
    		if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
    			return trueObj;
    		} else {
    			return trueObj.parentNode;
    		}
    	},
    	tipOver : function() {
    		sweetTitles.obj = this;
    		tID = window.setTimeout("sweetTitles.tipShow()",500)
    	},
    	tipShow : function() {		
    		var scrX = Number(this.xCord);
    		var scrY = Number(this.yCord);
    		var tp = parseInt(scrY+15);
    		var lt = parseInt(scrX+10);
    		var anch = this.checkNode();
    		var addy = '';
    		var access = '';
    		if ( anch.nodeName.toLowerCase() == 'a' ) {
    			addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
    			var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
    		} else {
    			addy = anch.firstChild.nodeValue;
    		}
    		this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
    		if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
    			this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
    		} else {
    			this.tip.style.left = lt+'px';
    		}
    		if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
    			this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
    		} else {
    			this.tip.style.top = tp+'px';
    		}
    		this.tip.style.visibility = 'visible';
    		this.tip.style.opacity = '.1';
    		this.tipFade(10);
    	},
    	tipFade: function(opac) {
    		var passed = parseInt(opac);
    		var newOpac = parseInt(passed+10);
    		if ( newOpac < 80 ) {
    			this.tip.style.opacity = '.'+newOpac;
    			this.tip.filter = "alpha(opacity:"+newOpac+")";
    			opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
    		}
    		else { 
    			this.tip.style.opacity = '.80';
    			this.tip.style.filter = "alpha(opacity:80)";
    		}
    	}
    };
    function pageLoader() {
    	sweetTitles.init();
    }
    addEvent(window,'load',pageLoader);

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You should also start using more descriptive titles per our Posting Guidelines. Titles like these kill the forum searches.

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek View Post
    You should also start using more descriptive titles per our Posting Guidelines. Titles like these kill the forum searches.
    sorry about that. and VIPStephan, thanks alot for that link and the code


  •  

    Posting Permissions

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