Wednesday, November 14, 2012

WP "You should update your .htaccess now"

If other permalink setting is not working except the default, change the .htaccess file permission to editable.

Thursday, September 20, 2012

jQuery numbers only on textbox

For input[type="text"] number only! 
jQuery(".button").keydown(function(event) {
 if ( event.keyCode == 46 || event.keyCode == 8 || 
event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||            
  (event.keyCode == 65 && event.ctrlKey === true) ||          
  (event.keyCode >= 35 && event.keyCode <= 39)){              
    return;// let it happen, don't do anything
 }
 else {
  if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && 
(event.keyCode < 96 || event.keyCode > 105 )) {
   event.preventDefault(); 
  }   
 }
});

Friday, September 7, 2012

jQuery simple accordion

This is a tutorial on how to make a simple accordion.

jQuery

jQuery(".className ul").not(":first").hide();
jQuery(".className>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".className ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});

html
<ul class="className">
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
    <li>
        <a href="#">level 1</a>
        <ul>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>
            <li><a href="#">level 2</a></li>           
        </ul>
    </li>
</ul>

Hope it will help!!!
(i made this one)
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});
jQuery(".ver3 ul").not(":first").hide();
jQuery(".ver3>li>a").hover(function(){
    var hasUl=jQuery(this).next("ul").html();
    if(hasUl!=null){
         if(!jQuery(this).next("ul").is(":visible")){
            jQuery(".ver3 ul").slideUp("slow");
            jQuery(this).next("ul").slideDown("slow");
         }
    }
});

Wednesday, September 5, 2012

jQuery falling letters plugin

 Falling letter jQuery plugin.

plug in:
(function($){
    $.fn.fallLetters = function(options){  
        // the default options
        var defaults = {  
            minFont:14, // minimum font size to be displayed(in pixel)
            maxFont:20, // maximum font size to be displayed(in pixel)
            minSpeed:2000, // should be larger than the maxspeed, 1000 = 1 sec
            maxSpeed:1000, // the smaller the amount the faster it fall, 1000 = 1 sec
            fading:true // fading while falling effect
        }          
      
        // to override the defaults of each option
        var options = $.extend(defaults, options);
        return this.each(function(){
      
            // declaration of variables
            var cont=$(this);  
            var contWidth=($(this).width())-50;
            var contHeight=($(this).height())+150;
          
            // container's CSS
            cont.css({"position":"relative","overflow":"hidden"});
          
            // wrap the letters with span
            cont.children().andSelf().contents().each(function(){
                if (this.nodeType == 3) {
                    var $this = $(this);
                    $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
                }
            });      
          
            // onload random span left and font
            reset();  
            cont.find("span").each(function(){
                $(this).css({"left":randomLeft(),"fontSize":randomFont(),"position":"absolute"});
            });
          
            // loops every 2 mins
            setInterval(function(){
                cont.find("span").each(function(){
                    $(this).animate({"top":contHeight+"px","opacity":ifFallAndFade()},randomSpeed(),function(){
                        var Left=randomLeft();
                        $(this).css({"left":Left,"fontSize":randomFont()});
                        reset();
                    });
                });
            },100);
          
            // fading while falling
            function ifFallAndFade(){
                if(options.fading){
                    return 0;
                }
                else{
                    return 1;
                }
            }
          
            // randomize left css of each character
            function randomLeft() {
                var maxLeft= contWidth;
                var left= Math.floor(Math.random() * maxLeft + 1) + 'px';
                return left;
            }
          
            // randomize the time of each character
            function randomSpeed(){
                var speed=Math.floor(Math.random() * options.minSpeed + options.maxSpeed);
                return speed;
            }
          
            // randomized the font size of each character
            function randomFont() {
                var fontSize= Math.floor(Math.random() * options.maxFont + options.minFont) + 'px';
                return fontSize;
            }
          
            // reset or back to top, -100px so that it will be hidden
            function reset(){
                cont.find("span").css({"top":"-100px","opacity":"1"});
            }
        });  
    };
})(jQuery);

script:
<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#cont").fallLetters({
                minFont:10,
                maxFont:24,
                minSpeed:3000,
                maxSpeed:1500,
                fading:true
            });   
        });   
    </script>

html:
<div id="cont">ABCDEFGHIJKLMNopqrstuvwxyz1234567890</div>

Hope this will help!..
(i made this one)

simple jQuery rotator

This is a simple jQuery rotator for banners. 

jQuery:
<script type="text/javascript">   
    jQuery(function(){
        setInterval("rotate()",3000);
    });
    function rotate(){
        var a=jQuery("#con div.current");
        var b=a.next();
        if(b.length==0)
        b=jQuery("#con div:first");
        a.removeClass("current").addClass("prev");
        b.css({opacity:0.0}).addClass("current").animate({opacity:1.0},1000,
        function(){
            a.removeClass("prev");
            });
        setTimeout(function(){
        },1500);
    }
</script>

css:
<style type="text/css">
    #con img{min-width:500px;min-height:200px;width:100%;position:relative;}
    #con div{z-index:0;position:absolute;width:500px;height:200px;}
    #con div.prev{z-index:1;}
    #con div.current{z-index:2;}
</style>

html:
<div id="con">
        <div><img src="image1.jpg"></div>
        <div><img src="image2.jpg"></div>
        <div><img src="image3.jpg"></div>
        <div><img src="image4.jpg"></div>
        <div><img src="image5.jpg"></div>
    </div>

Thursday, August 9, 2012

IE6 min-height css hack

    selector {
       min-height:500px;
       height:auto !important;
       height:500px;
    }

Thursday, June 28, 2012

jQuery input file change layout

This jQuery plug in is used to modify the style of you input file layout.

html:
<div id="cont">
        <input type="file" class="fileUpload">  
</div>

jQuery:
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".fileUpload").fileUploadChange({
            image:'images/browseImg2.jpg'
        });
    });   
</script>

This is the jquery plug in.
(function($){
    $.fn.fileUploadChange = function(options){   
        // the default options
        var defaults = {   
            image:'images/browseImg.jpg'
        }           
        // to override the defaults of each option
        var options = $.extend(defaults, options);
        return this.each(function(){   
            // hides the input file
            var x=$(this);
            $(this).css({"position":"absolute","top":"-100px"});           
            // add the dummy input text and button image
            $(this).after("<input type='text' class='dummyInputText' readonly='readonly'><img class='dummyButton' src='"+options.image+"'>");
           
            // triggers the input file when the dummies are clicked
            $(".dummyInputText, .dummyButton").live("click",function(){
                $(".fileUpload").trigger("click");   
                $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());                
                if($.browser.msie || $.browser.chrome){
                    getIEvalue();
                }
                else{
                    getValue();
                }
            });
           
            // this function gets the value of input file and displays in the dummy
            function getValue(){
                setInterval(function(){
                    var value=$(".fileUpload").val();       
                    $(".dummyInputText").val(value);
                },100);
            }
           
            // this function gets the value of input file and displays in the dummy IE or CHROME
            function getIEvalue(){
                setInterval(function(){
                    var value=$(".fileUpload").val();
                    value=value.replace(/[/\\*]/g, "/");
                    var xvalue=value.split("/");
                    var l=xvalue.length;
                    var ievalue=xvalue[l-1];
                    $(".dummyInputText").val(ievalue);
                },100);
            }
        });   
    };
})(jQuery);

Hope this will help!..