Home Javascript

Một số Javascript thường dùng trong Blogspot (p1)

Tác giả Huỳnh Phụng Blogger
Xuất bản
Hôm nay mình sẽ tổng hợp một số Javascript tương tác theo chuột, cuộn trang thường dùng trong Blogspot phần nào để lưu lại để sau này tiện sử dụng và phát triển Blogger.

 TA BẮT ĐẦU:

Mình thường sử dụng các Javascript này để phục vụ cho thiết kế và nâng cấp theme Tinhdauonline.

Một số Javascript (Phần 1) được giới thiệu lần này như:
  • Scroll top add class to px
  • Click add class and click more remove just add class
  • Hover add class
Do không có nhiều thời gian nên mình chỉ giới thiệu chứ không minh hoa cẩn thận!

Điều kiện là trong Blog của bạn phải có thư viện Jquery trước nhé!

1. Cuộn trang để thêm class (Scolling add Class width px)

Một số Javascript thường dùng trong Blogspot (p1)
<script>
    window.onscroll = function() {if ($(this).scrollTop() &gt; 800) {$(&quot;.header&quot;).addClass(&quot;change&quot;);
}else{$(&quot;.header&quot;).removeClass(&quot;change&quot;);
}}
</script>


Ghi chú: Khi cuộn trang tới độ cao 800px trở lên .header sẽ được thêm thẻ class mới!

Trước: 
<nav class="header"> Menu </nav>
Sau: 
<nav class="header change"> Menu </nav>

Bạn dùng thêm css sau:
<style>
.header.change{position:fixed;top:0;left:0;width:100%;nội dung css thêm.....}
</style>

Ứng dụng Javascript cuộn theo trang thường sử dụng để giúp 1 đối tượng nào đó trượt theo màn hình hoặc tạo hiệu ứng gì đó

2. Click chuột để thêm class

2.1 Add class 1 lần, click lần nữa không có tác dụng

<script>
$(document).ready(function(){
    $(&quot;.addcart2&quot;).click(function(){
        $(&quot;#s0&quot;).addClass(&quot;showtext&quot;);
    });
});
</script>
 Ghi chú: Click chuột vào đối tượng .addcart2 sẽ thêm class .showtext và id #s0

Trước:
<div id="s0"> Nội dung </div>
⇛ Click .addcart2
<div id="s0" class="showtext"> Nội dung </div>
Code css kèm theo
<style>
#s0 .showtext{nội dung css}
</style>
Được mình ứng dụng để click CHO VÀO GIỎ HÀNG thì hiện thông báo!


2.2 Add class 1 lần, click lần nữa để remove class vừa thêm

<script>
//<![CDATA[
$(document).ready(function(){
$(".hide_sidebar").click(function(){
$(".sidebar").toggleClass('hidden');
$(".main-wrapper").toggleClass('fullwidth100');
});
});
//]]>
</script>

Ứng dụng này để tạo button hiden Sidebar và để phần main-wrapper rộng 100% đó.
Css:
<style>
.sidebar.hidden{display:none;opacity:0}
.main-wrapper.fullwidth100{width:100%}
</style>

HTML:
<a class='hide_sidebar' href='javascript:hide_sidebar' style='cursor:pointer'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7KU6KadKr4WCUIkrSXchxIATR-6s1dK5t48kBHgHzMFlv7uTZ-wr6UHhPq29Vl1HVOXxXluu8LXmS6pv-bT6cCQ5ie4GYcdnyGlU9zvSAnstlLatZoiEFkrEkYMdX12kGMvKFdfAs1Ju/s24/hide-sidebar-icon-----------BacSiWindows-Com.png'/> <span> Ẩn/hiện sidebar </span> </a> 

Đầu 
<div class="sidebar"> Nội dung </div>
<div class="main-wrapper"> Nội dung </div>

⇛ Click .hide_sidebar

Sau: 
<div class="sidebar hidden"> Nội dung </div>
<div class="main-wrapper fullwidth100"> Nội dung </div>

3. Rê chuột để Add class (Hover mouse add class)

Ứng dụng hover mouse add class để tạo lớp phủ

<div class='ctrlq fb-overlay'/>
<style>
.ctrlq.fb-overlay, .ctrlq.fb-overlay.block{z-index: 99;
position: fixed;
height: 100vh;
width: 100vw;
-webkit-transition: opacity .4s,visibility .4s;
transition: opacity .4s,visibility .4s;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
display: none;
}
.block{display:block!important}
</style>
<script>
// làm mờ màn hình
$(&#39;.menuleft&#39;).hover(
function(){ $(&#39;.ctrlq.fb-overlay&#39;).addClass(&#39;block&#39;) },
function(){$(&#39;.ctrlq.fb-overlay&#39;).removeClass(&#39;block&#39;) }
)
</script>
<div class='ctrlq fb-overlay'/> giúp tạo 1 lớp phủ tối để làm nổi bật các thành phần khác. Tuy nhiên sẽ được ẩn. z-index: 99

⇛ Sau khi rê chuột vào ..menuleft

Trước
<div class='ctrlq fb-overlay'/>
Sau
<div class='ctrlq fb-overlay block'/>

<div class='ctrlq fb-overlay block'/>  sẽ phủ 1 lớp mờ lên màn hình nền, Các đối tượng có z-index: dưới 99 sẽ bị chìm dưới lớp phủ này!

Vì vậy bạn cần thêm CSS cho thành phần nào đổi bật lên có z-index từ 100 trở lên nhé!

Phần 1 Javascript Blogger đã kết thúc, có thời gian mình sẽ chia sẻ thêm cho các bạn

P/s: Các tính năng này có thể làm Website hơi giật lag, bạn cần tìm hiểu thêm CSS3 Animation để các hiệu ứng và tính năng chuột thêm mượt mà là ok!

- Nguồn: BSW  -
Huỳnh Phụng Blogger

Chưa có bình luận nào, hãy là người đầu tiên!