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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط SadraHkm
      سلام دوستان امیدوارم حالتون خوب باشه
      من داشتم تمرین میکردم که یه کتابخونه ساده بسازم. بعد به یه مشکلی برخوردم. من دو تا متد نوشتم. تو یکی از اونها، اون یکی رو صدا زدم. ولی کار نمیکنه و مقداری که برمیگردونه undefined هست.
      میشه لطفا راهنمایی کنید که مشکلش چی هست. با تشکر فراوان
      (function (window) { function mathLibrary() { this.plusNums = function (x, y) { return Number(x) + Number(y); }; this.subNums = function(x , y) { this.plusNums(x,-y); } } if(typeof sadra_ml === 'undefined'){ window.sadra_ml = new mathLibrary(); }else { console.log("There is name conflict"); } })(window);  
    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی، می خوام با کلیک کردن روی یه تگ a هر بار سه تا از تگ های div که کلاس items رو دارن نمایش داده بشه یا به اصطلاح laod بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط SadraHkm
      سلام دوستان
      برای لود کردن فایل های جاوااسکریپت میتونیم اسکریپت رو در تگ head یا قبل از تگ /body بذاریم. وقتی که در تگ head میذاریم، قبل از اینکه محتوای صفحه خونده بشن، این فایل لود میشه. ولی ایا وقتی در اخر صفحه ( قبل از /body ) هم گذاشته میشه، قبل از خونده شدن محتوای صفحه این فایل لود میشه یا بعدش یا همزمان باهاش ؟!
      بعد سوال دیگه اینکه اگه ما فایل رو در اخر سندمون لود کنیم، چه فرقی میکنه با اینکه از attribute defer استفاده کنیم ؟ این attribute که دقیقا همون کار رو انجام میده !
      ممنون میشم کمی توضیح بدید
      باتشکر
    • توسط 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> با تشکر و سپاس