Category Archives: jQuery

How to display fields using select drop down and jQuery

By Mika | Published: 02/02/2011
  <script type="text/javascript">     $(document).ready(function(){         $("#Select").change(function(){             if ($(this).val() == "Other" ) {                 $("#OtherField").show();             } else {                 $("#OtherField").hide();           [...]
Posted in jQuery | Tagged , , , , , , | Leave a comment

How to Show/Hide a div based on day of the week with jQuery

By Mika | Published: 07/13/2010
JavaScritpt   <script type="text/javascript">         $(document).ready(function() {                 today=new Date()         thisDay=today.getDay()                 $("#sunday").hide();                 $("#monday").hide();                 $("#tuesday").hide();       [...]
Also posted in JavaScript | Tagged , , , , , , | Leave a comment

Simple and Smooth Expand and Collapse with jQuery

By Mika | Published: 01/26/2010
HTML example   <h2 class="myClass" id="trigger1">Click here to expand</h2> <div class="hide-container">      <p>Here goes whatever you want to expand/collapse</p>      <p>Here goes whatever you want to expand/collapse</p>      <p>Here goes whatever you want to expand/collapse</p>      <p>Here goes whatever you want to expand/collapse</p> </div>   CSS   .myClass {font-size:20px; color: #FF0000;} [...]
Posted in jQuery | Tagged , , , , | Leave a comment

How to set more than one event/option – jQuery Accordion

By Mika | Published: 11/25/2009
In The example below we set the mouseover event, auto height option as false and starts with the 3rd selector opened. (The index is a zero-indexed number to match the position of the header)   JavaScript   <script type="text/javascript">         $(function() {                 $(‘.subnav-rhs’).accordion({event: ‘mouseover’, [...]
Posted in jQuery | Leave a comment

Character Count with jQuery

By Mika | Published: 10/20/2009
jQuery   $(‘textarea’).each(function(){     // get current number of characters     var length = $(this).val().length;     // get current number of words     //var length = $(this).val().split(/\b[\s,\.-:;]*/).length;     // update characters     $(this).parent().find(‘.counter’).html( 4000 – length + ‘ characters left’);     // bind on key up event   [...]
Posted in jQuery | Tagged , | Leave a comment

How to Scroll to the Top Smoothly with jQuery

By Mika | Published: 10/20/2009
jQuery   $(document).ready(function() {         $(‘.backtotop’).click(function(){                 $(‘html, body’).animate({scrollTop:0}, ‘slow’);         }); });  
Posted in jQuery | Tagged , , , , , | 1 Comment

How to Scroll to Anchor Links Smoothly with jQuery

By Mika | Published: 10/20/2009
jQuery   $.fn.scroller = function() {         var speed = ‘slow’; // Choose default speed         $(this).each(function() {                 $(this).bind(‘click’, function() {                         var target = $(this).attr(‘href’); // Get scroll target [...]
Posted in jQuery | Tagged , , , , , , | Leave a comment

Fade in Fade out with jQuery

By Mika | Published: 10/20/2009
jQuery   q1 = {         init: function() {                 $("table.appTranslation").click(function() {                         $(this).fadeOut(‘slow’, function() {                                 $(this).html("Text to [...]
Posted in jQuery | Leave a comment

Preloading Images with jQuery

By Mika | Published: 10/20/2009
jQuery   jQuery.preloadImages = function() {   for(var i = 0; i<arguments.length; i++)   {     jQuery("<img>").attr("src", arguments[i]);   } };   // use like $.preloadImages("image0001.jpg", "/path/to/image0002.jpg", "some/image0003.jpg");  
Posted in jQuery | Tagged , , , | Leave a comment

How to Collapse and Expand with jQuery

By Mika | Published: 10/20/2009
Inside HEAD   <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() {   $("#trigger").click(function(event) { event.preventDefault(); $("#box").slideToggle(); });   $("#box a").click(function(event) { event.preventDefault(); $("#box").slideUp(); }); }); </script>   HTML:   <a href="#" id="trigger">TRIGGER</a> <div id="box"> <a href="#" class="close">[x]</a> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna [...]
Posted in jQuery | Tagged , , | Leave a comment