رفتن به مطلب

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

سلام

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

الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.

 

دمو

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


لینک به ارسال

با css هم میتونید این کار رو کنید . 

میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه  و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید .

 

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


لینک به ارسال
در 2 ساعت قبل، PRGAME گفته است :

با css هم میتونید این کار رو کنید . 

میتونید یه div بسازید برای لوگو و از این روش استفاده کنید که وقتی صفحه اسکرول نشده div کلاس x رو داشته باشه و وقتی صفحه اسکرول میشه کلاس y رو داشته باشه  و توی کلاس ها با استفاده از opacity و display نمایش داده شدن لوگو رو کنترل کنید .

 

سلام درسته میدونم ولی من گفتم js بلد نستم اگه نمونه کدی چیزی دارید ممنون میشم

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


لینک به ارسال
در در 3/5/2018 at 13:25، Rasoul گفته است :

سلام

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

الان تو این دمو میخوام وقتی اسکرول میشه کنار My Header یک لوگو اضافه بشه و وقتی دوباره میبری بالا حذف بشه.

 

دمو

سلام

 

کد زیر رو قبل از <h2>My Header</h2> قرار بده:

<img id="logo" src="http://forum.wp-parsi.com/uploads/monthly_2017_04/1.png.843566f3bac6049941a67d225d8f91f8.png">

کد اضافه شده css:


#logo {
  width: 200px;
  height: auto;
  float: left;
}

کدهای javascript:

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
    document.getElementById("logo").style.display= "none";
  } else {
    header.classList.remove("sticky");
    document.getElementById("logo").style.display= "block";
  }
}

 

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


لینک به ارسال
در ۱ ساعت قبل، j1989m گفته است :

سلام

 

کد زیر رو قبل از <h2>My Header</h2> قرار بده:


<img id="logo" src="http://forum.wp-parsi.com/uploads/monthly_2017_04/1.png.843566f3bac6049941a67d225d8f91f8.png">

کد اضافه شده css:



#logo {
  width: 200px;
  height: auto;
  float: left;
}

کدهای javascript:


window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
    document.getElementById("logo").style.display= "none";
  } else {
    header.classList.remove("sticky");
    document.getElementById("logo").style.display= "block";
  }
}

 

 

سلام

ممنون داداش فقط من برعکس این کدی که شما دادید را میخواستم یعنی اول لوگو نباشه بعدش موقع اسکرول لوگو باشه.

جای  block را none با عوض کردم فقط یه مشکلی داره برای اولین بار لوگو هست! اما اسکرول میکنی پایین و دوباره میبری تا هدر مشکلش حل میشه!

نگاه کنید متوجه میشید

https://jsfiddle.net/13bhs9e2/15/

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


لینک به ارسال
در 20 ساعت قبل، Rasoul گفته است :

 

سلام

ممنون داداش فقط من برعکس این کدی که شما دادید را میخواستم یعنی اول لوگو نباشه بعدش موقع اسکرول لوگو باشه.

جای  block را none با عوض کردم فقط یه مشکلی داره برای اولین بار لوگو هست! اما اسکرول میکنی پایین و دوباره میبری تا هدر مشکلش حل میشه!

نگاه کنید متوجه میشید

https://jsfiddle.net/13bhs9e2/15/

سلام مجدد

فقط کافیه توی استایل ها display لوگو رو none کنی:

#logo {
  width: 200px;
  height: auto;
  float: left;
  display: none;
}

 

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


