Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-10 of 21 total  RSS 

Tweetburner Bookmarklet

// javscript bookmarklet for tweetburner
   1  
   2  javascript:void(location.href='http://tweetburner.com/links/create?url='+location.href)
to javascript bookmarklet by gvenk on Mar 23, 2008

delicious read later bookmarklet

   1  
   2  javascript:delicious=window.open('https://api.del.icio.us/v1/posts/add?description='+encodeURIComponent(document.title)+'&tags=2read'+'&url='+window.location.href,'delicious','toolbar=no,width=50,height=50');setTimeout('delicious.close()',1500);
to javascript delicious bookmarklet by caffo on Mar 02, 2008

DOM Mouse-Over Element Selection and Isolation

DOM ISO.v.0.3.0.7.bookmarklet.js
bookmarklet for selecting and isolating an element on a page.

two sections:
section 1: Mouseover DOM, setup and handle mouse events and show information about element in informational div. Click to select, Any key to cancel.
section 2: Element Isolation with help of XPath. prompt user for XPath expression e.g., //DIV[@id='post-body']. then use XPath to select all elements not(ancestor or descendant or self), then delete those elements. also ignore self-or-descendants of head and title.

tools:
Ruderman's javascript development environment: https://www.squarefree.com/bookmarklets/webdevel.html#jsenv
Mielczarek's js to bookmarklet generator: http://ted.mielczarek.org/code/mozilla/bookmarklet.html

   1  
   2  
   3  (function() {
   4  	//GLOBALS
   5  		//globals for classMausWork
   6  		var gSelectedElement;	//currently only one selection
   7  		var gHoverElement;		//whatever element the mouse is over
   8  		var gHovering=false;	//mouse is over something
   9  		var gObjArrMW=[];	//global array of classMausWork objects.  for removing event listeners when done selecting.
  10  		
  11  		//extended	
  12  		var infoDiv;		//currently just container for InfoDivHover, might add more here
  13  		var infoDivHover;	//container for hoverText text node.
  14  		var hoverText;		//show information about current element that the mouse is over
  15  		//const EXPERIMENTAL_NEW_CODE=true;	//debugging. new features.
  16  	
  17  	
  18  	//START
  19  	SetupDOMSelection();	
  20  
  21  
  22  
  23  		
  24  	//(Section 1) Element Selection
  25  	function SetupDOMSelection()
  26  	{
  27  
  28  		{
  29  			//setup event listeners
  30  			//var pathx="//div | //span | //table | //td | //tr | //ul | //ol | //li | //p";
  31  			var pathx="//div | //span | //table | //th | //td | //tr | //ul | //ol | //li | //p | //iframe";
  32  			var selection=$XPathSelect(pathx);
  33  			for(var element, i=0;element=selection(i);i++)
  34  			{			
  35  				if(element.tagName.match(/^(div|span|table|td|tr|ul|ol|li|p)$/i))	//redundant check.
  36  				{
  37  					var m = new classMausWork(element);
  38  					gObjArrMW.push(m);
  39  					attachMouseEventListeners(m);
  40  				}
  41  			}
  42  			document.body.addEventListener('mousedown',MiscEvent,false);
  43  			document.body.addEventListener('mouseover',MiscEvent,false);
  44  			document.body.addEventListener('mouseout',MiscEvent,false);
  45  			document.addEventListener('keypress',MiscEvent,false);
  46  		}
  47  		{
  48  			//setup informational div to show which element the mouse is over.
  49  			infoDiv=document.createElement('div');
  50  			var s=infoDiv.style;
  51  			s.position='fixed';
  52  			s.top='0';
  53  			s.right='0';
  54  			
  55  			s.display='block';
  56  			s.width='auto';
  57  			s.padding='0px';
  58  
  59  			document.body.appendChild(infoDiv);
  60  			infoDivHover=document.createElement('div');
  61  
  62  			s=infoDivHover.style;
  63  			s.fontWeight='bold';			
  64  			s.padding='3px';
  65  			s.Opacity='0.8';
  66  			s.borderWidth='thin';
  67  			s.borderStyle='solid';
  68  			s.borderColor='white';
  69  			s.backgroundColor='black';
  70  			s.color='white';
  71  			
  72  			infoDiv.appendChild(infoDivHover);			
  73  			hoverText=document.createTextNode('selecting');
  74  			infoDivHover.appendChild(hoverText);
  75  		}
  76  	}
  77  	
  78  	function CleanupDOMSelection()
  79  	{
  80  		for(var m; m=gObjArrMW.pop(); )
  81  		{
  82  			detachMouseEventListeners(m);
  83  		}
  84  		ElementRemove(infoDiv);
  85  		document.body.removeEventListener('mousedown',MiscEvent,false);
  86  		document.body.removeEventListener('mouseover',MiscEvent,false);
  87  		document.body.removeEventListener('mouseout',MiscEvent,false);		
  88  		document.removeEventListener('keypress',MiscEvent,false);
  89  	}	
  90  
  91  	function attachMouseEventListeners(c)
  92  	{
  93  		//c is object of class classMausWork
  94  		c.element.addEventListener("mouseover",c.mouse_over,false);				
  95  		c.element.addEventListener("mouseout",c.mouse_out,false);	
  96  		c.element.addEventListener("mousedown",c.mouse_click,false);		
  97  	}
  98  
  99  	function detachMouseEventListeners(c)
 100  	{
 101  		//c is object of class classMausWork
 102  		c.resetElementStyle();
 103  		c.element.removeEventListener("mouseover",c.mouse_over,false);				
 104  		c.element.removeEventListener("mouseout",c.mouse_out,false);	
 105  		c.element.removeEventListener("mousedown",c.mouse_click,false);		
 106  	}
 107  
 108  	//mouse event  handling class for element, el.
 109  	function classMausWork(element)
 110  	{	
 111  		//store information about the element this object is assigned to handle. element,  original style, etc.	
 112  		this.element=element;
 113  		
 114  		var elementStyle=element.getAttribute('style');
 115  		var target;
 116  		
 117  		this.mouse_over=function(ev)
 118  		{	
 119  			if(gHovering)return;
 120  			var e=element;			
 121  			var s=e.style;
 122  			s.backgroundColor='yellow';
 123  			s.borderWidth='thin';
 124  			s.borderColor='lime';
 125  			s.borderStyle='solid';					
 126  			InfoMSG(ElementInfo(e),'yellow','blue','yellow');
 127  			gHoverElement=e;
 128  			gHovering=true;
 129  			target=ev.target;
 130  			ev.stopPropagation();		
 131  		};
 132  		
 133  		this.mouse_out=function(ev)
 134  		{
 135  			if(!gHovering)return;
 136  			if(gHoverElement!=element ||ev.target!=target)return;
 137  			var e=element;
 138  			e.setAttribute('style',elementStyle);
 139  			InfoMSG('-','white','black','white');	
 140  			gHoverElement=null;
 141  			gHovering=false;
 142  			target=null;
 143  			//ev.stopPropagation();
 144  		};
 145  		
 146  		this.mouse_click=function(ev)
 147  		{
 148  			if(!gHovering)return;
 149  			if(gHoverElement!=element ||ev.target!=target)return;
 150  			var e=element;
 151  			e.setAttribute('style',elementStyle);
 152  			ev.stopPropagation();			
 153  			CleanupDOMSelection();			
 154  			gHoverElement=null;
 155  			gHovering=false;
 156  			target=null;
 157  			
 158  			if(ev.button==0)
 159  			{
 160  				gSelectedElement=e;
 161  				ElementSelected(e);	//finished selecting, cleanup then move to next part (section 2), element isolation.
 162  			}
 163  		};
 164  		
 165  		this.resetElementStyle=function()
 166  		{
 167  			element.setAttribute('style',elementStyle);
 168  		};		
 169  	}
 170  
 171  	function MiscEvent(ev)		//keypress, and mouseover/mouseout/mousedown event on body.  cancel selecting.
 172  	{
 173  		if(ev.type=='mouseout' && !gHovering)
 174  		{
 175  			InfoMSG('-','white','black','white');
 176  		}
 177  		else if(ev.type=='mouseover' && !gHovering)
 178  		{
 179  			InfoMSG('cancel','yellow','red','yellow');
 180  		}
 181  		else //keypress on document or mousedown on body, cancel ops.
 182  		{
 183  			CleanupDOMSelection();
 184  		}
 185  	}
 186  	
 187  	function InfoMSG(text,color,bgcolor,border)
 188  	{
 189  		
 190  		var s=infoDivHover.style;
 191  		if(color)s.color=color;
 192  		if(bgcolor)s.backgroundColor=bgcolor;
 193  		if(border)s.borderColor=border;
 194  		if(text)hoverText.data=text;
 195  	}
 196  	
 197  
 198  
 199  	
 200  	
 201  	//(Section 2) Element Isolation
 202  	function ElementSelected(element)	//finished selecting element.  setup string to prompt user.
 203  	{
 204  		PromptUserXpath(ElementInfo(element));
 205  	}
 206  	
 207  	
 208  	function PromptUserXpath(defaultpath)		//prompt user, isolate element.
 209  	{
 210  		var userpath = prompt("XPath of elements to isolate : ", defaultpath);
 211  		if(userpath && userpath.length>0)
 212  		{
 213  			var addPredicate = "[count(./ancestor-or-self::head)=0][count(./ancestor-or-self::title)=0]";	//exclude head & title elements from selection so they aren't removed
 214  			var addPath = "//script | //form | //object | //embed";	//include these elements in selection for removal
 215  			var pathx=TransformXPath_NoAncestorDescendentSelf(userpath, addPredicate, addPath);		//the xpath selection of all elements to be removed/deleted.
 216  			
 217  			try
 218  			{
 219  				var element;
 220  				var elements=$XPathSelect(pathx);	
 221  				for(var i=0;element=elements(i);i++)
 222  				{			
 223  
 224  					if(!element.nodeName.match(/^(head|title)$/i))	//redundant check.
 225  					{
 226  						ElementRemove(element);
 227  					}
 228  				}
 229  			}
 230  			
 231  			catch(err)
 232  			{
 233  				alert("wtf: "+err);
 234  			}
 235  			
 236  		}
 237  	}
 238  	
 239  		
 240  	
 241  	//support
 242  	function $XPathSelect(p, context) 
 243  	{
 244  	  if (!context) context = document;
 245  	  var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
 246  	  return function(x) { return xpr.snapshotItem(x); };	//closure.  wooot!  returns function-type array of elements (usually elements, or something else depending on the xpath expression).
 247  	}
 248  	
 249  	function ElementRemove(e)
 250  	{
 251  		if(e)e.parentNode.removeChild(e);
 252  	}
 253  	
 254  	function ElementInfo(element)
 255  	{
 256  		var txt='';
 257  		if(element)
 258  		{
 259  			txt=element.tagName.toLowerCase();		//txt=element.tagName;
 260  			txt=attrib(txt,element,'id');
 261  			txt=attrib(txt,element,'class');	
 262  			txt='//'+txt;
 263  		}
 264  		return txt;
 265  		
 266  		function attrib(t,e,a)
 267  		{			
 268  			if(e.hasAttribute(a))
 269  			{
 270  				t+="[@"+a+"='"+e.getAttribute(a)+"']";
 271  			}
 272  			return t;
 273  		}
 274  		
 275  	}
 276  
 277  
 278  	
 279  	//function to 'invert' the XPath by selecting all elements that are not ancestor and not descendent and not self.
 280  	function TransformXPath_NoAncestorDescendentSelf(u, includePredicates, includePaths)
 281  	{	
 282  		
 283  		//sample input (u):					//div[@class='sortbox']
 284  		//sample output						//*[  not(./descendant-or-self::*=//div[@class='sortbox'])][  not(./ancestor-or-self::*=//div[@class='sortbox'])]
 285  		//sample output with additional conditions:		//*[  not(./descendant-or-self::*=//div[@class='sortbox'])][  not(./ancestor-or-self::*=//div[@class='sortbox'])][count(./ancestor-or-self::head)=0][count(./ancestor-or-self::title)=0]
 286  		
 287  			//obsolete method.  much faster but can only be used for limited types of (simple) xpath expressions -- unlike the current version, which should be able to convert any xpath.
 288  			//input:			table[@id='topbar']
 289  			//output:			//*[not(./descendant-or-self::table[@id='topbar']) and not(./ancestor-or-self::table[@id='topbar'])]
 290  			//output (alternative):	//*[count(./descendant-or-self::table[@id='topbar'])=0 and count(./ancestor-or-self::table[@id='topbar'])=0]
 291  		
 292  		
 293  		var o1=	'./descendant-or-self::*='+gr(u);
 294  		o1=	'not' + gr(o1);
 295  		o1=	nt(o1);	
 296  		var o2= './ancestor-or-self::*='+gr(u);
 297  		o2=	'not' + gr(o2);
 298  		o2=	nt(o2);
 299  
 300  		var o=	'//*'+o1+o2;
 301  		if(includePredicates && includePredicates.length>0)	o += includePredicates;
 302  		if(includePaths && includePaths.length>0) o += ' | ' + includePaths;
 303  		return o;
 304  		
 305  		
 306  		function nt(term){return wrap(term,'[]');}	//node test; predicate - enclose with bracket.
 307  		function gr(term){return wrap(term,'()');}	//group - parenthesize.
 308  		function wrap(term, enclosure){return enclosure.charAt(0)+term+enclosure.charAt(1);}
 309  	}	
 310  	
 311  
 312  
 313  	
 314  })();
 315
