CSE-Kids

In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed. View LIVE DEMO Now let’s look at the html code, <div class="msg_list"> <p class="msg_head">Header-1 </p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-2</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-3</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> </di

The  CSS3 box-shadow property  is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary  -moz-  and  -webkit-  prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely  essential but where it provides a nice style enhancement (enrichment) for modern browsers. Box-shadow basics First, a quick introduction and explanation. The box-shadow property takes several attributes/values, like any other  CSS  property, and these are are specified in order as follows: Horizontal offset of the shadow: a positive value for shadows on the ri

URL:  http://www.adamcoulombe.info/lab/jquery/select-box/ NOTE: THIS HAS BEEN MOVED TO GITHUB: If you have any ideas or improvements for this script feel free to fork or contribute or discuss over there: https://github.com/adamcoulombe/jquery.customSelect Plugin Download: http://www.adamcoulombe.info/lab/jquery/select-box/customSelect.jquery.js. ...............Demo: http://www.adamcoulombe.info/lab/jquery/select-box/ ...............This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable SPAN element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. Highlighted Text Expand

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques. 1. Custom Styled Radio Buttons and Checkboxes It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them: Custom Designed Checkbox and Radio Buttons Radio Button and Checkbox replacement. 2. Setting Equal Heights with jQuery Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the  equalHeights plugin . With this plugin, you can make e

This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to the clipboard all text quickly or quickly delete the text from the field. For example: to copy a piece of code or to delete a username and password on login web page. Sample Textarea: Input TextBox: Code The script is really very simple. Text field must have unique identifier, this indentifier will be passed to the SelectAll() function. The function call only two methods: focus() and select(). < script type= "text/javascript" > function SelectAll(id) { document.getElementById(id).focus(); document.getElementById(id).select(); } </ script > Textarea: < br > < textarea rows= "3" id= "txtarea" onClick= "SelectAll('txtarea');" style= "width:200px" > This text you can select all by clicking here </ textarea > In

To open a new window by clicking on the link, you will need to use window.open method of javascript. Sample of popup window Click here for simple popup window < a href= "javascript: void(0)" onclick= "window.open('popup.html', 'windowname1', 'width=200, height=77'); return false;" > Click here for simple popup window </ a > Now you can open a simple window, also this function can have different features of that window to appear. Syntax window.open([URL], [Window Name], [Feature List], [Replace]); Feature List: Property Default value Description width auto specifies width of the new window in pixels height auto height of the window in pixels top auto specifies window position left auto specifies window position directories no should the directories bar be shown? (Links bar) location no specifies the presence of the location bar resizable no specifies whether the window can be resized. menubar no specifies

Rollover (Mouseover) is one of the most simplest and at the same time the most popular script on web-pages. Nevertheless in 90% of the cases this simple script is made incorrectly. The fact! We first need to understand how this script should work. At first sight it looks quite elementary: Whenever the user moves the mouse pointer over the button, the button changes own state (one picture is replaced with another). It should appear immediately but often it does not show. Why? The fact is that the second(active) picture downloads only WHEN user moves the mouse pointer over the button. Even if the user have hi-speed Internet connection - it will take away some time for that. The more the size of the picture - the more delay. Sample of incorrect rollover button When you move the mouse pointer over the button for the first time you may see a small lag: Preload image You need to use this script for load images as soon as possible. Insert this code between your <head></head> tags