Posts Tagged jQuery
Preload iFrame using JavaScript
Posted by admin in JavaScript Library on November 13, 2009
To preload iFrame in JavaScript is possible. Sometimes it takes a while for a iFrame page to be loaded, this causes ‘a moment of blankness’ which is not what we want the user to see. To fix this bad user experience, we could make a preloader to preload the iFrame, only when the iFrame is loaded, then we display the content.
To do so, we could use the existing JavaScript library – jQuery. The script below is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<iframe src ="http://www.yahoo.com" width="100%" height="300"></iframe>
<img src="http://www.ezeego1.co.in/hotels/india/athirapally/page/webroot/images/preloader.gif" id="preload-img" />
<script>
$('iframe').css('display', 'none');
$('iframe').load(function()
{
$('iframe').css('display', 'block');
$('#preload-img').css('display', 'none');
});
</script>
</body>
</html>
jQuery disable an element
Posted by admin in JavaScript Library on November 7, 2009
If you use jQuery, you can disable an HTML element by setting the ‘disabled’ attribute to ‘disabled’ (to disable it). The result of which looks something like this:
// Disable #x
$("#x").attr("disabled","disabled");
Here is a demo you can copy and paste into a HTML file and try it out yourself:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="x" style="width:200px;">
<option>one</option>
<option>two</option>
</select>
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
</body>
</html>
Compress jQuery
Posted by admin in JavaScript Library on November 3, 2009
You may have written a jQuery plugin, and want to make a minimum version.
Generally the best way to do it is to use the YUI compressor. YUI stands for Yahoo! User Interface, YUI compressor is released by Yahoo! for free. So anyone can use it for commercial or non-commercial usage.
An alternative is to use Douglas Crockford’s JSMin. This doesn’t compress JavaScript code as small, but generally how you write your code matters less. Douglas Crockford is the web architect at Yahoo! Sunnyvale, a very experienced programmer that created the JSON language. Before YUI compressor came out, I used JSMin for JavaScript compression.
Packing javascript using Dean Edwards’ Packer (specifically using the base64 encode) is not recommended, I don’t wannna provide the link to it here, as the client-side decoding has significant overhead that outweighs the file-size benefits.
If compressing your JavaScript breaks it, try running the code through JSLint. This will detect minor errors that can cause packed JavaScript to fail where the unpacked version works fine.
jQuery get value of selected option
Posted by admin in JavaScript on November 1, 2009
To access the value of the selected option from the the select dropdown list is easy, in jQuery, you can use the val() function to get the value, here is an example of how to use it:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">haseeb</option>
</select>
$("select#myselect").change( function() {
alert($("select#myselect").val());
});
jQuery Check If an Element Exists
Posted by admin in JavaScript Library on November 1, 2009
Without any JavaScript library, if you want to check whether an element exists, in our case, an element with the id myDiv, here is what you do:
<script>
if (document.getElementById('myDiv')) {
alert('myDiv exists');
}
</script>
In jQuery, here is what you can do:
<script>
if ($('#myDiv').length) {
alert('myDiv exists');
}
</script>
JavaScript Prevent mouseout Event Bubble
Posted by admin in JavaScript Library on October 30, 2009
When you assign an HTML element a mouseout event using JavaScript, and there are child element inside, once you move mouseover the inner child element, the parent mouseout event will trigger. To prevent this from happening, you could use jQuery’s mouseleave event handler. This is very very handy.
Here is a example you can save as a HTML and test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var i = 0;
$("div.overout").mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
});
</script>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
</body>
</html>
Get jQuery selector array indexed item
Posted by admin in JavaScript Library on June 28, 2009
In jQuery, to get a single indexed element from an selector array, you need to use the jQuery syntax.
Below is an example of using eq to set CSS for a particular paragragh:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("color", "red")
});
</script>
</head>
<body>
<p>This is just a test.</p><p>So is this</p>
</body>
</html>
jQuery Find Next Element nextSibling
Posted by admin in JavaScript Library on May 16, 2009
In jQuery, to find the next sibling of in reference of an element is easy. Instead of using the default JavaScript function nextSibling, you should use the jQuery version of the function – next(). Below is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
$curr = $curr.next();
$("div").css("background", "");
$curr.css("background", "#f99");
});
});
</script>
<style>
div { width:40px; height:40px; margin:10px;
float:left; border:2px blue solid;
padding:2px; }
span { font-size:14px; }
p { clear:left; margin:10px; }
</style>
</head>
<body>
<div id="start"></div>
<div></div>
<div><span>has child</span></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p><button>Go to Next</button></p>
</body>
</html>
jQuery appendChild equivalent
Posted by admin in JavaScript Library on May 14, 2009
In jQuery, the use of JavaScript is simplified. jQuery has its own appendChild equivalent which is used to append content to the inside of matched element.
If you use jQuery to select an element, and to append content, the syntax is like below:
$("p").append("<strong>Arctic Monkeys</strong>");
As you can see, this is very easy to use and comes in relly handy when perfoming content population task using JavaScript.
Hope this helps!
jQuery Get Form Value
Posted by admin in JavaScript, JavaScript Library on May 13, 2009
In jQuery, if you use the library’s selector to select a form element, and get value of the element, you can’t use JavaAcript’s default .value to retrieve the value. To get the form value, you need to use val( ). For instance ,if you have a form input field with the id=”username”. To get the value of the field, you need a function like the one below:
var usernameValue = $("#username").val();
Translator
By N2H
