رفتن به مطلب

افزایش width تگ div با هر بار فشردن کیبرد


پست های پیشنهاد شده

سلام و درود

دوستان گرامی ، میخوام با فشردن هر کدوم از کلیدهای کیبورد ، width یک تگ div خاص رو هربار 5 پیکسل افزایش بدم. کد زیر رو خودم نوشتم ولی کار نمیکنه.

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth++;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', 'barwidthplus + %');
  });

با تشکر و سپاس

ویرایش شده توسط unid_user
لینک به ارسال
در 7 دقیقه قبل، unid_user گفته است :

سلام و درود

دوستان گرامی ، میخوام با فشردن هر کدوم از کلیدهای کیبورد ، width یک تگ div خاص رو هربار 5 پیکسل افزایش بدم. کد زیر رو خودم نوشتم ولی کار نمیکنه.

یافتم :rolleyes:

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', barwidthplus+"5%");
  });

 

لینک به ارسال
در 10 دقیقه قبل، unid_user گفته است :

یافتم :rolleyes:


var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    alert(barwidthplus);
    $("#run-bar").css('width', barwidthplus+"5%");
  });

 

مشکلی که کد بالا داره با افزایش width صفحه سایت اسکرول میخوره که شاید یکی از راه هاش overflow برابر hiden هست. اما اگه همین کد رو بخوام بهتر بنویسم به صورت زیر درمیاد.

var barWidth = $("#run-bar").width();
  var barwidthplus = barWidth;
  $("form#home-search-form input[type='text']").keypress(function() {
    barwidthplus++;
    $("#run-bar").css('width', barwidthplus+"%");
    if (barwidthplus == 100) {
      barwidthplus = 0;
    }
  });

البته برای روان تر شدن افزایش width تگ div مورد نظر در قسمت css از transition استفاده کردم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...