September 2011

jQuery SlideShow - Short and Sweet

$(function(){
    $('#slides img:gt(0)').hide();
    setInterval(function(){
        $('#slides :first-child').fadeOut().next('img').fadeIn(1000).end().appendTo('#slides');
    },6000);
});

CSS Drop Shadow on Bottom Side Only

Whatever the value of the third value (the blur), set the fourth value (the spread) to the negative of it and voila! You have a bottom side only drop shadow with css.

-moz-box-shadow: 0 6px 4px -4px gray;
 
-webkit-box-shadow: 0 6px 4px -4px gray;
 
box-shadow: 0 6px 4px -4px gray;

See what I mean . . .

Load Custom Font with CSS - TTF and OTF Font Files

@font-face {  
  font-family: eurostile ;  
  src: url(fonts/Eurostile-ExtendedTwo.otf) format("truetype");  
}  
 
/* Then use it like you would any other font */  
.eurostile { font-family: eurostile , verdana, helvetica, sans-serif;  
}  
 

Get the Base URL Javascript Function

function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));
 
 
    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);
 
        return baseLocalUrl

Cross Browser Rounded Corners - CSS

.rounded-corners {
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}