Posts

Showing posts from September 8, 2014

BOXED WIDTH ANIMATION

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> body { background:#000; overflow:hidden; margin:0; padding:0; } .container { width:1000px; height:500px; margin:5% auto 0; padding:20px; background:#CCC; } .left-panel { background:#319400; width:780px; height:500px; float:left; margin:0 20px 0 0; padding:0; text-align:center; position:relative; transition-property: background; transition-duration: 1s; transition-timing-function: linear; } .left-panel:hover { background: #ff7b29; } .right-panel-visible { background:#0065e2; width:200px; height:500px; float:left; margin:0; padding:0; } .right-panel-hidden { background:#00a27a; width:475px; height:500px; float:left; margin:0; padd...
1 comment
Read more

Custom Tool Tip

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> .bubbleInfo { float:left; width:100%; height:50px; position:relative; } .red { background:#FF0000 !important; } .trigger { position: absolute; } /* Bubble pop-up */ .popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; background:#0000FF; width:250px; height:200px; left:350px !important; top:0px !important; } .main-div { width:350px; height:800px; margin:0 auto; position:relative; background:#333333; } </style> Step 1: Insert the following JS code in the <HEAD> section of your page <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $('.bubbleInfo').each(function () { ...
Post a Comment
Read more