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

About this user

Peter Cooperx http://www.petercooper.co.uk/

« Newer Snippets
Older Snippets »
Showing 1-7 of 7 total  RSS 

Hacked Nifty Corners Rounded method

I didn't want to specify background colors at all for Nifty Corners, so I hacked the main method to automatically detect background colors to work with:

   1  
   2  function Rounded(selector,bk,color,size){
   3  	var i;
   4  	var v=getElementsBySelector(selector);
   5  	var l=v.length;
   6  	var bk = newGetStyle('body', 'background-color');
   7  	for(i=0;i<l;i++){
   8      color = newGetStyle(v[i].id, 'background-color'); 
   9      AddTop(v[i],bk,color,size);
  10      AddBottom(v[i],bk,color,size);
  11    }
  12  }
  13  
  14  function newGetStyle(nodeName, sStyle) {
  15  	var x = document.getElementById(nodeName);
  16  	if (x.currentStyle) {
  17  		var y = x.currentStyle[sStyle];
  18  	} else {
  19  		try {
  20  		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(sStyle);
  21  	  } catch(e) {
  22  	  }
  23  	}
  24  	return y;
  25  }

Automatically reload stylesheets on HTML document

Code is from here and described in this great article by dc.

   1  
   2  function updateStylesheets() {
   3  	var i,a,s;
   4  	a=document.getElementsByTagName('link');
   5  	for(i=0;i<a.length;i++) {
   6  		s=a[i];
   7  		if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {
   8  			var h=s.href.replace(/(&|\\?)forceReload=d /,'');
   9  			s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf());
  10  		}
  11  	}
  12  }
  13  
  14  setInterval(updateStylesheets, 1000);

Ultra simple Prototype.js AJAX example

Taken from the great Amy Hoy.

   1  <h2>ajax replacing link</h2>
   2  <a href="backend.php?return=time" 
   3     onclick="new Ajax.Updater('testdiv', 'backend.php?return=time',
   4     {asynchronous:true, evalScripts:true }); return false;">
   5  This link updates a line</a>
   6  <div id="testdiv"></div>


With no JavaScript turned on, it'll go to the normal URL. Without, it'll do an XMLHTTPRequest and put the result in #testdiv.

Java Script Redirect

   1  <script language="JavaScript">
   2  <!--
   3  window.location="http://www.anotherpage.com/";
   4  // -->
   5  </script>


Alternately, something like..

   1  <a href="#" onclick="window.location='http://www.something.com/';" return false;">Click here</a>


which stops it from being indexed (although rel="noindex" does the same on some engines).

Scriptaculous JavaScript slideshow

Found this amazing code by obie at http://blog.caboo.se/articles/2006/01/19/easy-scriptaculous-slideshow:

   1  var album = { 
   2    startup: function() { 
   3      new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds 
   4    }, 
   5    cycle: function() { 
   6      new Effect.Fade('image', { // the id of the <DIV> containing the photos 
   7        duration: 1, 
   8        fps: 50, 
   9        afterFinish: function() { 
  10          new Ajax.Updater('image','/album/next', { // URL for next <IMG> tag 
  11            asynchronous: true, 
  12            onSuccess: function() { 
  13              new Effect.Appear('image', {
  14                duration: 1,
  15                fps: 50,
  16                queue:'end'
  17              })
  18            } 
  19          }) 
  20        } 
  21      }) 
  22    } 
  23  } 
  24   
  25  window.onload = album.startup


I want to tweak it so that an earlier event precaches the next image instead.

Miniature slideshow for DIVs using Scriptaculous

   1  <div id="slideshow1" class="slide"><div>frame 1</div></div>
   2  <div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
   3  <div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
   4  <div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>
   5  
   6  <script type="text/javascript">
   7      
   8      start_slideshow(1, 4, 2000);
   9      
  10      function start_slideshow(start_frame, end_frame, delay) {
  11          setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
  12      }
  13                              
  14      function switch_slides(frame, start_frame, end_frame, delay) {
  15          return (function() {
  16              Effect.Fade('slideshow' + frame);
  17              if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
  18              setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
  19              setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
  20          })
  21      }
  22  
  23  </script>

Check for condition matched against a set

Code by Laurens van der Oever -- http://laurens.vd.oever.nl/weblog/items2005/setsinjavascript/

   1  function set () {
   2      var result = {};
   3  
   4      for (var i = 0; i < arguments.length; i++)
   5        result[arguments[i]] = true;
   6  
   7      return result;
   8  }


Check something like so:

   1  var typeInSet = nodeType in set(2, 3, 4, 7, 8);
« Newer Snippets
Older Snippets »
Showing 1-7 of 7 total  RSS