If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

For this plugin we are using the jQuery Twitter Search Plugin.

Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:

<span class="twitter_search">Some search term</span>

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

You can call the plugin like this:

$(function() {
	$('#article').find('.twitter_search').twitterpopup();
});

where #article should be replaced by the ID of your container.

View demoDownload source

View demoDownload source

Here’s an improved version of the Micro Image Gallery Plugin. I have added some features as suggested in the comments, specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To add descriptions for the images, just place your text inside the alt attribute of the image tag, like shown further in the HTML Structure section.

The Plugin Parameters

The plugin has the following configuration:

• menu: Defines if the menu should be visible (true) or just appear when hovering over the gallery (false). The default value is true.
• size: The size of the image gallery: “small”, “medium” or “large”
• mode: The initial mode of the image gallery: “single” or “thumbs”
• cycle: If set to true, the first image will be displayed again when reaching the end of the gallery
• autoplay: If set to true, the gallery will jump from image to image automatically
• autoplayTime: The time in milliseconds that it takes to show the next image

The three sizes of the image gallery define the following picture sizes (maximal height and width):

• small: 102 pixels
• medium: 162 pixels
• large: 222 pixels

HTML Structure

All images should be wrapped in a div with class “microGallery”:

<div id="mG1" class="microGallery">
    <img src="gallery/2.jpg"/>
	<img src="gallery/3.jpg" alt="description comes here"/>
	<img src="gallery/4.jpg" alt="if you leave it empty then nothing will appear in the description container"/>
	<img src="gallery/5.jpg" alt="...and another description"/>
</div>

and you can call the plugin:

$("#mG1").microgallery();

Please note that in IE no rounded borders or box shadows will be shown.

View demoDownload source

View demoDownload source

There’s a new version here:

In many blogs and news sites images are mostly included as an addition to the content. Space is often limited and therefore we thought of a slick solution to integrate a miniature image gallery that does not occupy a lot of space.

The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.

The Plugin Parameters

The plugin has the following configuration:

• menu: Defines if the menu should be visible (true) or just appear when hovering over the gallery (false). The default value is true.
• size: The size of the image gallery: “small”, “medium” or “large”
• mode: The initial mode of the image gallery: “single” or “thumbs”

The three sizes of the image gallery define the following picture sizes (maximal height and width):

• small: 102 pixels
• medium: 162 pixels
• large: 222 pixels

HTML Structure

All images should be wrapped in a div with class “microGallery”:

<div id="mG1" class="microGallery">
    <img src="gallery/2.jpg"/>
	<img src="gallery/3.jpg"/>
	<img src="gallery/4.jpg"/>
	<img src="gallery/5.jpg"/>
</div>

and you can call the plugin:

$("#mG1").microgallery();

Please note that in IE no rounded borders or box shadows will be shown.
There’s a new version here:
View demoDownload source

Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression that the background gets darker when hovering.

The CSS sprites image of each photo gets first loaded in the photo container. Then we add a paragraph element which has the same background image but a different background position (the dark half). This element gets faded in, so we have a smooth effect.

View demoDownload source

Here is a jQuery plugin that makes use of the CSS Mania API. CSS Mania is a well known website showcase site where designs can be submitted and rated. A lot of information about each website is provided like the color scheme, the developer of the website, the creation date and many more. The API can be found here.

The aim of this plugin is to retrieve all the data provided by the API concerning one website. You could, for example, use this to show the rating of your own site (if it is on CSS Mania) or to show how many votes your website already has. If you have more than one website on CSS Mania, you could as well display them with their information on your portfolio. There are surely many more ways to use this API, just be creative :)

The plugin has the following configuration:

• website: Target website
• onInit: Function triggered, before calling the API
• onComplete: Function triggered, after receiving the response

View demoDownload source

Here is a very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay. You can try out the demo by first clicking around on the page and then clicking “Analyze”. Since the dots are semi-transparent, spots that have been clicked on more often, will appear slightly darker. Click on the overlay to make it invisible again and continue with the “recording”.

View demoDownload source

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Your ip: " + data.ip);
});

file.xml:

<?xml version="1.0" ?>
<result>
    <item>
        <id>1</id>
        <title>title1</title>
        <description>desc1</description>
    </item>
    <item>
        <id>2</id>
        <title>title2</title>
        <description>desc2</description>
    </item>
    <!-- ... -->
</result>

$.get('file.xml',{},function(data){
    $('item',data).each(function(){
        var $this       = $(this);
        var id             = $this.find('id').text();
        var title         = $this.find('title').text();
        var description = $this.find('description').text();
        //do something ...
    });
});

<div id="sites">
    <a id="site_1" href="http://siteA.com">siteA</a>
    <a id="site_2" href="http://siteB.com">siteB</a>
    <a id="site_3" href="http://siteB.com">siteC</a>
    ...
</div>

you need to get 1 from site_1, 2 from site_2 …

