BLOB stands for a Binary Large OBject. -------------------------------------------------------------- A BLOB can store multimedia content like Images, Videos, and Audio but it can really store any kind of binary data. Since the default length of a BLOB isn't standard, you can define the storage capacity of each BLOB to whatever you'd like up to 2,147,483,647 characters in length. -------------------------------------------------------------- Since jQuery doesn't have a way to handle blob's, you could try using the native Blob interface. var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.png", true); oReq.responseType = "arraybuffer"; oReq.onload = function(oEvent) { var blob = new Blob([oReq.response], {type: "image/png"}); // ... }; oReq.send(); --------------------------------------------------------------

$.each(data, function(i, occupation) { console.log(occupation['pk'], occupation['name']); });

window.setInterval(function(){ /// call your function here }, 5000); ------------------------------------------------------------- $(function () { setTimeout(runMyFunction, 10000); }); ------------------------------------------------------------- setTimeout(expression, timeout); runs the code/function once after the timeout. setInterval(expression, timeout); runs the code/function in intervals, with the length of the timeout between them. ------------------------------------------------------------- setInterval repeats the call, setTimeout only runs it once. ------------------------------------------------------------- setTimeout allows us to run a function once after the interval of time. setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval -------------------------------------------------------------

$("li[data-step=2]").addClass('active');

Create a file, for example, "ie.js" and copy the content into it. Load it after jquery.js: jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); ----------------------------------------------------------------- or you can include this after loading the jquery.js file: <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> -----------------------------------------------------------------

$(window).on('load', function() { $('#contact-us').click(); });

$('#receive-sms').click(function() { if ($(this).is(':checked')) { } });

CSS: /* Hide HTML5 Up and Down arrows. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } --------------------------------------------------------------- jQuery(document).ready( function($) { // Disable scroll when focused on a number input. $('form').on('focus', 'input[type=number]', function(e) { $(this).on('wheel', function(e) { e.preventDefault(); }); }); // Restore scroll on number inputs. $('form').on('blur', 'input[type=number]', function(e) { $(this).off('wheel'); }); // Disable up and down keys. $('form').on('keydown', 'input[type=number]', function(e) { if ( e.which == 38 || e.which == 40 ) e.preventDefault(); }); }); ---------------------------------------------------------------

Get the text value of a selected option: $( "#myselect option:selected" ).text(); ------------------------------------------------------------- Get the value of a selected option: $( "#myselect" ).val(); ------------------------------------------------------------- Event: $('#my_select').change(function() { }) -------------------------------------------------------------

$('#myButton').click(function () { var redirectWindow = window.open('http://google.com', '_blank'); $.ajax({ type: 'POST', url: '/echo/json/', success: function (data) { redirectWindow.location; } }); });

Create a file, for example, "ie.js" and copy the content into it. Load it after jquery.js: jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); ----------------------------------------------------------------- or you can include this after loading the jquery.js file: <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

$("li[data-step=2]").addClass('active');

$(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

var _URL = window.URL || window.webkitURL; $('#upload-face').change(function() { var file, img; if (file = this.files[0]) { img = new Image(); img.onload = function () { if (this.width < 255 || this.height < 330) { alert('{% trans "The file dimension should be at least 255 x 330 pixels." %}'); } }; img.src = _URL.createObjectURL(file); } }

$('input[type="radio"][name="machines"]:checked').val();

$(".numeric-inputs").keydown(function(event) { // Allow only backspace, delete, tab, ctrlKey if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.ctrlKey ) { // let it happen, don't do anything } else { // Ensure that it is a number and stop the keypress if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) { // let it happen, don't do anything } else { event.preventDefault(); } } });

var membership_id = $(e.target).parent().attr('id');

$('#id_certificate').bind('change', function() { if(this.files[0].size > 1048576) { alert("{% trans 'The file size should be less than 1 MB.' %}"); $(this).val(''); } });

jQuery: $(document).ready(function() { var images = []; var titles = []; {% for slider in sliders %} images.push('{{ slider.image.url }}'); titles.push('{{ slider.image.motto_en }}'); {% endfor %} var image_index = 0; $('#iind-slider').css('background-image', 'url(' + images[0] + ')'); setInterval(function() { image_index++; if(image_index == images.length) { image_index = 0; } $('#iind-slider').fadeOut('slow', function() { $(this).css('background-image', 'url(' + images[image_index] + ')'); $(this).fadeIn('slow'); }); }, 4000); }); ----------------------------------------------------------------- CSS: #iind-slider { width: 100%; height: 100vh; background: no-repeat fixed 0 0; background-size: 100% 100%; }

// Convert seconds to real Hour:Minutes:Seconds function secondsTimeSpanToHMS(s) { let h = Math.floor(s / 3600); // Get whole hours s -= h * 3600; let m = Math.floor(s / 60); // Get remaining minutes s -= m * 60; return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); // Zero padding on minutes and seconds } setInterval(function() { var left_time = secondsTimeSpanToHMS(server_left_time); $('#left-time').find('span').html(left_time); server_left_time -= 1; }, 1000);

Find this script file and include it after the main jquery file: jquery-migrate-1.0.0.js

1- Load the jquery libraries like the example: <script type="text/javascript" src="{% static 'iind/js/jquery-1.7.1.min.js' %}"></script> <script type="text/javascript"> var jQuery_1_7_1 = $.noConflict(true); </script> <script type="text/javascript" src="{% static 'iind/js/jquery-1.11.3.min.js' %}"></script> <script type="text/javascript"> var jQuery_1_11_3 = $.noConflict(true); </script> ------------------------------------------------------------------------------------ 2- Then use them as follows: jQuery_1_11_3(document).ready(function() { jQuery_1_11_3(".dropdown").hover( function() { jQuery_1_11_3('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); jQuery_1_11_3(this).toggleClass('open'); jQuery_1_11_3('b', this).toggleClass("caret caret-up"); }, function() { jQuery_1_11_3('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); jQuery_1_11_3(this).toggleClass('open'); jQuery_1_11_3('b', this).toggleClass("caret caret-up"); }); }); ------------------------------------------------------------------------------------ And change the last line of jQuery libraries like this: Change }(jQuery, window, document)); To: }(jQuery_1_11_3, window, document)); ------------------------------------------------------------------------------------ And for bootstrap.min.js, I had to change this long line: (The last word, jQuery needed to be changed): if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery) To: if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery_1_11_3) ------------------------------------------------------------------------------------

// similar behavior as an HTTP redirect window.location.replace("http://stackoverflow.com"); // similar behavior as clicking on a link window.location.href = "http://stackoverflow.com"; $(location).attr('href','http://yourPage.com/');

var $root = $('html, body'); $('a').click(function () { $root.animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1500); return false; });

$("[id=choose]") --------------------------------------------------------------------------------------------- $( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" ); --------------------------------------------------------------------------------------------- $("ul").find("[data-slide='" + current + "']"); $("ul[data-slide='" + current +"']"); ---------------------------------------------------------------------------------------------

if(_.contains(intensity_filters, intensity_value)) { intensity_filters = _.without(intensity_filters, intensity_value); } ---------------------------------------------------------------------------------------------

var selected = []; $('#checkboxes input:checked').each(function() { selected.push($(this).attr('name')); }); ------------------------------------------------------------------------------------------------------ And for getting the unchecked ones: $('#checkboxes input:not(:checked)').each(function() {} });

function commaSeparateNumber(val) { while (/(\d+)(\d{3})/.test(val.toString())) { val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2'); } return val; }

$(document).mouseup(function (e) { var container = $("#my-cart-box"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } });

$('#the_form')[0].reset()

Add Click event for dynamically created tr in table $('.found-companies-table').on('click', 'tr', function() { alert('hi'); }); ----------------------------------------------------------------------------------------------------- $("body").on("mouseover mouseout", "select", function(e){ // Do some code here }); ----------------------------------------------------------------------------------------------------- $(staticAncestors).on(eventName, dynamicChild, function() {}); ----------------------------------------------------------------------------------------------------- $('body').on('click', '.delete-order', function(e) { });

$("div.test:not(:first)").hide(); -------------------------------------------------------------------------- $("div.test:not(:eq(0))").hide(); -------------------------------------------------------------------------- $("div.test").not(":eq(0)").hide(); -------------------------------------------------------------------------- $("div.test:gt(0)").hide(); -------------------------------------------------------------------------- $("div.test").gt(0).hide(); -------------------------------------------------------------------------- $("div.test").slice(1).hide();

$("#mytable > tbody").html(""); ---------------------------------------- OR ---------------------------------------- $("#myTable").empty(); ---------------------------------------- OR ---------------------------------------- $("#myTable").find("tr:gt(0)").remove(); ---------------------------------------- OR ---------------------------------------- $("#myTable").children( 'tr:not(:first)' ).remove();

http://demo.evatheme.com/item/?product=journey_html http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ http://www.unheap.com/ https://www.freshdesignweb.com/image-hover-effects/ http://apycom.com/webdev/top-creative-and-beautiful-bootstrap-slider-samples-2016-199.html http://cssslider.com/jquery-content-slider-31.html http://joaopereirawd.github.io/animatedModal.js/ http://www.jqueryscript.net/demo/Material-Inspired-Morphing-Button-with-jQuery-velocity-js-Quttons/ http://www.jqueryscript.net/demo/Modal-Like-Sliding-Panel-with-jQuery-CSS3/ http://www.jqueryscript.net/menu/Stylish-Off-canvas-Sidebar-Menu-with-jQuery-CSS3.html http://plugins.compzets.com/animatescroll/ https://1stwebdesigner.com/jquery-gallery/ https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/ http://www.eyecon.ro/spacegallery/ http://keith-wood.name/imageCube.html http://www.jqueryscript.net/demo/Flexible-3D-Flipping-Cube-Pluigin-HexaFlip/index3.html http://tympanus.net/Development/BookBlock/ http://tympanus.net/Development/ImageTransitions/ http://renatorib.github.io/janimate/ http://git.blivesta.com/rippler/ http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Responsive-Sliding-View-SimpleSlideView/ http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/ http://www.jqueryscript.net/demo/jQuery-Plugin-For-Circular-Popup-Html-Elements-Radiate-Elements/ http://www.jqueryscript.net/demo/jQuery-3D-Animation-Plugin-With-HTML5-CSS3-Transforms-jworld/ http://lab.ejci.net/favico.js/ http://www.jqueryscript.net/demo/jQuery-Plugin-To-Auto-Scroll-Down-A-Web-Page-Hungry-Scroller/ http://www.jqueryscript.net/demo/jQuery-Plugin-To-Auto-Scroll-Down-Html-Page-Slow-Auto-Scroll/ https://haltu.github.io/muuri/ https://ilkeryilmaz.github.io/timelinejs/ http://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html https://github.com/soundar24/roundSlider

$('.forms').find("input[type!='hidden']").first().focus();

If you are passing data to a DOM element from the server, you should set the data on the element: <a id="foo" data-foo="bar" href="#">foo!</a> The data can then be accessed using .data() in jQuery: console.log( $('#foo').data('foo') ); //outputs "bar" However when you store data on a DOM node in jQuery using data, the variables are stored in on the node object. This is to accommodate complex objects and references as storing the data on the node element as an attribute will only accommodate string values. Continuing my example from above: $('#foo').data('foo', 'baz'); console.log( $('#foo').attr('data-foo') ); //outputs "bar" as the attribute was never changed console.log( $('#foo').data('foo') ); //outputs "baz" as the value has been updated on the object Also, the naming convention for data attributes has a bit of a hidden "gotcha": HTML: <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a> JS: console.log( $('#bar').data('fooBarBaz') ); //outputs "fizz-buzz" as hyphens are automatically camelCase'd The hyphenated key will still work: HTML: <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a> JS: console.log( $('#bar').data('foo-bar-baz') ); //still outputs "fizz-buzz" However the object returned by .data() will not have the hyphenated key set: $('#bar').data().fooBarBaz; //works $('#bar').data()['fooBarBaz']; //works $('#bar').data()['foo-bar-baz']; //does not work It's for this reason I suggest avoiding the hyphenated key in javascript. The .data() method will also perform some basic auto-casting if the value matches a recognized pattern: HTML: <a id="foo" href="#" data-str="bar" data-bool="true" data-num="15" data-json='{"fizz":["buzz"]}'>foo!</a> JS: $('#foo').data('str'); //`"bar"` $('#foo').data('bool'); //`true` $('#foo').data('num'); //`15` $('#foo').data('json'); //`{fizz:['buzz']}` This auto-casting ability is very convenient for instantiating widgets & plugins: $('.widget').each(function () { $(this).widget($(this).data()); //-or- $(this).widget($(this).data('widget')); }); If you absolutely must have the original value as a string, then you'll need to use .attr(): HTML: <a id="foo" href="#" data-color="ABC123"></a> <a id="bar" href="#" data-color="654321"></a> JS: $('#foo').data('color').length; //6 $('#bar').data('color').length; //undefined, length isn't a property of numbers $('#foo').attr('data-color').length; //6 $('#bar').attr('data-color').length; //6

What's the purpose of a leading colon in a jQuery selector? The :input selector basically selects all form controls (input, textarea, select and button elements) where as input selector selects all the elements by tag name input. Since radio button is a form element and also it uses input tag so they both can be used to select radio button. However both approaches differ the way they find the elements and thus each have different performance benefits.

What is the meaning of the colon (:) and question mark (?) in jquery? That's an inline if. If true, do the thing after the question mark, otherwise do the thing after the colon. The thing before the question mark is what you're testing.

$('#toggle_message').attr('value', 'Show') ------------------------------------------------------- $('#message').toggle('fast'); ------------------------------------------------------- $(document).ready(function() {}); $(window).load(function() {}); ------------------------------------------------------- $(window).unload(function() { alert('You\'re leaving this page'); }); This alert will be raised when move to another window by clicking on a link or click on the back or preivous buttons of browser, or when you close the tab. ------------------------------------------------------- $('*').length(); Returns the number of all the elements in the page. ------------------------------------------------------- $('p:first') $('p:last') $('input:button') $('input[type="email"]') ------------------------------------------------------- $(':text').focusin(function() {}); $(':text').blur(function() {}); ------------------------------------------------------- $('#email').attr('value', 'Write your email address').focus(function() { # Some code }).blur(function() { # Some code }); ------------------------------------------------------- search_name = jQuery.trim($(this).val()); $("#names li:contains('" + search_name + "')").addClass('.highlight'); ------------------------------------------------------- $('input[type="file"]').change(function() { $(this).next().removeAttr('disabled'); }).next().attr('disabled', 'disabled'); ------------------------------------------------------- $('#menu_link').dbclick(function() {}); ------------------------------------------------------- $('#click_me').toggle(function() { # Code here }, function() { # Code here }; ------------------------------------------------------- var scroll_pos = $('#some_text').scrollTop(); ------------------------------------------------------- $('#some_text').select(function() {}); ------------------------------------------------------- $('a').bind('mouseenter mouseleave', function() { $(this).toggleClass('bold'); }); bind() is specified to use for series of events. ------------------------------------------------------- $('.hover').mousemove(function(e) { $('some_div').text('x: ' + e.clientX + ' y: ' + e.clientY); }); ------------------------------------------------------- Hover over description: $('.hover').mousemove(function(e) { var hovertext = $(this).attr('hovertext'); $('#hoverdiv').text(hovertext').show(); $('#hoverdiv').css('top', e.clientY+10).css('left', e.clientX+10); }).mouseout(function() { $('#hoverdiv').hide(); }); Create an empty div with id="hovertext" in HTML, and style it in CSS. ------------------------------------------------------- .addClass('class1 class2 class3') ------------------------------------------------------- $(":input').focus(function() { $(this).toggleClass('highlight'); }); ------------------------------------------------------- Traversing using .each(): $('input[type="text"]').each(function(index) { alert(index); }); This index argument prints 0, 1, 2, ... per the items which are selected by .each statement/function. ------------------------------------------------------- These two statements do the same thing: $('.names li:first').append('Hello'); $('.names').find('li').first().append('Hello'); if($(this).has('li').length == 0) { } if($(this).has(':contains')) {} ------------------------------------------------------- $(this).nextAll().toggle(); This is useful when you want to toggle a sub-menu using the first/top item. ------------------------------------------------------- $(this).hide('slow', 'linear', function() {}); .slideup() .slideLow() .slideToggle() .stop() Will cause the animation of slide effect to stop ------------------------------------------------------- .fadeTo(100, 0.4, function() {}) $('.fadeto').not(this).fadeTo(100, 0.4); ------------------------------------------------------- $('.fadeto').css('opacity', '0.4'); $('.fadeto').mouseover(function() { $(this).fadeTo(100, 1); $('.fadeto').not(this).fadeTo(100, 0.4); }); ------------------------------------------------------- append() appendTo() clone() ------------------------------------------------------- $('html, body').animate({scrollTop: 0}, 10000); ------------------------------------------------------- $('#terms').scroll(function() { var textarea_height = $(this)[0].scrollHeight(); var scroll_height = textarea_height - $(this).innerHeight(); var scroll_top = $(this).scrollTop(); }); ------------------------------------------------------- var names = ['Alex', 'Billy', 'Dale']; if (jQuery.inArray('Alex', names) != '-1') { alert('Found'); } ------------------------------------------------------- $.each(names, function(index, value) {}) ------------------------------------------------------- setInterval(function() { var timestamp = jQuery.now(); $("#time").text(timestamp); }, 1); ------------------------------------------------------- (function($) { $.fn.your_new_function_name = function() {} })(jQuery) ------------------------------------------------------- Options: $('#drag').draggable({axis: 'x'}); $('#drag').draggable({containment: 'document'}); $('#drag').draggable({containment: 'window'}); $('#drag').draggable({containment: 'parent'}); $('#drag').draggable({containment: [0, 0, 200, 200]}); $('#drag').draggable({cursor: 'pointer'}); $('#drag').draggable({opacity: 0.6}); $('#drag').draggable({grid: [20, 20]}); $('#drag').draggable({revert: true}); $('#drag').draggable({revertDuration: 1000}); Events: $('#drag').draggable({start: function() {}}); $('#drag').draggable({drag: function() {}}); $('#drag').draggable({stop: function() {}}); ------------------------------------------------------- $('#drop').droppable({hoverClass': 'border'}); $('#drop').droppable({tolerance': 'fit'}); $('#drop').droppable({tolerance': 'intersect'}); $('#drop').droppable({tolerance': 'pointer'}); $('#drop').droppable({tolerance': 'touch'}); $('#drop').droppable({accept': '.name'}); $('#drop').droppable({over': function() {}}); $('#drop').droppable({out': function() {}}); $('#drop').droppable({drop': function() {}}); ------------------------------------------------------- $('#names').sortable({containment: 'parent'}); $('#names').sortable({tolerance: 'pointer'}); $('#names').sortable({cursor: 'pointer'}); $('#names').sortable({revert: true}); $('#names').sortable({opacity: 0.6}); $('#names').sortable({connectWith: '#palces, #names'}); $('#names').sortable({update: function() {}}); ------------------------------------------------------- Resizable: This required a css file `jquery-ui-custom.css` $('#box').resizable({containment: 'document'}); $('#box').resizable({animate: true}); $('#box').resizable({ghost: true}); $('#box').resizable({animateDuration: 'slow'}); `slow`, `medium`, `fast`, `normal`, `1000` $('#box').resizable({animateEasing: 'swing'}); `swing`, `linear` $('#box').resizable({aspectRatio: true}); `0.4`, `2/5`, `9/10` $('#box').resizable({autoHide: true}); $('#box').resizable({handles: 'n, e, se'); n=North, e=East, w=West, s=South, or `all` If you do not specify `all`, you can not resize the box from left or top, as they are so closed to the browser. $('#box').resizable({grid: [20, 20]}); $('#box').resizable({minHeight: 200); $('#box').resizable({maxHeight: 100); $('#box').resizable({minWidth: 200); $('#box').resizable({maxWidth: 100); ------------------------------------------------------- Accordion: $('#content').accordion({fillSpace: true}) $('#content').accordion({icons: {'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus'}}) $('#content').accordion({collabsable: true}) $('#content').accordion({active: 2}) `false` ------------------------------------------------------- Dialog: $('#dialog').dialog() $('#dialog').attr('title', 'Saved').text('Settings were saved.').dialog(); .dialog({buttons: {'OK': function() { $(this).dialog('close'); }); closeOnEscape: true draggable: false resizable: false show: 'fade', 'bounce' modal: true position: 'top', 'top, left', 'bottom', 'top, center', [100, 100] ------------------------------------------------------- Progressbar: var val = 0; var interval = setInterval(function() { val = val + 1; $('#pb').progressbar({value: val}); $('#percent').text(val + '%'); if (val == 100) { clearInterval(interval); } }); ---------------------------------------------- $("#header_menus img:not(.hover_menus)").mouseenter(function() { $(this).hide(); $("#" + $(this).attr('data-hover')).show(); });