Teknoloji Haberleri
Aşağı Git
Tüm Forumlar
Web Tasarım - Programlama
Yazılım Geliştirme
Java
Header Bölümü Süreli Sabitleme
Bu konudaki kullanıcılar: 1 misafir
15
Cevap 992
Tıklama 0
Öne Çıkarma
Cevap 992
Tıklama 0
Öne Çıkarma
1. sayfa
-
Header Bölümü Süreli Sabitleme
|
javascript ile ; <script> "use strict"; (function () { -- ilk yüklemede 1 defaya mahsus çalışacak fonksiyon. window.setTimeout(headerGizleFonk, 5000); }()); function headerGizleFonk() { const header = document.getElementById("header"); -- header değişkene atama header.style.display="none"; --javascript ile gizleme $(header).slideUp(); -- jquery ile gizleme } </script> |
|
Teşekkür ederim ama kod çalışmıyor yada ben eksik yapıyorum. Header id'im "fixed-header32" giriyorum ama herhangi bi etki yapmıyor. |
|
jquery ile gizleme yapıyorsan jquery eklemen gerekir sayfaya. head bölümüne : <script src="https://code.jquery.com/jquery-3.4.1.js"></script> bunu ekleyerek jquery eklemiş olursun.gizleme kısmını da body nin altına veya harici js dosyasına yazman gerekir. |
|
Kod çalışıyor çok teşekkür ederim fakat header 5 sn sonra komple gizliyor :D Benim istediğim header üst bölümünde yani en yukarı çıkınca dursun aşağı indiğim zaman sayfayı takip ederken 5 sn sonra gizlensin |
|
süreden ziyade istediğini karşılayacak kodlar. let header = document.getElementById("fixed"); let scrollTop; $(window).scroll(function () { scrollTop = window.scrollY; if (scrollTop <= 100) { $(header).slideDown(); } else if (scrollTop > 100) { $(header).slideUp(); } } scroll değeri 100 den küçük ise yani üste geldiyse görünür, 100 den büyük ise gizlenir. |
|
senin dediğin gibi olması için ; sayfa yüklenince 5 saniye sonra gizlersin ama ne zaman göstereceksin ? tekrar göstermeyi yine scroll olayına bağlayabilirsin. -5 saniye sonra gizlendi. -gizlendikten hemen sonra veya bir kaç saniye sonra scroll olayı eklersin.scroll olayında scroll değerini kontrol edersin.tıpkı örnekteki gibi.100 den az ise yukarda demektir ve headerı gösterirsin. - buradaki sorun kullanıcı bu süre zarfında belki de hiç aşağıya gelmemiştir.durduğu yerde önce gizleyip sonra göstermiş olursun. |
Bu mesaja 1 cevap geldi.
| Evet demek istediğini anladım fakat scroll'a duyarlı olarak değiştirdim kodları süreli olanı sildim, herhangi bir gizleme olayı olmadı. |
Bu mesajda bahsedilenler: @chnkyn
|
olabilecek nedenler - jquery eklememiş olabilirsin - harici dosyasına yazmış olabilir ve bu harici dosyayı head bölümünde çağırıyor olabilirsin 1'in cevabı jquery eklemek 2'nin cevabı ; <script src"***" defer="defer"></script> çağırdığın yere defer="defer" veya sadece defer eklemek.bu sayfa yüklendikten sonra dosyayı çağırır. 2. çözüm olarak jquery eklediysen; js dosyanın içindeki tüm kodları döküman yüklendikten sonra çağır. $(function(){ "use strict"; javascript dosyandaki tüm kodları bu fonksiyon içine al. } |
Bu mesaja 1 cevap geldi.
|
Kodu aşağıdaki şekilde ekledim ama çalışmıyor. Kütüphanenin en son sürümü websiteme çağırılık zaten. <script> $(function(){ "use strict"; let header = document.getElementById("fixed-header32"); let scrollTop; $(window).scroll(function () { scrollTop = window.scrollY; if (scrollTop <= 100) { $(header).slideDown(); } else if (scrollTop > 100) { $(header).slideUp(); } } } </script> |
Bu mesajda bahsedilenler: @chnkyn
|
bir labela scroll olayındaki scrolltop değerini yazdırır mısın? değişiyor mu? ayrıca kodda < işareti yerine < çıkıyor.bu kodunda da böyle mi yoksa burada mı böyle görünüyor. |
Bu mesaja 1 cevap geldi.
|
zamanını çalıyorum çok yardımcı oluyorsun teşekkür ederim. <script> $(window).scroll(function() { if ($(this).scrollTop() > 0) { $('.fixed-header32').fadeOut(); } else { $('.fixed-header32').fadeIn(); } }); </script> Bu kodla hallettim. Bir sorum var bu koda ekstradan mouse üzerine gelincede göstersin diye bir komut ekleyebilir miyim? |
Bu mesajda bahsedilenler: @chnkyn
|
headerı gizliyorsun.mouse ile gösterebilmek için headerı değil içindekileri gizle.header background transparent yaparsın.sonra header'a const icindekiler=...; -- içindekileri seçersin $(header).hover(function(){ --hover fonksiyonu $(icindekiler).slideDown(); },function(){ -- over fonksiyonu."," ile ayrılır. $(icindekiler).slideUp() }) ayrıca kodların tam bağımsızlığı için kodlara özen gösterin. css ve javascript selectorlerini ayırın. fixed-header32 classını sadece css selectorlerinde kullanın. javascript için de js-fixed-header32 classı gibi bir class ekleyin.javascript ile işlemlerde bu classa erişin. başka bir tavsiye oocss ve bem mimarilerini gözeterek yazın :) |
< Bu mesaj bu kişi tarafından değiştirildi chnkyn -- 22 Temmuz 2019; 3:30:57 >
|
çok teşekkür ederim. Hakkını helal et. Bir tane daha en önemli konuyu açtım. https://forum.donanimhaber.com/ios-ve-macos-ta-tam-ekran-sorunu-yardimci-olur-musunuz--139213942 ne yapsam halledemedim. Bilgin varsa o konuyada el atar mısın?  |
1. sayfa
DH Mobil uygulaması ile devam edin.
Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin.
Gizle ve güncelleme çıkana kadar tekrar gösterme.
DonanımHaber Forum - Mini Sürüm
Hakkımızda | Yukarı
Tam sürüm için tıklayınız
Version: 1.2.896
Donanım Sponsoru:
Hakkımızda | Yukarı
Tam sürüm için tıklayınız
Version: 1.2.896
Donanım Sponsoru:
Sabit olan header bölümümün aşağı kaydırınca 5 saniye sonra gizlenmesini istiyorum. Yani sürekli kaydırsamda sabit bir header bölümüm var. Bunun 5 saniye sonra gizlenmesini hangi kodla yapabilirim.
DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.
Üye Ol Şimdi DeğilÜye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.