$("#sites a").click(function(){
    var $this     = $(this);
    var nmb     = $this.attr('id').match(/site_(\d+)/)[1];
    ...
});

<div id="result">12343778</div>

var delimiter = '.';
$('#result').html()
            .toString()
            .replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter)
            .replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

var text = $("#textareaId").val();
var lines = text.split(/\r|\r\n|\n/);
alert(lines.length);

jQuery.fn.log = function (msg) {
    console.log("%s: %o", msg, this);
    return this;
};
$('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

// Based on: http://www.quirksmode.org/js/findpos.html
var getCumulativeOffset = function (obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

function isCreditCard( CC ){
    if (CC.length > 19)
        return (false);

    sum = 0; mul = 1; l = CC.length;
    for (i = 0; i < l; i++){
        digit = CC.substring(l-i-1,l-i);
        tproduct = parseInt(digit ,10)*mul;
        if (tproduct >= 10)
            sum += (tproduct % 10) + 1;
        else
            sum += tproduct;
        if (mul == 1)
            mul++;
        else
            mul–;
    }
    if ((sum % 10) == 0)
        return (true);
    else
        return (false);
}

$("#element").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Button");
    }
    else if(e.button == 2)
        alert("Right Button");
});

var img = $('#imageid');
var theImage = new Image();
theImage.src = img.attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

$('#target div:not(#exclude)').hide();
//or
$('#target').children().filter(':not(#exclude)').hide();

$('element').bind('resize', function(){
alert( 'Height changed to' + $(this).height() );
}

$('someTableSelector').find('tr:gt(0)').remove();

1 level:
$('*:not(* *)');
2 level:
$('*:not(* *)').find('> *');
3 level:
$('*:not(* *)').find('> * > *');

var foundin = $('*:contains("some string bla bla")');

alert($(document).scrollTop());

$('* :not(.someclass)')

$('#myTable tr:last').after('<tr>...</tr>');

num = num.toString(16);
reverse process:
num = parseInt(num, 16);

var elements = $('#someid input[type=sometype][value=somevalue]').get();

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

example: first 10 anchors
$('a').slice(0,10);
//or
$('a:lt(10)');

//Get the value of a selected option
$('selectElement').val();

//Get the text of a selected option
$('#selectElementId :selected').text();

//Remove an option (e.g. id=1)
$("#selectElementId option[value='1']").remove();

$(document).ready(function() {
    var dt = new Date();
    dt.setSeconds(dt.getSeconds() + 60);
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
    if(!cookiesEnabled){
        //cookies are not enabled
    }
});

var tog = false; // or true if they are checked on load
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

$("#lda-form").submit(function(){
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 18;
    var mydate = new Date();
    mydate.setFullYear(year, month-1, day);

    var currdate = new Date();
    currdate.setFullYear(currdate.getFullYear() - age);
    if ((currdate - mydate) < 0){
        alert("Sorry, only persons over the age of " + age + " may enter this site");
        return false;
    }
    return true;
});

if($(element).is(":visible")) {
    //The element is Visible
}

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//jQuery code to count child elements
$("#foo > div").length

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

$().ready(function() {
    $('#add').click(function() {
        !$('#select1 option:selected').appendTo('#select2');
    });
    $('#remove').click(function() {
        !$('#select2 option:selected').appendTo('#select1');
    });
});

$(document).ready(function(){
    $("#checkboxall").change(function(){
        var checked_status = this.checked;
        $("input[name=checkall]").attr("checked", checked_status);
    });

});

$(document).ready(function() {
    var pathname = window.location.pathname;
});

$(function() {
    $(document).keypress(function(e){
        switch(e.which){
        // "ENTER"
        case 13:
        alert('enter pressed');
        break;

        // "s"
        case 115:
        alert('s pressed');
        break;

        (...)

        }
    });

});

View demoDownload source

Here’s an effect based on the one used in fml to stop and pause an event. The idea is that when we click on the play/pause button or press the space button, an image (play or pause) appears and fades out. This effect is done using jQuery, which we use to animate the image enlarging and fading out.

The images used for this effect:

The CSS:

.player img{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

The HTML:

<a id="playbutton">Pause / Play</a>
<div id="player">
    <img id="play" src="images/play.png" width="100" height="100" style="display:none;"/>
    <img id="pause" src="images/pause.png" width="100" height="100" style="display:none;"/>
</div>

The jQuery:

$(function() {
$(document).keypress(function(e){
if ((e.which && e.which == 32) || (e.keyCode && e.keyCode == 32)) {
togglePlay();
return false;
} else {
return true;
}
});
$('#playbutton').click(function(){
togglePlay();
return false;
});

function togglePlay(){
var $elem = $('#player').children(':first');
$elem.stop()
.show()
.animate({'marginTop':'-175px','marginLeft':'-175px','width':'350px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'100px','height':'100px','margin-left':'-50px','margin-top':'-50px','opacity':'1','display':'none'});
});
$elem.parent().append($elem);
}
});

View demoDownload source