Xavi Esteve » javascript

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.

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*/ }

Greasemonkey User Scripts Quick guide

Xavi — Sun, 26 Oct 2008 01:12:44 +0000

This is just a quick guide for coding user scripts for Greasemonkey. You should know that a knowledge in JavaScript makes everything much easier. Then you just need to learn Greasemonkey functions to start coding.

As a cheat sheet and reference, let’s see a little bit of basic JavaScript first:

JavaScript Reference

Creating Arrays

var people = new Array(
new Array("John","green","Doctor"),
new Array("Mike","red","Engineer")
);

people[1][0] will return Mike.

Sending line breaks

Use \n. It’s like in HTML.

Search for a string

Searches for a string (you can also use Regular Expressions). If it is found it will return 0 or more (which is the starting character number in the string). If it is not found: -1.

q = "this is foo time";
q.search("foo");

Will return 8.

To search without matching case, use RegEx and add the “i” flag:

q.search(/foo/i);

Substracting specific text from a string

q = "this is foo time";
q.substr(8,3);

Will return foo.

Quick notes

Get the URL: document.URL;
Redirect: document.location = “http://www.example.org”;

GreaseMonkey Reference

Let’s get into business now! :D

Coding is just like JavaScript. we can get information from the page as if the script code was inside it.

If we type var msg = document.getElementById(‘message’).innerHTML; we will get the content from the element with message ID into our variable. We can work with it, store it or whatever.

Permanent user script variables

A nice feature is that you can store special GreaseMonkey variables. Will be stored permanently until the script is uninstalled.

To create or change bank variable with a value of 1000 we do:

GM_setValue("bank", 1000);

To get bank variable:

GM_getValue("bank", -1);

In case bank is not defined, -1 will be returned.

Inserting HTML code

Once we finish our script thingies, we would like to insert the result into the page. First of all, we create an array with all the code:

var menuCode = new Array();

And fill it:

menuCode.push('My menu');
menuCode.push('Home');
menuCode.push('Forum
');

Once we get the desired code (note that you are filling a normal array, so that you can add as much JavaScript code as you want), we need to start using Greasemonkey’s functions:

var menu = document.createElement('div');
menu.id = 'cheatsheet';
menu.innerHTML = menuCode.join('\n');

Above, we have created a Div element named “menu”, supplied an ID and grabbed the menuCode array and joined it. Now that we have the menu Div created, it would be nice to empty the old array now.

menuCode.length = 0;

At last, we just need to insert the menu Div inside the page:

document.body.insertBefore(menu, document.body.lastChild);

Using insertBefore function, we grab the Div and insert it at the bottom.

Inserting Script and CSS Style tags

Similar to HTML but changing the way of insertion. Both CSS style and JavaScript code go inside the