Creating differenet shapes in CSS 3

Square :

#square {
    width: 100px;
    height: 100px;
    background: orange;
}

Rectangle :

#rectangle { 
    width: 200px; 
    height: 100px; 
    background: orange; 
}

Circle :

#circle { 
    width: 100px; 
    height: 100px; 
    background: orange; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
}

Oval :

#oval { 
    width: 200px;
    height: 100px;
    background: orange;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px; 
}

Read more →

CSS3 : Box Shadow

CSS3 now provides us with the box-shadow property, which can be used to create multiple shadows on any block level element programmatically. This saves a lot of time spent in image editing software and removes those nasty nested divs, but it isn't supported by Internet Explorer, so what is best for us to do?

Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Used in casting shadows off block-level elements

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

1. h-shadow : The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2. v-shadow :The vertical offset of the shadow, For above the box use  negative and for below use positive.
3. blur :The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4. spread :The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
5. color :  (optional) The color of the shadow.
6. inset : (optional) Changes the shadow from an outer shadow (outset) to an inner shadow

Example :1

div#myDIV
{
background-color:orange;
width:200px;
height:100px;
box-shadow:10px 10px black;
}

Example :2

div#myDIV
{
background-color:orange;
width:200px;
height:100px;
box-shadow:20px 20px 10px black;
}

---

This all the CSS for various web browser collected in one rule:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Read more →

Javascript slideshows, carousels and sliders

Javascript slideshows, carousels and sliders

1. SpaceGallery
2. Noobslide (Based on Mootools )
3. SmoothGallery 
4. jQuery Multimedia Portfolio
5. jCarousel 
6. Glider 
7. Carousel Slideshow
8. Multidirections Image Scroller
9. Pikachoose
10. SlinkySlider
11. Easy Slider
12. CrossSlide (Based on jQuery)
13. Ultimate JavaScript Slider and Scroller
14. SlidesJS (Based on jQuery)

Read more →

Javascript tab plugin list

Javascript tab plugin list

1. SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)
2. Perspective Tabs (Mootools)
3. MooTabs (MooTools)
4. idTabs (jQuery)
5. DOMTab – Navigation tabs with CSS and DOMscripting
6. jQuery UI Tabs
7. jQuery Accessible Tabs Plugin
8. Tabify (jQuery)
9. Nanotabs
10. jQuery Pager 
11. jQueryGlobe
12.  mb.tabset (jQuery)

     

     

     

     

     

     

     

     

     

     

Read more →

Sliding div left side

Sliding div left side with jquery animate method.Following are the step to do that

JAVASCRIPT CODE

$(document).ready(function() {
     $('button').click(function() {
       $("#slidingDiv").animate({width: 'toggle'});
     });
});

CSS CODE 

#slidingDiv{
     width: 200px;
     height: 50px;
     background-color: red;
} 

HTML CODE

<body>
   <button>CLICK ME</button>
   <br />
   <div id="slidingDiv"></div>
</body>

Read more →

Using multiple version of jQuery on same page

During working on project you might have encounter this problem of jquery.
There is problem coming when you are using jquery1.6 in project and you have to use jquery plugin which require jquery1.4 and it is incompatible with 1.6. So what you do remove that plugin or change your jquery  version.There is also another solution which is define below.You can use jQuery of different version easily with this following step.

<script type="text/javascript" src="jquery1.4.2.js">
</script>  
<script type="text/javascript">  
   var jq_4 = jQuery.noConflict();  
</script>  
<script type="text/javascript" src="jquery1.6.js">
</script>  
<script type="text/javascript">  
   var jq_6 = jQuery.noConflict();  
</script>  
<script type="text/javascript" src="jquery1.7.js">
</script>  
<script type="text/javascript">  
   var jq_7 = jQuery.noConflict();  
</script>  
<script type="text/javascript">  
   // You can use different instance of jquery library.   
   jq_4(document).ready(function () {  
     // so now you can use jquery jq variable instead of $ .   
     jq_4("div").hide();  
   });  
   jq_7(document).ready(function () {  
     // so now you can use jquery jq variable instead of $ .   
     jq_7("div").hide();  
   });  
</script>  

Read more →