Web Analytics Made Easy -
StatCounter How was this done? - CodingForum

Announcement

Collapse
No announcement yet.

How was this done?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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);
    Stop solving problems you don’t yet have!

    Comment


    • #3
      You should also start using more descriptive titles per our Posting Guidelines. Titles like these kill the forum searches.
      drums | web

      Comment


      • #4
        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

        Comment

        Working...
        X