Latest 100 public
snipts » jquery
showing 1-20 of 189 snipts for jquery
-
∞ iQuery cheatsheet
http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf
-
∞ jQuery animations
//FadeOut $('#hideButton').click(function() { $('#disclaimer').fadeOut(); }); //Toggle $('#toggleButton').click(function() { $('#disclaimer').toggle('slow'); }); //Slide $('#toggleButton').click(function() { $('#disclaimer').slideToggle('slow'); }); $('#disclaimer').slideToggle('slow', function() { alert('The slide has finished sliding!') }); $('#disclaimer').slideUp('slow', function() { $('#hideButton').fadeOut(); }); //Hover effects $('#celebs tr').mouseover(function() { $(this).addClass('zebraHover'); }); $('#celebs tr').mouseout(function() { $(this).removeClass('zebraHover'); }); // ^ Same as $('#celebs tbody tr').hover(function() { $(this).addClass('zebraHover'); }, function() { $(this).removeClass('zebraHover'); }); //Toggle class $('#celebs tbody tr').click(function() { $(this).toggleClass('zebraHover'); }); //Spoiler alert Who lost their recording contract today? <span class='spoiler'>The Zaxntines!</span> $('.spoiler').hide(); $('<span class="revealer">Tell me!</span>').insertBefore('.spoiler'); $('.revealer').click(function() { $(this).hide(); $(this).next().fadeIn(); }); //Animate $('#navigation li').hover(function() { $(this).animate({paddingLeft: '+=15px'}, 200); }, function() { $(this).animate({paddingLeft: '-=15px'}, 200); }); //-----or $('#disclaimer').animate({ opacity: 'hide', height: 'hide' }, 'slow'); //Transition (easing) $('p:first').toggle(function() { $(this).animate({'height':'+=150px'}, 1000, 'linear'); }, function() { $(this).animate({'height':'-=150px'}, 1000, 'swing'); }); //Chaining actions $('p:first').hide().slideDown('slow').fadeOut(); //.delay(2000) to pause
-
∞ modifying content jQ
$('p').html('good bye, cruel paragraphs!'); $('h2').text('All your titles are belong to us'); //Getting content alert($('h2:first').text());
-
∞ remove elements jQ
<p id="no-script"> We recommend that you have JavaScript enabled! </p> $('#no-script').remove(); $('#celebs tr').remove(':contains("Singer")');
-
∞ adding elements jQ
$('<p>A new paragraph!</p>') $('<p>A new paragraph!</p>').addClass('new'); $('<input type="button" value="toggle" id="toggleButton">') .insertAfter('#disclaimer'); $('#toggleButton').click(function() { $('#disclaimer').toggle(); }); $('<strong>START!</strong>').prependTo('#disclaimer'); $('<strong>END!</strong>').appendTo('#disclaimer');
-
∞ jQuery show/hide/toggle
//Hide <input type="button" id="hideButton" value="hide" /> $('#hideButton').click(function() { $('#disclaimer').hide(); }); //Show <input type="button" id="showButton" value="show" /> $('#showButton').click(function() { $('#disclaimer').show(); }); //Show/Hide <input type="button" id="toggleButton" value="toggle" /> $('#toggleButton').click(function() { if ($('#disclaimer').is(':visible')) { $('#disclaimer').hide(); } else { $('#disclaimer').show(); } }); //Toggle $('#toggleButton').click(function() { $('#disclaimer').toggle(); if ($('#disclaimer').is(':visible')) { $(this).val('Hide'); } else { $(this).val('Show'); } });
-
∞ add/remove class using jQuery
$('div').addClass('class_name'); $('div').addClass('class_name1 class_name2 class_name3'); $('#celebs tr.zebra').removeClass('zebra');
-
∞ jQuery toolbox
http://visualjquery.com/
-
∞ reading/changing CSS properties
$(document).ready(function() { var fontSize = $('#celebs tbody tr:first').css('font-size'); alert(fontSize); }); $('#celebs tbody tr:even').css( {'background-color': '#dddddd', 'color': '#666666'} ); //better to add class with the css attributes to avoid inline css $('div').addClass('class_name'); $('div').addClass('class_name1 class_name2 class_name3');
-
∞ jQuery selectors
:odd :even :first :last :eq(3) ...
-
∞ selecting even rows
$(document).ready(function() { alert($('#celebs tbody tr:even').length + ' elements!'); });
-
∞ checking selection
$(document).ready(function() { alert($('#celebs tbody tr').length + ' elements!'); }); //without tbody it selects also the table header, thus returning an incorrect number of elements
-
∞ jQuery alert on page load
$(document).ready(function() { alert('Welcome'); }); $(function() { alert('Ready to do your bidding!'); }); //shorthand
-
∞ Using JQuery with Blogengine
var $j = jQuery.noConflict(); $j(document).ready(function(){ $j('#content').hide(); });
-
∞ Plugin jQuery lightBox
<script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/jquery.js"></script> <script type="text/javascript" src="http://www.especialistasweb.com.mx/jquery/lightbox/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="http://www.especialistasweb.com.mx/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" /> <!-- Activando plugin jQuery lightBox --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <div id="gallery"> <a href="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" title="<?=$servicio['titulo']?>"> <img src="http://www.paneldecontrol.com.mx/admin/<?=$servicio['imagen']?>" width="365" height="240" /> </a> </div>
-
∞ Custom TC RTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch"> <head> <title>A Light weight RTE jQuery Plugin</title> <link type="text/css" rel="stylesheet" href="jquery.rte.css" /> <style type="text/css"> body, textarea { font-family:sans-serif; font-size:12px; } </style> </head> <body> <div id="main" style="width:800px;"> <p> <textarea name="form[info2]" id="test" class="rte2" method="post" action="#"></textarea> </p> </form> <div id="test"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.rte.js"></script> <script type="text/javascript" src="jquery.rte.tb.js"></script> <script type="text/javascript" src="jquery.ocupload-1.1.4.js"></script> <script type="text/javascript"> $(document).ready(function() { var custom_toolbar = { disable: {}, bold: {command: 'bold', tags:['b', 'strong']}, italic: {command: 'italic', tags:['i', 'em']}, underline: {command: 'underline', tags:['u']}, font: {command: 'fontname', select: '\ <select>\ <option value="">Font Family</option>\ <option value="andale mono">Andale Mono</option>\ <option value="arial">Arial</option>\ <option value="georgia">Georgia</option>\ <option value="impact">Impact</option>\ <option value="trebuchet ms">Trebuchet MS</options>\ <option value="verdana">Verdana</options>\ </select>\ ', tags: ['font']}, size: {command: 'fontsize', select: '\ <select>\ <option value="">Font Size</option>\ <option value="9">9 (9pt)</option>\ <option value="11">11 (11pt)</option>\ <option value="14">14 (14pt)</options>\ <option value="16">16 (16pt)</option>\ <option value="18">18 (18pt)</options>\ <option value="20">20 (20pt)</option>\ <option value="24">24 (24pt)</options>\ <option value="28">28 (28pt)</options>\ <option value="32">32 (32pt)</option>\ <option value="48">48 (48pt)</options>\ <option value="64">64 (64pt)</options>\ </select>\ ', tags: ['font']}, color: {exec: lwrte_color} } $('.rte2').rte({ css: ['default.css'], width: 450, height: 200, controls_rte: custom_toolbar, }); $('li > .disable').hide(); $('.rte2').bind('iframe_keyup', function() { console.log('iframe_keyup'); }); }); </script> <hr> </body> </html>
-
∞ Modified jquery.rte.js
/* * Lightweight RTE - jQuery Plugin, version 1.2 * Copyright (c) 2009 Andrey Gayvoronsky - http://www.gayvoronsky.com */ jQuery.fn.rte = function(options, editors) { if(!editors || editors.constructor != Array) editors = Array(); $(this).each(function(i) { var id = (this.id) ? this.id : editors.length; editors[id] = new lwRTE (this, options || {}); }); return editors; } var lwRTE_resizer = function(textarea) { this.drag = false; this.rte_zone = $(textarea).parents('.rte-zone'); } lwRTE_resizer.mousedown = function(resizer, e) { resizer.drag = true; resizer.event = (typeof(e) == "undefined") ? window.event : e; resizer.rte_obj = $(".rte-resizer", resizer.rte_zone).prev().eq(0); $('body', document).css('cursor', 'se-resize'); return false; } lwRTE_resizer.mouseup = function(resizer, e) { resizer.drag = false; $('body', document).css('cursor', 'auto'); return false; } lwRTE_resizer.mousemove = function(resizer, e) { if(resizer.drag) { e = (typeof(e) == "undefined") ? window.event : e; var w = Math.max(1, resizer.rte_zone.width() + e.screenX - resizer.event.screenX); var h = Math.max(1, resizer.rte_obj.height() + e.screenY - resizer.event.screenY); resizer.rte_zone.width(w); resizer.rte_obj.height(h); resizer.event = e; } return false; } var lwRTE = function (textarea, options) { this.css = []; this.css_class = options.frame_class || ''; this.base_url = options.base_url || ''; this.width = options.width || $(textarea).width() || '100%'; this.height = options.height || $(textarea).height() || 350; this.iframe = null; this.iframe_doc = null; this.textarea = null; this.event = null; this.range = null; this.toolbars = {rte: '', html : ''}; this.controls = {rte: {disable: {hint: 'Source editor'}}, html: {enable: {hint: 'Visual editor'}}}; $.extend(this.controls.rte, options.controls_rte || {}); $.extend(this.controls.html, options.controls_html || {}); $.extend(this.css, options.css || {}); if(document.designMode || document.contentEditable) { $(textarea).wrap($('<div></div>').addClass('rte-zone').width(this.width)); $('<div class="rte-resizer"><a href="#"></a></div>').insertAfter(textarea); var resizer = new lwRTE_resizer(textarea); $(".rte-resizer a", $(textarea).parents('.rte-zone')).mousedown(function(e) { $(document).mousemove(function(e) { return lwRTE_resizer.mousemove(resizer, e); }); $(document).mouseup(function(e) { return lwRTE_resizer.mouseup(resizer, e) }); return lwRTE_resizer.mousedown(resizer, e); }); this.textarea = textarea; this.enable_design_mode(); } } lwRTE.prototype.editor_cmd = function(command, args) { this.iframe.contentWindow.focus(); try { this.iframe_doc.execCommand(command, false, args); } catch(e) { } this.iframe.contentWindow.focus(); } lwRTE.prototype.get_toolbar = function() { var editor = (this.iframe) ? $(this.iframe) : $(this.textarea); return (editor.prev().hasClass('rte-toolbar')) ? editor.prev() : null; } lwRTE.prototype.activate_toolbar = function(editor, tb) { var old_tb = this.get_toolbar(); if(old_tb) old_tb.remove(); $(editor).before($(tb).clone(true)); } lwRTE.prototype.enable_design_mode = function() { var self = this; // need to be created this way self.iframe = document.createElement("iframe"); self.iframe.frameBorder = 0; self.iframe.frameMargin = 0; self.iframe.framePadding = 0; self.iframe.width = '100%'; self.iframe.height = self.height || '100%'; self.iframe.src = "javascript:void(0);"; if($(self.textarea).attr('class')) self.iframe.className = $(self.textarea).attr('class'); if($(self.textarea).attr('id')) self.iframe.id = $(self.textarea).attr('id'); if($(self.textarea).attr('name')) self.iframe.title = $(self.textarea).attr('name'); var content = $(self.textarea).val(); $(self.textarea).hide().after(self.iframe).remove(); self.textarea = null; var css = ''; for(var i in self.css) css += "<link type='text/css' rel='stylesheet' href='" + self.css[i] + "' />"; var base = (self.base_url) ? "<base href='" + self.base_url + "' />" : ''; var style = (self.css_class) ? "class='" + self.css_class + "'" : ''; // Mozilla need this to display caret /*if($.trim(content) == '') content = '<br>';*/ var doc = "<html><head>" + base + css + "</head><body " + style + " style='padding:5px'>" + content + "</body></html>"; self.iframe_doc = self.iframe.contentWindow.document; try { self.iframe_doc.designMode = 'on'; } catch ( e ) { // Will fail on Gecko if the editor is placed in an hidden container element // The design mode will be set ones the editor is focused $(self.iframe_doc).focus(function() { self.iframe_doc.designMode(); } ); } self.iframe_doc.open(); self.iframe_doc.write(doc); self.iframe_doc.close(); if(!self.toolbars.rte) self.toolbars.rte = self.create_toolbar(self.controls.rte); self.activate_toolbar(self.iframe, self.toolbars.rte); $(self.iframe).parents('form').submit( function() { self.disable_design_mode(true); } ); $(self.iframe_doc).mouseup(function(event) { if(self.iframe_doc.selection) self.range = self.iframe_doc.selection.createRange(); //store to restore later(IE fix) self.set_selected_controls( (event.target) ? event.target : event.srcElement, self.controls.rte); }); $(self.iframe_doc).blur(function(event){ if(self.iframe_doc.selection) self.range = self.iframe_doc.selection.createRange(); // same fix for IE as above }); $(self.iframe_doc).keyup(function(event) { self.set_selected_controls( self.get_selected_element(), self.controls.rte); $(self.iframe).trigger('iframe_keyup'); }); // Mozilla CSS styling off if(!$.browser.msie) self.editor_cmd('styleWithCSS', false); } lwRTE.prototype.disable_design_mode = function(submit) { var self = this; self.textarea = (submit) ? $('<input type="hidden" />').get(0) : $('<textarea></textarea>').width('100%').height(self.height).get(0); if(self.iframe.className) self.textarea.className = self.iframe.className; if(self.iframe.id) self.textarea.id = self.iframe.id; if(self.iframe.title) self.textarea.name = self.iframe.title; $(self.textarea).val($('body', self.iframe_doc).html()); $(self.iframe).before(self.textarea); if(!self.toolbars.html) self.toolbars.html = self.create_toolbar(self.controls.html); if(submit != true) { $(self.iframe_doc).remove(); //fix 'permission denied' bug in IE7 (jquery cache) $(self.iframe).remove(); self.iframe = self.iframe_doc = null; self.activate_toolbar(self.textarea, self.toolbars.html); } } lwRTE.prototype.toolbar_click = function(obj, control) { var fn = control.exec; var args = control.args || []; var is_select = (obj.tagName.toUpperCase() == 'SELECT'); $('.rte-panel', this.get_toolbar()).remove(); if(fn) { if(is_select) args.push(obj); try { fn.apply(this, args); } catch(e) { } } else if(this.iframe && control.command) { if(is_select) { args = obj.options[obj.selectedIndex].value; if(args.length <= 0) return; } this.editor_cmd(control.command, args); } } lwRTE.prototype.create_toolbar = function(controls) { var self = this; var tb = $("<div></div>").addClass('rte-toolbar').width('100%').append($("<ul></ul>")).append($("<div></div>").addClass('clear')); var obj, li; for (var key in controls){ if(controls[key].separator) { li = $("<li></li>").addClass('separator'); } else { if(controls[key].init) { try { controls[key].init.apply(controls[key], [this]); } catch(e) { } } if(controls[key].select) { obj = $(controls[key].select) .change( function(e) { self.event = e; self.toolbar_click(this, controls[this.className]); return false; }); } else { obj = $("<a href='#'></a>") .attr('title', (controls[key].hint) ? controls[key].hint : key) .attr('rel', key) .click( function(e) { self.event = e; self.toolbar_click(this, controls[this.rel]); return false; }) } li = $("<li></li>").append(obj.addClass(key)); } $("ul",tb).append(li); } $('.enable', tb).click(function() { self.enable_design_mode(); return false; }); $('.disable', tb).click(function() { self.disable_design_mode(); return false; }); return tb.get(0); } lwRTE.prototype.create_panel = function(title, width) { var self = this; var tb = self.get_toolbar(); if(!tb) return false; $('.rte-panel', tb).remove(); var drag, event; var left = self.event.pageX; var top = self.event.pageY; var panel = $('<div></div>').hide().addClass('rte-panel').css({left: left, top: top}); $('<div></div>') .addClass('rte-panel-title') .html(title) .append($("<a class='close' href='#'>X</a>") .click( function() { panel.remove(); return false; })) .mousedown( function() { drag = true; return false; }) .mouseup( function() { drag = false; return false; }) .mousemove( function(e) { if(drag && event) { left -= event.pageX - e.pageX; top -= event.pageY - e.pageY; panel.css( {left: left, top: top} ); } event = e; return false; } ) .appendTo(panel); if(width) panel.width(width); tb.append(panel); return panel; } lwRTE.prototype.get_content = function() { return (this.iframe) ? $('body', this.iframe_doc).html() : $(this.textarea).val(); } lwRTE.prototype.set_content = function(content) { (this.iframe) ? $('body', this.iframe_doc).html(content) : $(this.textarea).val(content); } lwRTE.prototype.set_selected_controls = function(node, controls) { var toolbar = this.get_toolbar(); if(!toolbar) return false; var key, i_node, obj, control, tag, i, value; try { for (key in controls) { control = controls[key]; obj = $('.' + key, toolbar); obj.removeClass('active'); if(!control.tags) continue; i_node = node; do { if(i_node.nodeType != 1) continue; tag = i_node.nodeName.toLowerCase(); if($.inArray(tag, control.tags) < 0 ) continue; if(control.select) { obj = obj.get(0); if(obj.tagName.toUpperCase() == 'SELECT') { obj.selectedIndex = 0; for(i = 0; i < obj.options.length; i++) { value = obj.options[i].value; if(value && ((control.tag_cmp && control.tag_cmp(i_node, value)) || tag == value)) { obj.selectedIndex = i; break; } } } } else obj.addClass('active'); } while(i_node = i_node.parentNode) } } catch(e) { } return true; } lwRTE.prototype.get_selected_element = function () { var node, selection, range; var iframe_win = this.iframe.contentWindow; if (iframe_win.getSelection) { try { selection = iframe_win.getSelection(); range = selection.getRangeAt(0); node = range.commonAncestorContainer; } catch(e){ return false; } } else { try { selection = iframe_win.document.selection; range = selection.createRange(); node = range.parentElement(); } catch (e) { return false; } } return node; } lwRTE.prototype.get_selection_range = function() { var rng = null; var iframe_window = this.iframe.contentWindow; this.iframe.focus(); if(iframe_window.getSelection) { rng = iframe_window.getSelection().getRangeAt(0); if($.browser.opera) { //v9.63 tested only var s = rng.startContainer; if(s.nodeType === Node.TEXT_NODE) rng.setStartBefore(s.parentNode); } } else { this.range.select(); //Restore selection, if IE lost focus. rng = this.iframe_doc.selection.createRange(); } return rng; } lwRTE.prototype.get_selected_text = function() { var iframe_win = this.iframe.contentWindow; if(iframe_win.getSelection) return iframe_win.getSelection().toString(); this.range.select(); //Restore selection, if IE lost focus. return iframe_win.document.selection.createRange().text; }; lwRTE.prototype.get_selected_html = function() { var html = null; var iframe_window = this.iframe.contentWindow; var rng = this.get_selection_range(); if(rng) { if(iframe_window.getSelection) { var e = document.createElement('div'); e.appendChild(rng.cloneContents()); html = e.innerHTML; } else { html = rng.htmlText; } } return html; }; lwRTE.prototype.selection_replace_with = function(html) { var rng = this.get_selection_range(); var iframe_window = this.iframe.contentWindow; if(!rng) return; this.editor_cmd('removeFormat'); // we must remove formating or we will get empty format tags! if(iframe_window.getSelection) { rng.deleteContents(); rng.insertNode(rng.createContextualFragment(html)); this.editor_cmd('delete'); } else { this.editor_cmd('delete'); rng.pasteHTML(html); } }
-
∞ Find and replace HTML string
jQuery('.menu li').html(function(i,h){ return h.replace('&', '<div class="reg">&</div>'); });
-
∞ jQuery scrollFollow for minimalists
/** * jquery.scrollstay.js * scrollFollow for minimalists. * * Derived from jquery.scrollFollow.js by R.A. Ray, * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/) * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php) * * Removed all animation, delay, cookies and killSwitch. * * @author Dylan McCall * * @projectDescription jQuery plugin that quietly keeps an element visible as the user scrolls * * @version 0.4.0 * * @requires jquery.js (tested with 1.2.6) * * @param offset int - Number of pixels box should remain from top of viewport * default: 0 * @param container string - ID of the containing div * default: box's immediate parent * @param relativeTo string - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport * default: 'top' */ ( function( $ ) { $.scrollStay = function ( box, options ) { // Convert box into a jQuery object box = $( box ); // 'box' is the object to be animated var position = box.css( 'position' ); function update() { // A bunch of values we need to determine where to animate to var viewportHeight = parseInt( $( window ).height() ); var pageScroll = parseInt( $( document ).scrollTop() ); var parentTop = parseInt( box.cont.offset().top ); var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) ); var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) ); var aniTop; /* Make sure the user wants the animation to happen, and it will be helpful. (It isn't helpful if the user is trying to scroll within the box!) */ if ( viewportHeight > boxHeight ) { // If the box should animate relative to the top of the window if ( options.relativeTo == 'top' ) { // Don't animate until the top of the window is close enough to the top of the box if ( box.initialOffsetTop >= ( pageScroll + options.offset ) ) { aniTop = box.initialTop; } else { aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) ); } } // If the box should animate relative to the bottom of the window else if ( options.relativeTo == 'bottom' ) { // Don't animate until the bottom of the window is close enough to the bottom of the box if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) ) { aniTop = box.initialTop; } else { aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) ); } } box.css({ top: aniTop }); } }; // If no parent ID was specified, and the immediate parent does not have an ID // options.container will be undefined. So we need to figure out the parent element. if ( options.container == '') { box.cont = box.parent(); } else { box.cont = $( '#' + options.container ); } // Finds the default positioning of the box. box.initialOffsetTop = parseInt( box.offset().top ); box.initialTop = parseInt( box.css( 'top' ) ) || 0; // Hack to fix different treatment of boxes positioned 'absolute' and 'relative' if ( box.css( 'position' ) == 'relative' ) { box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) ); } else { box.paddingAdjustment = 0; } // Animate the box when the page is scrolled $( window ).bind('scroll resize', function () { update(); } ); // Run an initial animation on page load update(); }; $.fn.scrollStay = function ( options ) { options = options || {}; options.relativeTo = options.relativeTo || 'top'; options.offset = options.offset || 0; options.container = options.container || this.parent().attr( 'id' ); this.each( function() { new $.scrollStay( this, options ); } ); return this; }; })( jQuery );
-
∞ lazyload script
$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" });