to javascript dom bookmarklet xpath userscript Mouseover isolation by jczerg68 on Sep 08, 2007

Babelfish translate

Ok, so maybe some of you might think that Babelfish's the best translator out there. I don't know about that , but I do know where my towel is ;)
So, boys and girls, here's the bookmarklet that allows to translate your current web-page using the babelfish translation engine.

   1  
   2  javascript:location.href='http://babelfish.altavista.com/babelfish/tr?trurl='+encodeURIComponent(location.href)+'&lp=%s&btnTrUrl=Translate'


To make it useful, save it as a bookmark in FF (or as a new search engine in Opera) and give it a keyword/shortcut by editing the bookmark's properties in FF (or the search properties in Opera). Let's call him, say 'bf', that should do it.

Here are some examples:
   1  
   2  bf en_fr
   3  bf fr_en
   4  bf en_ja


Enjoy!
G.R.
to javascript firefox bookmarklet web internet search translate bookmarks babelfish opera bookmark translation 42 mostly harmless by griflet on Jul 05, 2007

Google translate bookmarklet

Here's perhaps the most powerful bookmarklet I've ever created ...
This one translates the current web page from your current browser session into another language!

Syntax from the address bar in your FF or Opera browser:
   1  
   2   tr <FROM>|<TO>


Examples:
   1  
   2   tr en|de
   3   tr en|fr
   4   tr en|pt
   5   tr de|en


