Tutorial Show Most Recent Flickr Uploads

by in , 0

This code will display the most recent uploads from Flickr for any account. Replace the "35591378@N03" (the Whitehouse account) in the code below with the ID of the account you are fetching from. Use this if you need help finding it. Alter the "9" in the loop to show more or less than 10.

$(document).ready(function() {
       $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=35591378@N03&format=json&jsoncallback=?", function(data) {
               var target = "#latest-flickr-images ul"; // Where is it going?
               for (i = 0; i <= 9; i = i + 1) { // Loop through the 10 most recent, [0-9]
                       var pic = data.items[i];
                       var liNumber = i + 1; // Add class to each LI (1-10)
                       $(target).append("<li class='flickr-image no-" + liNumber + "'><a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m + "' /></a></li>");
               }
       });
});

Example

Reference URL

Tutorial Set/Clear Default Input Value

by in , 0 

$('.default-value').each(function() {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

});

Tutorial Serialize Form to JSON

by in , 0 

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

Reference URL

Tutorial Select List Item Only If Doesn’t Contain Another List (and is top level)

by in , 0

I realize this is rather specific, but I had to write this selector earlier to fix a problem and I used jQuery because the selector is rather advanced (and needed to work cross-browser). I needed to select the anchor link of a list item but only if that list item didn't contain another list and was at the top level of the nested list structure (no deeper).

$("ul.dropdown > li:not(:has('ul')) a").css({
        "background-image": "none",
});

The idea was that each of the top level links in the dropdown menu had a "down arrow" graphic, but the list items that did not have a dropdown should have that arrow removed.

Tutorial Select Element Only if Children are Not Animated

by in , 0 

var myChildrenBehave =  $(".element").filter(function() {
  var filtered = $(this).children().not(":animated");
  return filtered;
 });

This selects the element only if its children behave (not being animated). Very helpful on a drop down menu (on hover or click)

Tutorial Search/Replace

by in , 0 

jQuery(function () { 
    jQuery(":contains(FIND)").not(":has(:contains(FIND))").each(function () { 
        var that = $(this), 
            html = that.html(); 
         
        html = html.replace(/(\(FIND:.*?\))/g, "REPLACE-WITH"); 
        that.html(html); 
    }); 
});

Reference URL

Tutorial Scroll Page Horizontally With Mouse Wheel

by in , 0

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The "30" represents speed. preventDefault ensures the page won't scroll down.

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

View Demo