Tag Archives: jquery

Toggle the visibility with jQuery

javascript, micro tutorial, web development, , ,

When it comes to quick JavaScriopt effects one of the most common is to hide and show different elements in the DOM. That occurs in almost every site. If there’s a dynamic menu, there’s for sure attached mouse event that shows/hides some sub menus and so on.

Of course you can achieve this in both jQuery and pure JavaScript approaches. If you use JS it’s something like that;

document.getElementById('element_id').style.display = 'block';
document.getElementById('element_id').style.display = 'none';

where the first row shows how to show an element, and the second one how to hide it in turn. Continue reading Toggle the visibility with jQuery →

Writing a jQuery plugin – (part 1). Good practices!

javascript, micro tutorial, , , ,

JavaScript flexibility

In JS you have the natural flexibility to extend an object you have previously declared. Even more you can extend any native objects! That makes the writing of a jQuery, or whatever javascript library, plugins to be very easy.

As you may know in JS you can have object declared like that:

var obj = { a : 1, b : 2 };

That is an object with two properties a and b which values are respectively 1 and 2. If you’d like to extend this object later you can just write:

obj.c = 3

and now the object looks like that:

{ a : 1, b : 2, c : 3 }

That’s perfect when you’d like to write plugins to jQuery. Continue reading Writing a jQuery plugin – (part 1). Good practices! →

jQuery CSS functions. Part 1 – offset()

css, javascript, micro tutorial, , ,

What are jQuery CSS functions?

Well these are function which help you modify different CSS properties with JavaScript. You know you can do that in “pure” evangelistic JS, but normally every library comes with its own bunch of functions that do the job. In fact in jQuery the things are little bit more complicated because the returned value of those CSS modifiers is yet again a object of the element you modify, which is the same object as this you’ve selected with one of the selectors in jQuery.

This is extremely useful when it comes to chains and you chain several functions using the dot operator. Thus you call more and more functions for every selector and perform a modifier every time you call them.

Continue reading jQuery CSS functions. Part 1 – offset() →

jQuery CSS selectors. Change one or more CSS properties!

css, javascript, micro tutorial, , , ,

Browser reflows and performance issues

What is a browser reflow? Well actually when you change some property in CSS like change of a color, width, height, font-size, etc. normally the browser redraws the layout just to fit the new requirements after the reflow.

The problem is not in the first render of the page. Than the CSS is just parsed and everything is positioned as the browser reads the CSS. The problem is when you change some CSS property using JavaScript, and in our case using jQuery.

In fact nowadays is very popular to make every kind of animation using JavaScript and most of the “big” libraries, such as jQuery, give you a built in set of functions just to make this task easier for you. Continue reading jQuery CSS selectors. Change one or more CSS properties! →