input type text place holder

This is how to put a placeholder on input type text using simple javascript.

<input type="text" name="FullName" id="Fullname" value="Name" onblur="if(this.value == ''){this.value = 'Name'}" onfocus="if(this.value == 'Name'){this.value = ''}" onclick="this.value==''">

no domain in a string url

This is how to display a string url without its domain name.


var thisUrl="http://domain.com/directory/subdirectory/file.name"
var noDomainUrl = thisUrl.replace(/https?:\/\/[^\/]+/i, "");

alert(noDomainUrl);

jQuery back to top script

This is an example how to make a back to top button using html and jQuery.

html
<h2 class="backToTop">back-to-top</h2>
<h2 class="backToTopFix">back-to-top</h2>

css
.backToTopFix{
       position:fixed;
       top:5px;
      display:none;
}

jQuery
       // get the distance from .stop to top
        var checkIfTop = jQuery(".stop").offset().top;

checkIfTop

        jQuery(window).scroll(function() {
      // if window top is greater than or equal to checkIfTop condition
            if(jQuery(window).scrollTop()>=checkIfTop){
                jQuery(".backToTop").hide();
                jQuery(".backToTopFix").show();
            }
            else{
                jQuery(".backToTop").show();
                jQuery(".backToTopFix").hide();
            }
        });

WP "You should update your .htaccess now"

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

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(); 
  }   
 }
});

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");
         }
    }
});

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>

IE6 min-height css hack

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

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!..

customizing google translate in your website

This is my way of customizing the google translate in a website. 

<style type="text/css">
/* to hide the toolbar and tooltip - START */ 
.goog-tooltip {
display: none !important;
}
.goog-tooltip:hover {
display: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.goog-te-banner-frame{
display:none !important;
}
body{
top:0 !important;
}
.skiptranslate{
height:30px;
overflow:hidden;
}
/* to hide the toolbar and tooltip - END */ 
</style>

<!-- script for the google translate  -->

<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
             pageLanguage: 'en',    gaTrack: true
      }, 'google_translate_element');
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- display the drop down of all languaes -->

<div id="google_translate_element"></div>

jQuery wrap each char in except tags

This is how to wrap characters with html tag excluding the present html tags.

$("div").children().andSelf().contents().each(function(){

    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));

    }
});

jQuery Validate Email Address

This is how to validate an email address.

html:
<form method="post">
<input type="text" id="email"/>
<input type="submit" val="submit" id="submit">
</form>

jQuery:
<script type="text/javascript">
jQuery('#submit').click(function() {
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal=jQuery('#email').val();
if(!emailReg.test(emailaddressVal)||emailaddressVal=='') {  
    alert('invalid');
    return false;
}
else{
    alert('valid');
    return false;
    }
});
</script>
Hope this will help!..

disable contact number detection on ipad

Add this meta tag to disable the website's contact number detection in ipad.


<meta name = "format-detection" content = "telephone=no" />

Hope this will help!.

business catalyst blog post list with image

This is a code on how to get the image of your blog post description put it in the bloglist.

jQuery(".blog-post").each(function(){
 var thisUrl=window.location.href;
 var splitThisUrl=thisUrl.split(".com/");
 var uri=jQuery(this).find(".post-body a").attr("href");
 var imgUrl=splitThisUrl[0]+".com"+uri;
 jQuery(this).find(".imgCont").load(imgUrl+" .post-body img:eq(0)");
});


How to use:
In the Blog Post List Layout put a div that will serve as the container of the image. In this example I named it .imgCont.

ie css hack

In hacking ie css please use the following

/*------ IE6 ------ */
*html /*class or id*/{
  padding-left:10px;
}
/*------ IE7 ------ */ 
*+html /*class or id*/{
  padding-left:10px;
}
/*------ IE8 ------ */
/*class or id*/{
  padding-left:10px \0/;
}
/*------ IE9 ------ */ 
:root /*class or id*/{
margin-left:-20px;
}

google plus one and add to circles button

 This is for adding a +1 button and counter in your blog post or page.
<!-- +1 button with counter -->
<g:plusone width="500" count="true" annotation="bubble"></g:plusone>

<!-- add to circle -->

For adding add to circle button just put this code.
<g:plus href="https://plus.google.com/{profile id}" rel="author" width="170" height="69" theme="dark"></g:plus>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

How to use:
Finding you profile ID:
https://plus.google.com/11443741220123456789/
Your profile ID are the numbers in your url if you will click profile.

Hope this will help!!

jQuery shuffle plugin for banner rotator

This is a useful plug in in which allows you to shuffle the banner images if you wat to show it randomly.

(function($){
    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
        return $(shuffled);
    };
})(jQuery);

How to use:

