Skip to main content

Posts

Showing posts with the label CSS

Tooltip Component Using Java Script & CSS

A simple, small Java Script Component, which you can use to have custom Tooltips on your web page. Well why wait, let get right on to it. First lets see the styles used by the Tooltip popup box. .toolTipDef, .toolTip {             position: absolute;             background-color: #ccc;             border: 1px solid #000;             padding: 3px;         } .toolTipDef { display: none; } .toolTip { display: block; } All together we’ve to CSS classes, one ‘toolTipDef’ and ‘toolTip’. ‘toolTipDef’ is used when the tooltip need to be hidden, and when user mouse over the text, we’ll use ‘toolTip’ class to make the tooltip popup visible. These styles set standard attributes like background color for the tooltip popup, its border and t...

Simple Accordion using Java Script and CSS

Well you can find many online, but it's difficult to find one with out any dependent API. Most of the available accordions use other APIs for animation and other stuff. For those who just want accordion with out any other stuff, this one is the perfect one. It's very simple and you don't have to be a geek to understand it. Basic knowledge of Java script and CSS will do to understand how this works. In this article I'll take you through the steps of developing an accordion. Couple of minutes you are ready to write your own. Well then let's start developing one. Layout of the HTML block looks something like the one below Lets look at the CSS first which is very simple. /** container styles **/ .ra-p, .ra-cp { padding: 0 0 0.1em; } /**** heading styles ****/ .ra-p h2, .ra-cp h2 { margin: 0px; padding: 0.2em; cursor: pointer; color: #fff; background-color: #3d80b0; } /**** collapsed heading styles ****/ .ra-cp h...