Never been to CodeSnippets 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 (or not, you can keep them private!)

14 total

On This Page:

  1. 1 target blank with jquery and prototype
  2. 2 Simple javascript image slideshow
  3. 3 jQuery accordion
  4. 4 jQuery namespaced event binding/unbinding
  5. 5 jQuery and Rails' respond_to
  1. 6 Javascript Bookmarklets
  2. 7 JS Regex's for sourcecode
  3. 8 Center a DOM element, prototype based
  4. 9 Prototype-based javascript window dimensions
  5. 10 Prototype based Javascript min(...), max(...) functions

target blank with jquery and prototype

to html js by nickhammond on Nov 07, 2008
To be xhtml strict compliant there can't be the target attribute in an anchor tag. Below is a way around it with prototype and jquery.

jQuery
$(function(){
  $('a[@rel$='external']').click(function(){
    this.target = "_blank";
  });
});


Prototype
Event.observe(window, 'load', function() {
    $$('a[rel="external"]').each(function(link){
        if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
        }
    });
});


All links that you want to open in a blank window now need to have rel="external" set in the anchor link. 
<a rel="external" href="http://google.com">Google Rocks.</a>

Simple javascript image slideshow

to css html js slideshow by nickhammond on Nov 06, 2008
HTML
<div id="slide-show">
     <ul id="slide-images">
     	<li><img src="images/one.jpg" alt="One" title="One" /></li>
     	<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
     	<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
     </ul>
</div>


CSS
#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:290px; /* Adjust to width-height of your images */
	height:142px;
	overflow:hidden;
}

#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}

#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}


JS
var delay = 1000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}



function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
	
}


Event.observe(window, 'load', init, false);


You also need the following javascript files... prototype.js, scriptaculous.js, effects.js

Just load the js above in your head and it'll start slidin'

Credits: Andrew Sellick - http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous

jQuery accordion

to javascript js jquery ui accordion by jamiew on Oct 29, 2008 
jquery accordion
<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;	

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );
});
</script>

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

<ul>
  <li>
    <a id="a1">
      <img src="images/free_thumb.jpg" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="images/tut_thumb.jpg" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>
  <li>
    <a>
      <img src="images/inspire_thumb.jpg" />
      <p>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </p>
    </a>
  </li>
</ul>

jQuery namespaced event binding/unbinding

to javascript dom ajax js jquery events scraping scrape by jamiew on Jan 12, 2008
// from a comment by Steven Bristol on errtheblog.com

I just wanted to share a really killer event handling tidbit:

Generally you do something like:

jQuery(’.class’).click(function(){//whatever});


Everyone knows this can be rewritten as:

jQuery(’.class’).bind(‘click’, function(){//whatever});


But sometimes you need to unbind something:

jQuery(’.class’).unbind(‘click’, function(){//});


The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)

But jQuery is so good that there is a way to handle this: Namespacing your events:

jQuery(’.class’).bind(‘click.namespace’, function(){//}); 
jQuery(’.class’).unbind(‘click.namespace’);


or for reinitializing an element added via ajax:

jQuery(’.class’)unbind(‘click.namespace’).bind(‘click.namespace’, function(){//});

jQuery and Rails' respond_to

to ruby rails javascript rubyonrails ajax js jquery respond_to by jamiew on Jan 12, 2008
// Just throw this at the bottom of your application.js and you’re good to go: all jQuery ajax requests will trigger the wants.js block of your respond_to declaration, exactly like you’d expect. Enjoy.
// via: http://ozmm.org/posts/jquery_and_respond_to.html

jQuery.ajaxSetup({ ‘beforeSend’: function(xhr) {xhr.setRequestHeader(“Accept”, “text/javascript”)} })

Javascript Bookmarklets

to javascript bookmarklet js by jamiew on Jan 09, 2008
// various bookmarklets for cloning

javascript:var d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1190041327&u='+e(l.href)+'&t='+e(d.title);1;try{if(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z){a=function(){if(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=0,width=626,height=436'))l.href=f+p};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)


javascript:location.href='http://rickrolldb.com/entries/new?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);

JS Regex's for sourcecode

to regex code js by metafeather on Oct 25, 2007
Extracted from SyntaxHilighter

	MultiLineCComments : new RegExp('/\\*[\\s\\S]*?\\*/', 'gm'),
	SingleLineCComments : new RegExp('//.*$', 'gm'),
	SingleLinePerlComments : new RegExp('#.*$', 'gm'),
	DoubleQuotedString : new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),
	SingleQuotedString : new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'", 'g')

Center a DOM element, prototype based

to prototype node js center by nside on Nov 24, 2006 1 Comments
Generally used to center a dialog (a div element).
Usage:
Position.Center(dialog);
The element can also be centered relatively to another node by using the parent parameter.
It requires the this snippet

Position.Center = function(element, parent) {
        var w, h, pw, ph;
        var d = Element.getDimensions(element);
        w = d.width;
        h = d.height;
        Position.prepare();
        if (!parent) {
                var ws = Position.GetWindowSize();
                pw = ws[0];
                ph = ws[1];
        } else {
                pw = parent.offsetWidth;
                ph = parent.offsetHeight;
        }
        element.style.top = (ph/2) - (h/2) -  Position.deltaY + "px";
        element.style.left = (pw/2) - (w/2) -  Position.deltaX + "px";
}

Prototype-based javascript window dimensions

to window prototype dimensions js getwindowsize by nside on Nov 24, 2006 3 Comments
Usage:
var dim = Position.GetWindowSize();
dim[0] is the window width
dim[1] is the window height

window can be specified, useful if you work with frames..

Position.GetWindowSize = function(w) {
        w = w ? w : window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return [width, height]
}

Prototype based Javascript min(...), max(...) functions

to max prototype js min by nside on Nov 24, 2006 1 Comments

Use cases
min(1,-1,2,3,4) == -1
max(2,10) == 10

function min() {
 return $A(arguments).min();
}

function max() {
 return $A(arguments).max();
}
14 total

On This Page:

  1. 1 target blank with jquery and prototype
  2. 2 Simple javascript image slideshow
  3. 3 jQuery accordion
  4. 4 jQuery namespaced event binding/unbinding
  5. 5 jQuery and Rails' respond_to
  1. 6 Javascript Bookmarklets
  2. 7 JS Regex's for sourcecode
  3. 8 Center a DOM element, prototype based
  4. 9 Prototype-based javascript window dimensions
  5. 10 Prototype based Javascript min(...), max(...) functions