Archive for July 2009
Show/Hide Div Block with checkbox
Posted on: July 16, 2009
- In: JavaScript | Tutorials
- 2 Comments
Here is another tutorial for JavaScript. How to show/hide your div block with check box.
Its very easy and simple to understand. Just copy the below code and try.
JavaScript :
<script type=”text/javascript”>
function showMe (ids, box) {
var vis = (box.checked) ? “block” : “none”;
document.getElementById(ids).style.display = vis;
}
</script>
Here the above JavaScript code will check whether the checkbox is checked or not. If it is checked then it will return true and the block of code will be displayed. Else the block of code will be hidden(display:none)
Down below is the HTML code which will show you how to call the JavaScript function.
HTML Code :
<input type=”checkbox” name=”vendors” onclick=”showMe(‘viewVendors’, this)” /> View Vendors
<div style=”display:none;” id=”viewVendors”>
Block of code goes here
</div>
Try this code and get me your feedbacks, if any errorsor if it is not working let me know.
CSS sprites group multiple images into one composite image and display them using CSS background positioning. By this you can save significant amount of HTTP requests by combining it into one or more sprites and using them by CSS.
Before knowing more about Sprites you need to know why to use CSS Sprites. Now you know that what Sprites are all about(grouping of multiple images), you might be thinking why to combine all those images? isin’t it quicker to use smaller images. I say no, by using smaller images you might be thinking that I am loading the site by a loading faster by loading bits. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of these images use a seperate HTTP request, and more number of these require more time and less efficient is your page.
So lets see now how this is achieved.To achieve this you need to do the following,
1. First and the foremost thing is to group all your images(usually icons and decorative images) into a sprite.
2. Then align these images into one or more lines.
3. Then use this image as a background image of some element and position it to X and Y pixels accordingly.
By doing this you get an increased speed and reduced HTTP requests.
This is the simple technique and easy method to improve your web performance.
Mywebdunia's Blog 