Xavi Esteve » jquery

Simplest Modal Window (less than 1KB) – jQuery Plugin

Xavi — Fri, 16 Mar 2012 15:18:19 +0000

Following my jQuery minimal plugin series I’ve now built a very functional and minimal jQuery plugin to create modal windows on the go, it weights exactly 572 Bytes (0.6KB). The modal windows have a slick design using a white rounded border square with a fine shadow:

The CSS style is fully customizable, only 8 properties used by default and you can modify most of them to customise it your way.

The script is unobtrusive and has a high-performance, meaning it only loads and modifies the DOM when required and it unloads everything completely when the modal window is closed. Closing the modal window can be done by either clicking outside of the window or by clicking any .mw_close element in the window content.

Download Simple Modal Window jQuery Plugin

Copy and paste this code below. Yes, ALL the plugin is in this small piece of code, you should just add it into a JavaScript file you have or directly into the page (inside the jQuery wrapper).

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */function mw_close(){$("#mw_win,#mw_mask,#mw_style").remove()}function mw_load(a){mw_mask="background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;";mw_win="background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;";$("head").append('");$("body").append('
'+a+"
");$("#mw_mask,.mw_close").unbind("click").bind("click",function(){mw_close()})}

Here’s the code without minifying:

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */
$(function() {
  /* Modal window script in 9 lines */
  function mw_load(html) {
    mw_mask = 'background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;';
    mw_win = 'background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;';
    $('head').append('');
    $('body').append('
'+html+'');
    $('#mw_mask,.mw_close').unbind('click').bind('click', function() {mw_close();});
  }
  function mw_close() {$('#mw_win,#mw_mask,#mw_style').remove();}

You can load a new Modal Window through JavaScript by using this function:

mw_load('Lorem ipsum dolor sit amet.
');

If you have any issues please let me know, note that the plugin’s purpose is to simply work, fancy features and extras should be coded apart specifically for your projects. The plugin requires jQuery and it hasn’t been tested in IE6.

Fixed Website Fold height (minimal Javascript Plugin, jQuery)

Xavi — Mon, 08 Aug 2011 06:22:10 +0000

FoldResizer is a Javascript plugin that will keep anything you want above the fold without worrying about your visitors screen size. The plugin is very easy to install and it works by resizing a

and allowing you to decide how much space left you need. Here are some examples:

These are screenshots of the same website loaded in different screen sizes, as you can see, the fold is always in the same place, displaying the same content for each user and having full control on what you want to show to them. Always keeping what matters above the fold.

Features

Cross-browser – Works in Firefox, Chrome, Safari, IE (including IE6)
No plugins required – Just 100% pure Javascript
Instant loading – No need to wait for the page to be loaded completely
Small size – Less than 0.2KB

Instructions

Include the script file and call the function by passing the parameters:

foldresizer(‘containerID’, freeheight, minheight);

ID of the container to be resized
How many pixels height to leave free
Minimum size of the resized container (default 0)

Example:

Note that this plugin is purely JavaScript and does not rely on jQuery or any other plugins so you can call it in your while the page is loading and users will not notice any page redrawing or resizing.

Demo

See the plugin working live at the SFP Group website. Resize your browser window and reload the page to see how it always keeps the fold fixed.

Download

Download the script by right clicking on the links and clicking ‘Save as’:

FoldResizer Minified version (0.95KB) (recommended)
FoldResizer Maxified version (1.5KB)

Clickable DIVs – jQuery plugin

Xavi — Tue, 10 May 2011 07:26:23 +0000

Clickable DIVs jQuery plugin will convert anything (

, etc.) into a clickable object. It is a great way to enhance the usability of your website by increasing the clickable space to your users while avoiding extra HTML markup or a somehow tedious re-coding of your website.

Works with JavaScript disabled too (graceful degradation)
Works in all modern, mobile and old browsers: Firefox, Chrome, Opera, Safari, Internet Explorer (including IE6), touch screens (iPhone, iPad, Android), etc.
Detects if link needs to be opened in a new page or the same one
1 line of code, easy to install (paste the code and add click class to the div)
Works with div, li, p, h1 or any other HTML element

This small plugin is being used in this website already. This is how my front page looks like:

The red area symbolizes the clickable area where the link would work for users visiting the website. The black square shows you the existing markup of each listed item.

By adding a simple click class to the list element, it inherits the click bind of the in it and everything becomes a link. The plugin will also detect if the link is set to open in a new window. Look at the clickable area after enabling the plugin:

You can see a working demo at the bottom of this page.

Usage

You could add this plugin as an external file but since it is so tiny, the best way of doing it is to embed it into an existing .js file.
1. Add this code inside the DOM ready function of your jQuery:

/* Clickable divs - Copyright Xavi Esteve 2011 Dual licensed under the MIT or GPL Version 2 licenses. http://xaviesteve.com/clickable-divs-jquery-plugin */
$('.click').css("cursor","pointer").click(function(){var link=$(this).find('a:first');var linkhref=link.attr('href');if(link.attr('target')){var newWindow=window.open(linkhref,link.attr('target'));newWindow.focus()}else{window.location=linkhref}return false});

2. Add the CSS class link to any element you want to inherit the click (a

for example).

Source code

Feel free to modify and improve the script by going to ClickableDivs at jsFiddle.

Creative Commons image Search Tool (autotags and resizes)

Xavi — Tue, 12 Apr 2011 13:52:36 +0000

Direct link to the tool: Flicksourcer

Jonathan Foucher created Flickholdr a few weeks ago and I am impressed by how good the system is. It is not like other dummy image generators where you get a grey box or images of cats, it allows you to source random Creative Commons images from Flickr or even keyword relevant ones, scale them to your desired size and add a Copyright tag with the authors name automatically.

Flickholdr is mainly designed to be used as a placeholder image tool although I had been using it a couple times to source images for live posts in a quick way, allowing me to save time browsing Flickr for free licensed images and scaling them in Fireworks/Photoshop. The minor problem I had with Flickholdr is that I had to keep changing the URL manually one by one and finding the perfect image was quite tedious.

So I came up with this little script that loads several images in one click. You specify the image size, some relevant keywords (optional) and the quantity of images to generate. Try to keep the quantity number as low as possible since Jonathan shares the service for free and if many requests are made it can turn the service slow for other users.

Find the generator tool here:

Flicksourcer http://xaviesteve.com/pro/flicksourcer/

You can also download the source code completely for free since it has been coded using JavaScript, jQuery and HTML. If you host it in your site remember to mention and link back to Jonathan and to myself (CC-by-sa 3.0).

Another related tool

Are you constantly creating mockups and wireframes? Check out Real Ipsum, a topic oriented English dummy text generator that generates random English text which looks better than Lorem ipsum. And the bookmarklet grabs keywords from the website you choose so the text is completely relevant. Also generates people and company names, random dates, colours, etc. Check it out!

SnippShot – Ultra-minimal simple Code Snippet tool

Xavi — Wed, 28 Jul 2010 09:19:40 +0000

SnippShot is a free online code snippet collector tool. The snippets are stored online and since it is web based, you can access them from any computer, platform and browser without the need to install any additional software. The interface is ultra-minimalistic which makes it really easy, simple and quick to use, you can even start using it without reading any instructions.

SnippShot video tutorial

How to use SnippShot

That’s simple! It is what you see in the image: a big textarea on the right, a list on the left and a text box at the top left.

Creating a code snippet

Type in at the top left box and press Enter.

Editing/Saving a snippet

Edit the code and it will be saved real-time. No need to press any buttons, close the window and it will be saved for the next time (when you edit the code this will turn red, wait 1 second until it turns black again).

Loading a snippet

Just click on it, the code will load on the right panel.

Searching for a snippet

Type in at the top left box to search automatically as you type .

Renaming a snippet

Double click the name in the list and a window will let you change it.

Deleting a snippet

Double click the name in the list and rename it to nothing. Confirm.

SnippShot Bookmarklet

What makes SnippShot really handy is the use of its bookmarklet. At the right top of the app there is a link called “snippshot”. Drag and drop it to your bookmarks folder to create a Bookmarklet. Then click on it whenever you want and SnippShot will appear in a window, you can resize it the size you want.

No account required

Oh, and what’s best of all is that you don’t even need to register, just to own a Google Account.

Some technical details

There’s just one server request per action
SnippShot loads really fast because it doesn’t use any images at all (it uses CSS3 for all the website styling and even an embedded Base 64 image in the style sheet for the favicon)
and it works really fast because everything is loaded dynamically through AJAX and JSON/XHTML calls, no apparent loading times when using it

The user interface is just what you see in the screen: no menus, no links. The user experience can be described as click and type.

Modern compliant browsers should see the beautiness of CSS3. As HTML5 support increases SnippShot will progressively upgrade to it.

To avoid server overload and keep the service quick they are limiting each snippet code to 64kb and a limit of 100 per user (more than enough, I am currently using 78 and can’t think of anything else to note down). They accept donations to eventually upgrade the server and increase the limits and add new functionalities.

Check SnippShot now

The website is snippshot.com and it is completely free. Check it out and let us know what you think.

snippshot.com

jQuery-JavaScript: Basic Cheat Sheet for Beginners

Xavi — Sun, 20 Dec 2009 08:51:34 +0000

Content

Check if element exists

if ($('#infobox').length) { /*exists, do things here*/ }

Change attribute

$('#name').attr('title', 'Hello!');

Change content of a container

$('#main').html('Lorem ipsum
');

Change page title

document.title = 'Hello!';

Add content before/after

$('table>tbody>tr:last').after('This is now the last row.');

Style

Add or remove classes

$('#main').addClass('red');
$('#main').removeClass('blue');

Check if element has class

if ($('#main').hasClass('green')) { }

Ajax

GET with parameters

$.get("page.php", { action: "edit", id: 38 },
  function(data){
   $('#infobox').html(data);
});

Loops

Do something with every matching element

$('table>tbody>tr').each(
  function (intIndex) {
    /* Modify all table rows */
});

Maths

Check if even or odd

if ($id % 2) { /*even*/ }else{ /*odd*/ }

Force string to integer

parseInt(var);

Filter words, numbers or symbols

$(this).attr('id').replace(/[^0-9]+/, '');

Timer

setInterval(timer1s, 1000);
function timer1s() { /*run this every second*/ }