• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
سعید شعبانی

افزودن یا حذف کردن class یک المان توسط jquery بر اساس ارتفاع آن در زمان اسکرول عمودی

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

دوستان سلام

با استفاده از کد زیر میشه به یک المان وقتی که ارتفاع صفحه 500 پیکسل شد یک class اضافه کرد و در بقیه موارد هم این کلاس را حذف کرد.


$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});

اما من می خواهم با توجه به ارتفاع والد اون المان, این کلاس ها افزوده و حذف بشند. البته ارتفاع المان والد هم متغییر هست.

0

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


لینک به پست

$(".parent").filter(function() {
var height = $(this).height();
if (height >= 500) {
$(this).find(".child").addClass("darkHeader");
} else {
$(this).find(".child").removeClass("darkHeader");
}
});

4

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


لینک به پست

جناب فخار خیلی متشکرم. نمی دونم من نمی تونم ازش استفاده کنم یا اینکه یک مشکل داره.

بگذارید یکم بیشتر توضیح بدم. من یک المان داخل صفحه دارم که می خواهم وقتی که صفحه تا یک اندازه مشخص اسکرول شد از اونجا به بعد یک کلاس به اون المان افزوده بشه بعد وقتی که اسکرول صفحه به بخش پایانی والد این المان رسید این کلاس حذف بشه یا اینکه یک کلاس جدید هم بهش اضافه بشه و بعد از اون هرچی صفحه به سمت پایینتر اسکرول بشه هیچ تغییری در کلاس های اضافه یا کم شده به اون المان تغییر نکنه. اما وقتی که برعکس اسکرول به سمت بالای صفحه انجام شد به همین ترتیب المان ها حذف یا اضافه بشند.

0

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


لینک به پست

موقعیت المان والدتون چوریه

اگر نقطه آغازش در صفحه معلوم باشه می شه نقطه پایانش رو محاسبه کرد و الا که به نظر من راهی نمی رسه جز اینکه والد را پوزیشن ابسولوت در محل قرار بدید که مختصات top ازش دربیاد


$(window).scroll(function() {
var parentStart = $(".parent").css("top");
var h = $(".parent").outerHeight();
var parentEnd = parseInt(h)+parseInt(parentStart);
var scroll = $(window).scrollTop();
if (scroll >= parentEnd) {
$(".child").removeClass("darkHeader1").addClass("darkHeader2");
} else
if (scroll >= parentStart) {
$(".child").removeClass("darkHeader2").addClass("darkHeader1");
}
else {
$(".child").removeClass("darkHeader2").removeClass("darkHeader1");
}
});

3

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


لینک به پست

در اصل من می خواهم یک نوار اشتراک گذاری متحرک ایجاد کنم مثل نوار اشتراک گذاری 1پزشک یا wpmudev که فقط در کنار متن اصلی مطلب به صورت شناور حرکت می کنند. از نظر css مشکلی ندارم فقط اگر بشه کاری کرد که زمان رسیدن اسکرول صفحه به اون نوار یک کلاس جدید بهش اضافه کرد و وقتی که اسکرول به آخر متن مطلب رسید یک کلاس جدید دیگه هم به نوار اشتراک گذاری افزوده بشه با css می توند شناور بودن را ایجاد کنم.

0

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


لینک به پست

چرا پس از اول نممی رید سر مسئله اصلی

صبح اول صببح کلی معما حل کردم :D

http://jsfiddle.net/fakhar/2hSVY/2/embedded/result/

3

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


لینک به پست

عالی بود اینجا هم می تونید نتیجش رو ببینید

