Tag Archives: jquery

mouseclick outside a DOM element

javascript, micro tutorial, , , ,

What if you have to close on outside mouse click?

This situation is kind to be familiar. There is some panel which should be closed on outside click. Yeah, this is the most common usage of the outside click. And to do that is pretty simple.

In this tutorial … jQuery

For those of you not used to use jQuery, in short this is a JavaScript library, which gives you the power to manipulate the DOM with ease. One of the very good parts of jQuery is really the ability to help you with less code to do the hard work of searching and changing the DOM. If you don’t have any experience with this library, well you can use any other if you’d like.

First step: combine the events

One of the events should be click over the panel, and the other click over the document. Continue reading mouseclick outside a DOM element →

Remove DOM Element with JQuery

javascript, micro tutorial, web development, , ,

JQuery and DOM

JQuery is one of the most famous JavaScript library online. There are so much articles in the web about it, that I feel useless to describe it again. The good parts of that library is the amazing way it handles the DOM. It is so good at that that I usually use it with other JavaScript libraries.

Now I’m working on a task and one of the main target of the completed task was the RAM usage of the code. It just has about 100 dynamic DOM elements which on every event should be removed form the tree and the RAM should be freed. Continue reading Remove DOM Element with JQuery →

load flash .swf in hidden div

featured, javascript, micro tutorial, web development, , , , , ,

Well let’s assume you’ve a <div> and like to load a .swf flash file into it. We suppose you’re using swfobject or any other library or even if you don’t use library that should be a simple thing to do.

But what happens if the <div> has the style property “display:none”. Than unfortunately the flash file does not load. You get the file from the server, but when you set the <div> to be “display:block”-ed the flash starts the play from the very beggining.

Actually that’s supposed to be default action. In fact the workaround is like so. You put the <div>, not to be hidden with that “display:none”, but to be with 0px width and height. something like that:

<div style=”width:0px;height:0px;overflow:hidden;”></div>

The overflow is important – cause you’d like to load the swf file into the <div> and if the swfobject.crateSWF or embedSWF is with 100% width and height, the flash will result with zero height and zero width.

So you may put the flash to load in something like that:

<div style=”width:800px;height:600px;”></div>

and put that one into the div with overflow hidden. Than the outer <div> will be ivisible but present to the page and the inner one will be with fixed width and height.

Now when the flash loads, or if the user clicks on some part of the page or fires some event, you can simply reset the width and height of the outer <div>. The resulting piece of code will look like:

<div style=”width:800px;height:600px;overflow:hidden;”>

<div style=”width:800px;height:600px;”> the flash goes here with 100% width and height </div>

</div>

With jQuery that should look as follows:

$(document).ready(function() {

$(‘#outer-div’).css({ width: ‘800px’, height : ‘600px’ });

});

Now you can load the flash in background, even you can start loading it after everything else is loaded – i.e. on document ready event of jQuery, so if you have havy computations in that flash you can simple show something else to the user till the flash loads.

jQuery – accessing a child element

featured, javascript, micro tutorial, web development, , , ,

Let’s assume you have a <div> element with 20 <a> tags inside, and each <a> tag has a <span> somewhere inside it. If you’d like to access all those spans you should use this jQuery line:

$('div a').children(':first-child')

Common mistake is to query like that:

$('div a:first-child')

but that is completely other thing, and will return the first <a> tag, not the <span> inside all of them.

JQuery UI

featured, javascript, web development, , , ,

There is a very good library of UI functionality coming with JQuery, the famous JavaScript library. The UI reference can be found here.

Giving an extream power to use the user interface on it’s limits, with functionalities as drag and drop, resize, select, sort, etc.

This subset of the JQuery library can be used with very small code includes, and that makes the ease of use even more. Actually I think that library is really more easy to use than any other as SPRY, YUI, etc.

I recommend it!