unid_user

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

3 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام و درود

دوستان گرامی ، میخوام با فشردن هر کدوم از کلیدهای کیبورد ، 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
0

به اشتراک گذاری این پست


لینک به پست
در 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%");
  });

 

0

به اشتراک گذاری این پست


لینک به پست
در 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 استفاده کردم.

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط unid_user
      سلام و درود
      دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.
      <nav> <ul id="first-ul"> <li> <a>صفحه اصلی</a> </li> <li> <a>خدمات</a> <ul class="second-ul"> <li> <a>آموزش رباتیک</a> </li> <li> <a>طراحی و ساخت ربات</a> </li> </ul> </li> <li> <a>محصولات</a> <ul class="second-ul"> <li> <a>ربات مسیریاب</a> </li> <li> <a>ربات حل ماز</a> </li> </ul> </li> </ul> </nav> با تشکر و سپاس
    • توسط jistili1
      سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.
      این کد جی کوئری من هست:
      $("#select").change(function(){ if($(this).val()=="empty"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="localref"){ $("#date").css("display","hidden"); $("#localref").css("display","block"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="date"){ $("#date").css("display","block"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="price"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","block"); } if($(this).val()=="number"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","block"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } if($(this).val()=="product"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","hidden"); $("#number").css("display","hidden"); $("#product").css("display","block"); $("#price").css("display","hidden"); } if($(this).val()=="refid"){ $("#date").css("display","hidden"); $("#localref").css("display","hidden"); $("#refid").css("display","block"); $("#number").css("display","hidden"); $("#product").css("display","hidden"); $("#price").css("display","hidden"); } }); حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، نمیدونم چرا وقتی صفحه مرورگر رو رفرش میکنم، تمام زیر منوها دیده میشه! کسی میدونه علت چیه.
      با اینکه من تگ ul رو diplay: none دادم.
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، کسی میدنه چطور باید از datepicker فارسی استفاده کنم؟ من طبق این مقاله آموزشی انجام دادم اما هیچی نشون نمیده؟!
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، چطوری میشه کدهای جاوا اسکریپت و جی کوئری در فایل js رو به وسیله php یا توابع وردپرس داینامیک کنیم.
      مثلا یه متغیر در فایل js دارم که میخوام از طریق php یا توابع وردپرس هر بار که خواستم یک مقدار رو اختصاص بدم.
      با تشکر و سپاس