1

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط koolfayfer
      سلام و وقت بخیر
      من برای سایتم از این استفاده کردم که کارش یه پروگرس بار لودینگ به همراه ایجکس کردن صفحه است
      لودینگش اجرا میشه اما ایجکسش کار نمیکنه
      برای این که متوجه بشید دو سایت زیر رو بررسی کنید
      نمونه صحیح:
      http://zakerin.ir
       
      نمونه شبیه چیزی که من به اون رسیدم:
      https://zhaket.com
      (چیزی که اشتباهه اینه که صفحه لود میشه و سفید میره و میاد بعدش پروگرس اجرا میشه که اصولا نباید صفحه رفرش بشه)
       
      دوستان لطفا کمک کنند
    • توسط rosi
      سلام دوستان بنده بعد از مدت ها امدم یه قالب واسه وردپرس بنویسم
      در  منو ها از این پلاگین ها برای اسکرول در تگ خاصی
        scrollIt.js
      scrollIt.min.js
      استفاده کردم.ولی مشکل اونجاست که وقتی میخوام منو هارو واسه وردپرس درج کنم  طبعتا چون تگ li  پاک میشه.کد از کار میوفته.
      الان باید چیکار کنم.
      باید از افزونه استفاده کنم به صورت دستی امکان نداره.
    • توسط miraziz
      سلام دوستان. من برای صفحه اول سایتم یک منوای اضافه کردم، ولی نمی دونم که دقیقا چی شده که صفحه اول سایت در نمایشگر عریض( مثلا 14اینچ) یک اسکرول افقی طولانی ایجاد میشه.
      ممنون می شوم راهنمایی کنید که این مشکل از چیست؟

      آدرس سایت: http://echolalia.ir/
    • توسط masoudch
      سلام
      به کمکتون نیاز دارم.
      به مشکل خوردم برای اضافه کردن یک فایل جاوا اسکریپت برای ایجاد اسلاید شو (owl-carousel) در تم وردپرس.
      این تم html بوده که درحال تبدیل اون به تم وردپرس هستم.
      کد جاوااسکریپت: این کد رو کجا باید قرار بدم که مشکل اسلایدشو حل بشه؟
      <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script> آدرس دهی در فانکشن وارد کردم: این درسته که میتونم کدهای جاوا اسکریپت و توی فوتر قرار بدم و بعد از طریق فانکشن یا حالا هر روش دیگه ای اونا رو فراخونی کنم که دیگه همچین مشکلی پیش نیاد؟
      <?php function insert_style() { wp_enqueue_style('zerogrid' , get_template_directory_uri().'/assets/css/zerogrid.css'); wp_enqueue_style('style' , get_template_directory_uri().'/assets/css/style.css'); wp_enqueue_style('responsiveslides' , get_template_directory_uri().'/assets/css/responsiveslides.css'); wp_enqueue_style('font-awesome-min' , get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css'); wp_enqueue_style('owl-carousel' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.css'); wp_enqueue_style('owl-theme' , get_template_directory_uri().'/assets/owl-carousel/owl.theme.css'); wp_enqueue_style('menu' , get_template_directory_uri().'/assets/css/menu.css'); //add scripts wp_enqueue_script('jquery183-min' , get_template_directory_uri().'/assets/js/jquery183.min.js'); wp_enqueue_script('script' , get_template_directory_uri().'/assets/js/script.js'); wp_enqueue_script('jquery-latest-min' , get_template_directory_uri().'/assets/js/jquery-latest.min.js'); wp_enqueue_script('responsiveslides-min' , get_template_directory_uri().'/assets/js/responsiveslides-min.js'); wp_enqueue_script('owl-carousel-min' , get_template_directory_uri().'/assets/owl-carousel/owl.carousel.min.js'); } add_action('wp_enqueue_scripts' , 'insert_style'); ?> خطایی که با بررسی inspect element متوجه شدم اینه که اصلا فایل owl-carousel.js خونده نمیشه.
      ممنون.
       
    • توسط PejmanDesigner
      با عرض سلام و خسته نباشید خدمت دوستانم .
      من مشکلی دارم که با جستجو نتونستم به جواب برسم شاید مواردی که جستجو می کردم اشتباه بوده .
      من می خوام در قسمت منو ها لینکی بزارم که صفحه جدیدی رو باز نکنه و به قسمت های مختلف در همون صفحه بره .
      من یک وب سایت تک صفحه دارم و برگه جدیدی ندارم . ولی می خوام با کلیک بر روی قسمت های مختلف منو بازدید کننده مستقیم اسکرول بشه به همون موقعیت .
      حالا دو سوال دارم در این رابطه
      اول اینکه ایا افزونه ای هست که این کار رو انجام بده ؟ یا اینکه باید کدی رو وارد کنم ؟ (لطفا در صورت داشتن کد ، علاوه بر کد نحوه قرار گیری هم توضیح داده شود)
      دوم اینکه اون طوری که من خیلی وقت پیش ها شنیدم مقدار پیکسل میگیره این کد که کجا اسکرول بشه ، حالا سوالم اینجاست که ما پیکسل بدیم داخل این کد ها یا افزونه آیا درحالت رسپانسیو مشکل ایجاد میشه یا نه ؟