Merhaba arkadaşlar, Aşağı doğru kayan veya çok fazla ürün listelemesi olan websitelerinde yukarı çık butonu gerekebiliyor bunun için aşağıdaki kodları kullanmanız yeterlidir. Style dosyası
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #top { bottom: 5px; display: none; height: 100px; position: fixed; right: 20px; font-size:40px; color:#ea786a; cursor:pointer; opacity:0.5; transition:500ms; } #top:hover{ opacity:1; transition:500ms; } |
Jquery tarafı
1 2 3 4 5 6 7 8 9 10 | $(function () { $("#top").click(function () { $("html,body").stop().animate({ scrollTop: "0" }, 1000); }); }); $(window).scroll(function () { var uzunluk = $(document).scrollTop(); if (uzunluk > 300) $("#top").fadeIn(500); else { $("#top").fadeOut(500); } }); |
Html tarafı
1 2 3 | <div id="top"> Yukarı Çık </div> |
Bir sonraki konuda görüşünceye kadar bol debuglu günler 🙂
Merhaba arkadaşlar, Asp.net button click olayı sonrasında evet hayır işlemi yaptırmak isteyebilirsiniz. Bunun için butonun ” onClientClick ” eventına aşağıdaki kodu yetmeniz yeterlidir.
1 | return confirm('Seçilen kayıt silinecektir ?'); |
Merhaba arkadaşlar, Kimi zaman web sitelerinden header menüsünü yapışkan yani aşağı scroll ile kayan yapmak isteriz.İşte böyle durumlarda aşağıdaki kodları kullanarak kolaylıkla yapabilirsiniz. Css
1 2 3 4 5 6 7 | .sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .header_menu{} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> window.onscroll = function () { myFunction() }; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } </script> |
Örnek html kodlaması aşağıdaki gibidir;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .header_menu{} </style> </head> <body> <div id='header' class='header_menu'> header menu </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script> window.onscroll = function () { myFunction() }; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } </script> </body> </html> |
Hepsi bu kadar 🙂 Takıldığınız yerleri yorum olarak yazabilirsiniz. Bir sonraki yazılım konusunda görüşünceye kadar bol sorgulu ve hatasız kodlamalar dilerim.
Merhaba arkadaşlar, Son dönemlerde moda olan sekme değiştiğinde title değiştirme olayını aşağıdaki küçük kod parçacıgı ile sizlerde rahatlıkla yapabilirsiniz.
1 2 3 4 5 6 | <script type="text/javascript"> var title = document.title; var alttitle = "Bizi Unutma! :)"; window.onblur = function () { document.title = alttitle; }; window.onfocus = function () { document.title = title; }; </script> |
Bir sonraki yazıda görüşünceye kadar hepiniz bol kodlu günler…
Merhabalar, Javascript ile div sıralamak için aşağıdaki örnek kodları kullanabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <div id="list"> <div id="4">test 4 dd</div> <div id="3">tesdf 3 dd</div> <div id="5">test 5 f</div> <div id="1">test 1 s</div> <div id="2">test 2 f</div> </div> <script type="text/javascript"> var toSort = document.getElementById('list').children; toSort = Array.prototype.slice.call(toSort, 0); toSort.sort(function(a, b) { var aord = +a.id; var bord = +b.id; return (aord > bord) ? 1 : -1; }); var parent = document.getElementById('list'); parent.innerHTML = ""; for(var i = 0, l = toSort.length; i < l; i++) { parent.appendChild(toSort[i]); } </script> </body> </html> |