Here's the bookmarklet code
   1  
   2  javascript:location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=%s&hl=EN&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools'


FF instructions:
Copy/paste the code in a new bookmark. Then, in the new bookmark properties, edit the keyword/shortcut field and insert 'tr'. That's it!

Opera instructions:
Copy the bookmarklet code. Then, in tools-->preferences-->search-->add-->details, paste the code in the address field, fill in a name for in the name field, and write 'tr' in the keyword field. Then save all. That's it!
to javascript bookmarklet web google translate keyword shortcut keymark bookmark by griflet on Jul 05, 2007

Anidar comentarios en Meneame.net 1ª referencia(BookMarklet)

Anida los comentarios usando el número de comentario (#XX) que los usuarios de Meneame utilizan para referirse a otros comentarios, pero únicamente tiene en cuenta la 1ª referencia.
   1  
   2  javascript:(function() {var cl = document.getElementById("comments-list");var l = null;for(var i in cl.childNodes){l = cl.childNodes.item(i);if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")){var d = l.firstChild;var nc = parseInt(d.id.slice(8));var r = d.firstChild.nextSibling.nextSibling.innerHTML.match(/#[0-9]+/g);var nr = 0;var anidado = false;for(var j in r){nr = parseInt(r[j].slice(1));if((anidado = (nr > 0) && (nc > nr))){var lr = document.getElementById("comment-" + nr).parentNode;if(lr.lastChild.name != "anidados"){var a = document.createElement("ul");a.name = "anidados";a.style.borderLeft = "1px dotted #aaaaaa";lr.appendChild(a);}lr.lastChild.appendChild(l.cloneNode(true));try{cl.removeChild(l);} catch(e){}break;}}}}})();
to javascript bookmarklet meneame by jnsntndr on Sep 02, 2006

Enlaces entre comentarios en Meneame.net (bookmarlet)

Funciona como el script de anidar pero enlazando a los comentarios

   1  
   2  javascript:(function() {var cl = document.getElementById("comments-list");var l = null;for(var i in cl.childNodes){l = cl.childNodes.item(i);if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")){var d = l.firstChild;var nc = parseInt(d.id.slice(8));var nr = 0;var o = d.firstChild.nextSibling.nextSibling;var t = o.innerHTML;var r = t.match(/#[0-9]+/g);for(var j in r){nr = parseInt(r[j].slice(1)); if((nr >0) && (nc > nr))o.innerHTML = t.replace(r[j],"<a href='" + document.URL.replace(/#comment.*$/g,"") + "#comment-" + nr + "'>" + r[j] +"</a>")}}}})(); void 0;
to javascript bookmarklet meneame by jnsntndr on Sep 02, 2006

Anidar comentarios en Meneame.net (Bookmarklet)

Anida los comentarios usando el número de comentario (#XX) que los usuarios de Meneame utilizan para referirse a otros comentarios

   1  
   2  javascript:(function() {var cl = document.getElementById("comments-list");var l = null;for(var i in cl.childNodes){l = cl.childNodes.item(i);if(l && (l.tagName) && (l.tagName.toUpperCase() == "LI")){var d = l.firstChild;var nc = parseInt(d.id.slice(8));var r = d.firstChild.nextSibling.nextSibling.innerHTML.match(/#[0-9]+/g);var nr = 0;var anidado = false;for(var j in r){nr = parseInt(r[j].slice(1));if((anidado = (nr > 0) && (nc > nr))){var lr = document.getElementById("comment-" + nr).parentNode;if(lr.lastChild.name != "anidados"){var a = document.createElement("ul");a.name = "anidados";a.style.borderLeft = "1px dotted #aaaaaa";lr.appendChild(a);}lr.lastChild.appendChild(l.cloneNode(true));try{cl.removeChild(l);} catch(e){}}}}}})(); void 0;
to javascript bookmarklet meneame by jnsntndr on Sep 02, 2006

logging bookmarklets for debugging javascript

Dragg the following two links to your browser's toolbar (tested with Firefox 1.5 and IE 6) :
49.cl
49.sh

When you are writing some javascript embedded in a webpage and you want to debug your code, this gives you way to log things without alerting them.

Example :
   1  
   2  // part of embedded javascript code
   3  log49 = [];//log49 is global variable.
   4  var num = 1;
   5  log49.push('num = '+num); // log the state of num
   6  num = num+1;
   7  log49.push('second num ='+num); // again.


Then the two bookmarklets let you reset or view the log in runtime.
49.cl lets you reset the log by clearing the list stored in the global variable log49.
49.sh shows you the log by joining and alerting the value of log49.
to javascript bookmarklet log debug by em3zh3 on Aug 18, 2006

Open Text Links // Bookmarklet

Open Text Links : this bookmarklet collects strings of the form http://... or https://... in the user-selected text and then open them all in new windows. tested with Firefox 1.5 and IE 6.

The code
   1  
   2  javascript:(function(){var w=window,d=document,rg=/\bhtt(p|ps)\:\/\/\S+\b/ig,gS='getSelection';var links=(''+(w[gS]? w[gS]():(d[gS]?d[gS]():d.selection.createRange().text))).match(rg);if(confirm(links.join('\n')))for(var i=0,len=links.length;i<len;i++) w.open(links[i]);alert('done');})()


Code with comments
   1  
   2  javascript:(function(){
   3    var w=window,d=document,rg=/\bhtt(p|ps)\:\/\/\S+\b/ig,gS='getSelection';
   4  
   5    // set links = the list of strings of the form http:/... or https:/... in the selected area
   6    var links=(''+(w[gS]? w[gS]():(d[gS]?d[gS]():d.selection.createRange().text))).match(rg);
   7  
   8    // if user confirms the list then open them all in new windows and then alert 'done'.
   9    if(confirm(links.join('\n')))
  10       for(var i=0,len=links.length;i<len;i++)
  11          w.open(links[i]);alert('done');
  12  })()
to javascript bookmarklet open text selection by em3zh3 on Aug 18, 2006
« Newer Snippets
Older Snippets »
Showing 1-10 of 21 total  RSS