javascript

انیمیشن تبدیل مقادیر ارتفاع و پهنا به “Auto”

اسکریپت انیمیشن ارتفاع و پهنا یا هر دو به مقدار auto

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();
        
        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });  
}

کاربرد اسکریپت

$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000); 
});

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000); 
});

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000); 
});

خالی کردن فیلد با فوکوس روی آن

در HTML5 با افزوده شدن ویژگی placeholder می توانید مقدار اولیه برای فیلد مورد نظر خود تعریف کنید. اما این ویژگی برای مرورگرهای قدیمی مانند IE8 تعریف نشده است.

با استفاده از جاوا اسکریپت هم می توانید یک مقدار اولیه برای فیلد خود تعریف کنید. که البته در مرورگرهای قدیمی تر هم (در صورتیکه قصد پشتیبانی از آنها را دارید) به خوبی کار می کند.

 

<input type="text" name="Search" class="searchbox" onfocus="if(this.value == 'جستجو') { this.value = ''; }"
onblur="this.value=!this.value?'جستجو':this.value;" value="جستجو" />

پیش نمایش