لینک به ارسال

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

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

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

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

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

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

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

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


  • مطالب مشابه

    • توسط atakhan83
      با سلام خدمت شما 
      من امروز میخواستم اولین قالب خودم رو تبدیل به وردپرس کنم اما به یه مشکلی بر خوردم پس از اینکه قالب رو اپلود کردم روی سرور (چه لوکال چه دامنه) فایل استایل رو یا نمیخونه یا لود نمیکنه نمیدونم مشکل چیه لطفا راهنمایی کنید عکسش رو پایین میزارم 
      لطفا سریع جواب بدید ممنون

    • توسط Black_Sky
      با سلام خدمت دوستان
      در این آموزش قصد دارم درباره زبان جاوا اسکریپت آموزش بدم
      این آموزش نوع آموزش ها در فضای مجازی بسیار وجود دارد اما قرار هست تفاوت های بسیاری وجود داشته باشد
      خب ابتدا :
      1-در این تاپیک اسپم ندهید و یا سوال نفرمایید /سوال و جواب در تاپیک جداگانه مطرح کنید تا بقیه دوستان استفاده کنند
      2-آموزش ها پیوسته میباشند و در آخر به صورت یک فایل PDF در اختیار دوستان قرار میگیرد
      3-یک سری پیش نیاز هم لازم هست همانند : HTML
      4-اگر هر نوع پیشنهاد و یا انتقادی هم وجود دارد با بنده در ارتباط باشید
      5-دوستانی هم که میخواهند در این تاپیک همکاری کنند اعلام نمایند
      --------------------
      موفق باشید
      ---------------------
    • توسط estedadrap
      سلام 
      داخل صفحه اول وبسایتم یه اسلایدر با بوت استرپ ایجاد کردم البته از لحاظ استایل دهی تغییراتی رو اعمال کردن
      حالا یه مشکل عجیب پیش اومده
      با برگ زده شدن اسلایدر داخل استایل کلی صفحه اول دو متغییر خود به خود تغییر میکنند (فونت ویجیت و لاین هایت)
      اول فکر کردم تداخل css ها هست برای اینکه مطمئن بشم استایل اسلایدر رو حذف کردم اما باز هم مشکل پا برجا بود
      برای مشاهده بهتر inspect کنید 
      hipborn .ir 
      لطفا راهنمایی کنید با کلی مشقت این اسلایدر رو ایجاد کردم
    • توسط chetorir
      با سلام و وقت بخیر خدمت اساتید بزرگ. چند وقتی بود به دنبال غیر فعال کردن قرار گرفتن کدهای HTML در داخل سایتم بودم ولی از اونجایی که تمام وب سایتهای ایرانی همشون از روی هم کپی میکنن و اصلا نمیخونن چی به چیه نمیتونستم این مشکل رو برطرف کنم. 
      یه سری کد قرار میدادن که باید داخل فایل function.php قرار میدادم ولی همش با ارور که این دستور درست نیست مواجع میشدم و وقتی سیو میکردم سایت کاملا از دسترس خارج میشد. چندتا منبع خارجی رو بررسی کردم و متوجه شدم که باید یه سری تغییرات در داخل کد ها قرار بدیم. منم تقریبا چند روزی بود درگیرش بود تا تونستم مشکل رو برطرف کنم خواستم این کد رو قرار بدم تا شما عزیزان هم ازش استفاده کنید و شاید مشکل شما هم باشه.
      // remove HTML for commnet function wpb_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", '&apos;', $incoming_comment['comment_content'] ); return( $incoming_comment ); } function wpb_comment_display( $comment_to_display ) { $comment_to_display = str_replace( '&apos;', "'", $comment_to_display ); return $comment_to_display; } add_filter( 'preprocess_comment', 'wpb_comment_post', '', 1); add_filter( 'comment_text', 'wpb_comment_display', '', 1); add_filter( 'comment_text_rss', 'wpb_comment_display', '', 1); add_filter( 'comment_excerpt', 'wpb_comment_display', '', 1); remove_filter( 'comment_text', 'make_clickable', 9 );  
      کد های بالا دقیقا از سایت هایی ایرانی برداشته شده بجز بخش str_replace که باید یه سری تغییر بدیم تا درست کار کنه. تصویر زیر هم نمونه کاریه که روی سایت خودم انجام دادم.
      اول از هم حالتی که قبل از قرار دادن کد ها بالا هست رو بهتون نشون میدم :

      خب حالا باید به بخش پوسته های سایتتون برید و قبل از هرکاری یک فایل پشتیبان از function.php بگیرید. فایل function.php را باز کنید و کدهایی که در بالا قرار گرفته شدن رو در انتهای این فاقل قرار بدید. حالا نمونه کار رو مشاهده کنید که با توجه به قرار گرفتن یک لینک در کامنت ، لینک اصلا کار نکرده و به شکل زیر دراومده.

       برای تست این موضوع هم میتونی سایت بنده رو بررسی کنید و اگه سوالی بود در خدمتتون هستم.
      موفق باشید
       
       
    • توسط amirreza566
      سلام و عرض ادب صفحه محصولات و قسمت نوشتن نظرات پیشفرض محصولاتم به شکل عکس زیر است.

       
      در خود قالب بنده وقتی یه آیتمی رو اضافه میکنم البته آیتم ...نه اینکه محصول ووکامرس...قسمت نوشتن نظرات و نمایش نتیجه رای کاربران به صورت عکس زیر است

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