Welcome to the next article of the jQuery mini tips series. Today we will play around selected aspects of working with the form elements.

1. Prevent to select more than one item in select multiple input

Once I created a project, where I had to show UI in a little bit old-school way (similar to older desktop apps). Some of inputs had to be displayed as select multiple lists, but selecting more than one option was forbidden.

Fortunately no need to code any handlers in JS. With jQuery it’s a trivial thing:

// allow only one item to select
$('#my-options').removeAttr('multiple');

In that way we disable the possibility of selecting more than one option, but our element still remains displayed as select multiple.

Its working now! We invite you to a new page with interesting resources.

We find there jQuery plugins, variety of useful JavaScript libraries, tutorials and more. We publish materials in our opinion worthy of attention, so both Web Developers and Web Designers can find in one place solutions for own projects. And maybe even new ideas.

Next to useful jQuery plugins, there appears other resources, about stuff like RWD and mobile web, HTML5 and more.

When we work with CSS, we often create or find interesting solutions for various tasks or problems encountered.

CSS Tips

1. Cross-browser CSS word break for too long text

For example, when we are creating front-end for the on-line chat, and there we have div-s for particular messages. The user writes very long text or URL address — any string of consecutive characters. Such a text won’t wrap and come out in a straight line outside our area (div).

We can process strings in our programming language, but we can make a painless deal with CSS. Our div needs to get CSS styles, which will take care:

.word-break {
    word-break: break-all;
    word-wrap: break-word;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

This will ensure correct display of a long text in our element.

OK, it’s time for the next JS and jQuery mini tips. Today something about Fancybox plugin, check-boxes and parsing URLs in raw text.

JavaScript and jQuery tips

To the point.

1. Conditional form submit using JavaScript / jQuery

It’s about sending the form only if the user checked a check-box (e.g. accept the Terms of Service). Of course it’s simple validation in JS, without using language such as PHP.

There is our check-box:

<div class="error">Please accept the TOS!</div>

<input type="checkbox" name="terms" id="terms" value="1" />
<label style="display: inline;" for="terms">I agree … </label>

The next article about JS and jQ tips, but in fresh, concise form.

Quick JS and jQuery mini tips

1. Clickable background image on the website

It’s about the case, when we want to make a clickable background of the website, for example, as advert pointing the user to some url after click on website background.

Wrapping website content, or adding onclick handler for the background, or other solutions which would come to our head as first could be not enough.

Here we have simple and working solution. As first we set image for the background:

var img = "http://our-page.com/image.png";
var link = "http://target-website.com";

document.body.style.backgroundImage = "url('" + img + "')";

What is that? The Data URI scheme is simply a way to represent the information, but in such a way the data usually kept in files (e.g. images) are available in a form of text string!

Such a string has its own format, and allows developers to easily transfer the resource, e.g. between Web applications, or use it directly in JavaScript / CSS code.

Moreover, there’s no need to execute additional HTTP requests to fetch the files, as all the data can be fetched immediately, in one request.

The Data URI string has a following form:

data:[media type][;charset=xxx][;base64],data

Generating and using the Data URI

We talked about using Data URI in the one of older posts, concerning HTML5 Canvas. operations. Today we expand this topic.

Previously we have written about node.js and socket.io. Today we continue the topic by developing real example. We will create a simple, efficient commenting system between users. Data processing and refreshing the list of comments will be done in real-time, for all users having our web application opened.

Node.js and socket.io tutorial

Step by step, from scratch. The functionality of comments will be simplified, but easy to adjust to own needs (data, front end / back end code).

Here we focus on using node.js and socket.io. We assume using our simple system for commenting articles.

Step 1 — start

Create folder for our projects, open console and go to this folder. In command line install necessary node modules:

$ npm install socket.io

and

$ npm install mysql

Not necessary when we already have these modules installed globally.

Step 2 — MySQL database schema

Create a database (e.g. node_tests) and simple table (e.g. tbl_comments). Sample SQL code below.

CREATE TABLE IF NOT EXISTS `tbl_comments` (
  `comment_id` int(11) NOT NULL AUTO_INCREMENT,
  `article_id` int(11) DEFAULT '0',
  `sender` varchar(100) NOT NULL,
  `body` TEXT NOT NULL,
  `created_at` datetime DEFAULT NULL,
  PRIMARY KEY (`comment_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Node.js itself is great. Let’s add socket.io and have possibilities, which formerly we could only dream of.

Node.js and socket.io

After presenting basics of node.js and how to work with databases, it’s time to reach for even more interesting things.

One of them certainly is socket.io. Simply establish a connection between our site (front end) and the node script, running on the server:

var socket = io.connect('//localhost:1337');

But let’s start from scratch with node.js and socket.io, step by step.

As first we can customize our configuration by adding elements necessary to work with sockets. More about basic config file you can check in the previous article.

After introduction to node.js it’s time to go with more advanced and practical information. Today we play with communication between node.js and MySQL databases, and also we mention of MongoDB.

Node.js and MySQL

If we code using e.g. PHP, we should have LAMP installed in our system, so then we have also MySQL. Additionally we need only node.js and MySQL module:

$ npm install mysql

Configuration

For convenience, let’s create config.js configuration file:

var config = {};
config.db = {};

config.db.type = 'mysql';
config.db.charset = 'utf8';

config.db.username = 'user';
config.db.password = 'pass';
config.db.host = 'localhost';
config.db.dbname = 'node_tests'; // DB name

config.db.users_tbl = 'users'; // table name
// config.db.another_tbl = 'next_table'; // …

// export
module.exports = config;

We created a simple object that stores configuration. It’s important to “export” this object:

module.exports = config;

Now we can write our test script to make MySQL connection.

JavaScript’s popularity is obvious. And solutions such as node.js have a big influence on this. For a longer time, we can see and hear a lot about this technology.

We also use node from some time, and… we can do really cool things, so for sure it’s something worthy of attention. And finally I have some time to write about node.js.

JavaScript has a bright future, but also I think we can consider node.js as a mandatory skill.

node.js — introduction

Node.js is a platform that allows to run JavaScript code. It is built on V8 JS engine — the same is used e.g. in Google Chrome.

And so what? Well, this JavaScript code we can run outside the browser! And thanks to the API and node.js modules we have a lot possibilities, typical for server-side technologies, such as file I/O, database communication or socket.io.

Node provides us with a powerful set of tools!

To install extensions we use NPM:

https://www.npmjs.com/

Node.js is a programming environment designed to create highly scalable web applications, especially web servers written in JavaScript.

Node.js allows you to create applications using asynchronous event-driven I/O system. Obviously, this is an open source project.

OK, enough talking — let’s code!

How to use node.js

Working with node.js can start in the blink of an eye. We need node and npm tools — installed and available in command line.

For this, simply grab and install the version of node.js for our system:

http://nodejs.org/download/

Having node.js installed, you can run the test code.

The simplest example — run node in command line and write:

console.log("Hello node!");
// -> Hello node!

A better idea would be to save the code in the file, e.g. test1.js. Then we can call:

$node test1.js
// -> Hello node!

We can also run the script in debug mode:

$ node debug test.js

The console.log function is the main way to display messages for the user (developer).