<script>  
 $(document).ready(function() {

    /*put this on top or before your rotator*/
    $('.slideshow img').shuffle(); 
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>

jQuery checkbox act like a radio button

This is a simple code to make your checkbox act like a radio button. Try this simple code and find out.
jQuery('.chck').click(function(){
    jQuery('.chck:checked').not(this).removeAttr('checked');
});

How to Use:
html
<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>

jQuery
$('input.unique').click(function() {
    $('input.unique:checked').not(this).removeAttr('checked');
});

jQuery bold specific number of word

function boldWord(name,num){
var x=jQuery(name).text();
var splitx=x.split(" ");
var new1="";
var old="";
for(var y=0; y<num;y++){
    old+=splitx[y]+" ";
    new1+="<b>"+splitx[y]+"</b> ";
}
var finalCont=jQuery(name).html().replace(old,new1);
jQuery(name).html(finalCont);
}

boldWord("class or id",3)

jQuery limit word plugin

This is a jquery plug in that limits the number words to display depending on how many words you want to display.

(function($){
    $.fn.limitWord= function(options){
        var defaults={
        /* by default */
            words:5
        }
        var options=$.extend(defaults,options);
        return this.each(function(){
            var paragraph=$(this).text();
            var splitSpace = paragraph.split(" ");
            var holder = options.words;
            var newTexts='';
            for(var i=0;i<holder;i++){
                newTexts += splitSpace[i]+' ';
            }
            $(this).html(newTexts); 
        });
    }
})(jQuery);

How to use:
jQuery("class or id here").limitWord({
words:5 /* please specify the number of words to be displayed */
});

business catalyst generic secure zone redirect

Generic secure zone in BC doesn't support redirect to other pages.  So here's a solution for your problem.
How to use this function:

/*

Put this after

//<![CDATA[ 

//]]>

*/

function genericRedirect(url){
    var pathName= window.location.pathname;
    var splitThis = pathName.split("?");
    if(splitThis [0]=="/Default.aspx"){
        window.location=(url);
    }
}

/*

Then call or use the function with your landing page's url or link.

*/

genericRedirect("/your url here!!");

Hope this will help.

jQuery display url and redirect functions

My own redirect function and get or display site's url. This is to simplify your code by using functions.
function redirectURL(url){
    window.location.href=url;
}

How to use:
jQuery(document).ready(function(){
if(condition){
      redirectURL("http://www.google.com");
}
else{
      redirectURL("http://www.yahoo.com");
});


function getURL(){
    return window.location.href;
}

How to use:

jQuery(document).ready(function(){
  var siteURL=getURL();
  alert(siteURL);
});

how to make jQuery plug in with options

 This is sample on how to make a jquery plugin with option. This is a multi step plugin and it is very useful in forms. Hope this will help!..



    (function($){
        $.fn.rPrevNext = function(options){
   
            // the default options
            var defaults = {   
                autoNavigation:true,
                prevCaption:'prev',
                nextCaption:'next',
                navImage:false,
                prevImage:'',
                nextImage:'',
                pageContainer:'pageCont',
                pageOf:false,
                pagination:false
            }           
            // to override the defaults of each option
            var options = $.extend(defaults, options);   
           
            return this.each(function(){                                   
                // declaration of variables       
                var cont = $(this);
                var pages = $(this).children();
                var pagef = cont.children().first();
                var pagel = cont.children().last();
               
                //if TRUE - enable auto navigation , if FALSE - manually put the navigation
                //put a class prevP and nextP in your buttons.
                if(options.autoNavigation){
                //set the navigation either pure text/image
                    if(options.navImage){
                        //if TRUE - image
                        cont.append('<a href="javascript:void(0);" class="prevP"><img src="'+ options.prevImage +'"/></a> <a href="javascript:void(0);" class="nextP"><img src="'+ options.nextImage +'"/></a>');   
                    }
                    else{
                        //if false - text
                        cont.append('<a href="javascript:void(0);" class="prevP">'+ options.prevCaption +'</a> <a href="javascript:void(0);" class="nextP">'+ options.nextCaption +'</a>');   
                    }               
                }
                //if TRUE - display example "Page 1 of 5"
                //if FALSE - manually put a <div>,<span>or etc.. and put a class="pageCounter", this will display your current page number
                //if FALSE - manually put a <div>,<span>or etc.. and put a class="pageLength", this will count the number of pages you have
                if(options.pageOf){
                    cont.after('<div class="pageCont">Page <span class="pageCounter"></span> of <span class="pageLength"></span>.</div>');
                }
               
                //if TRUE - automatically display pagination after container       
                //if FALSE - manually put a <div> and class it with pagi
                if(options.pagination){
                    cont.after('<div class="pagi"></div>');
                    var x=pages.length;
                    for(var y=1; y<=x;y++){
                        jQuery(".pagi").append('<a href="javascript:void(0);" class="'+y+'">'+y+'</a>');
                    }
                }
                else{
                    var x=pages.length;
                    for(var y=1; y<=x;y++){
                        jQuery(".pagi").append('<span><a href="javascript:void(0);" rel="'+y+'">'+y+'</a></span>');
                    }
                }
                // set the page containers class
                pages.each(function(){
                    $(this).addClass(''+ options.pageContainer +'').css("display","none");
                });   
               
                // onload functions, css or any codes           
                cont.ready(function(){
                    $(".current").css("display","block");
                    cont.css("clear","both");
                    showFirstPage();
                    navShowHide();
                    pageNumber();
                    $(".pagi a").first().addClass("oncurr");                   
                });
               
                // set onclick for previous
                $("a.prevP").click(function(){  
                    $(".current").hide();
                    $(".current").prev("div").addClass("current").show();
                    $(".current").eq(1).removeClass("current");
                    navShowHide();
                    pageNumber();
                    addCurr();
                });
               
                // set onclick for next
                $("a.nextP").click(function(){  
                    $(".current").hide();
                    $(".current").next("div").addClass("current").show();
                    $(".current").eq(0).removeClass("current");
                    navShowHide();
                    pageNumber();
                    addCurr();
                });       
                // set onclick for the pagination numbers
                $(".pagi a").click(function(){
                    var z=jQuery(this).attr("rel");
                    var disPlay=pages.eq(z-1);
                    $(".pagi a").removeClass("oncurr");
                    $(this).addClass("oncurr");                   
                    pages.removeClass("current").css("display","none");
                    disPlay.addClass("current").css("display","block");
                    navShowHide();
                    pageNumber();
                });
                // -----R-------------------N------ //
                // -----E------FUNCTIONS----E------ //
                // -----Y-------------------IL----- //
               
                // for the navigation(next/previous) either show or hide
                function navShowHide(){
                 var isFirst=pagef.hasClass("current");
                    if(isFirst){
                        $(".prevP").css("display","none");
                    }
                    else{
                        $(".prevP").show();
                    }
                 var isLast=pagel.hasClass("current");
                    if(isLast){
                        $(".nextP").css("display","none");
                    }
                    else{
                        $(".nextP").show();
                    }
                }       
                // to show the first page of the multi-step
                function showFirstPage(){
                    pagef.addClass("current").css("display","block");
                }
                // to display the current page number(must be inside class="pageCounter")
                //and the total number of pages (must be inside class="pageLength")
                function pageNumber(){
                    var pageL=pages.length;
                    pages.each(function(a,b){
                        var found =jQuery(this).hasClass("current");      
                        jQuery(".pageLength").text(pageL);
                        if(found){
                            jQuery(".pageCounter").text(a+1);       
                        }
                    });
                }
                // add class oncurr to the pagination
                function addCurr(){
                    pages.each(function(x,y){
                        var curr=$(this).hasClass("current");                       
                        if(curr){
                            jQuery(".pagi a").removeClass("oncurr");
                            jQuery(".pagi a").eq(x).addClass("oncurr");
                        }
                    });                   
                }
                               
            });   
        };
    })(jQuery);
/*
*    NOTE:Don't put any comma(,) after the last option because
*    it is considered as an error in IE. Therefore leave it
*    blank.
*
*    Default setting of the plug-in
*            autoNavigation:true,
*            prevCaption:'prev',
*            nextCaption:'next',
*            navImage:false,
*            prevImage:'',
*            nextImage:'',
*            pageContainer:'pageCont',
*            pageOf:false,
*            pagination:false
*
*    How to use this plugin.
*    Example:   
*        jQuery("#container").rPrevNext({   
*            autoNavigation:true,   
*            prevCaption:'PREV',
*            nextCaption:'NEXT',
*            navImage:false,
*            pageContainer:'box',
*            prevImage:'images/btnPrevious.png',
*            nextImage:'images/btnNext.png'
*            pageOf:true,
*            pagination:true
*        });
*/

javascript open new window

<a href="javascript:void(0);" onclick="window.open('url','windowName','menubar=0,resizable=1,width=350,height=250');">text here</a>

Wordpress Error and Solutions

Unable to create directory /wp-content/uploads/2009/09. Is its parent directory writable by the server? - wordpress error

Solutions:
1. Change the directory permission to 777. Apply this to its subdirectories or files so that it will become editable or writable.


2. In Media, check if  its "Store uploads in this folder" is “wp-content/uploads“.

3.Also try to add  define(‘UPLOADS’, ‘wp-content/new_folder’); after require_once(ABSPATH.’wp-settings.php’); in your wp-config.php file.

Follow up

Dear Mama,

     Hangtod karon modawat pa ko ug ingon ani..

Imong anak,
Reyneil

Love this Quote

Don't set compensation as a goal. Find work you like,
and the compensation will follow.