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

Friday, May 4, 2012

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>

Tuesday, April 3, 2012

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

    }
});

Wednesday, March 28, 2012

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

Sunday, March 25, 2012

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

Monday, March 19, 2012

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.