New
Loading...
Đôi khi làm web bạn sẽ gặp những trường hợp lệnh Javascript phải chạy sau khi việc load trang đã hoàn tất, nếu không thì sẻ gặp lỗi.


Việc đó sẽ được giải quyết bằng một đoạn Script jQuery đơn giản sau:

<script type="text/javascript">
$(window).bind("load", function() { 

// lệnh javascript mà bạn muốn chạy sau khi load trang xong 

});
</script>

Giải thích:
Phương thức bind() gắn một hoặc nhiều sự kiện xử lý cho các thành phần đã được chọn, và chỉ rõ một hàm để chạy khi sự kiện đó xảy ra.
Thành phần được chọn ở đây là window và sự kiện là load nghĩa là khi cửa sổ được load xong thì sẻ chạy lệnh mà bạn muốn.

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery 
- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Lấy đường dẫn URL của trang hiện tại bằng PHP


Lazy Load là một plugin của JQuery dùng để tải hình ảnh ở các website hoặc blog nội dung có nhiều ảnh. Sử dụng Lazyload giúp cho trang web load nhanh hơn, phần nội dung của trang web sẽ được load lên trước sau đó khi người dùng kéo chuột đến đâu Lazyload sẻ load hình ảnh đến đó, một số trường hợp nó còn có tác dụng giảm tải cho Web Server.


Sau đây là cách sử dụng Lazy load và cách dùng trong những trường hợp khác nhau:

Đặt trong thẻ <head>
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
Sử dụng mặc định: Ví dụ với một image
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<script>
$(function() {
    $("img.lazy").lazyload();
});
</script>
Sử dụng với Threshold :
Mặc định hình ảnh sẻ load ngay khi xuất hiện trên màn hình, nhưng nếu bạn cài đặt option này thì hình ảnh sẻ load trước khi xuất hiện trên màn hình ( trong ví dụ là 200px ) 
$("img.lazy").lazyload({
    threshold : 200
});
Sử dụng với một sự kiện tương tác:
Tức là chỉ khi có sự kiện tương tác nào đó thì hình ảnh sẻ được load lên ví dụ như click, mouseover: 

$("img.lazy").lazyload({
    event : "click"
});

hoặc một sự kiện tùy chỉnh ( load sau 5 giây)
$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});
Sử dụng với một hiệu ứng:
Mặc định plugin sẽ chờ hình ảnh load xong và gọi hàm show(). Bạn có thể sử dụng bất kì hiệu ứng nào bạn muốn. Ví dụ: 
$("img.lazy").lazyload({
    effect : "fadeIn"
});
Sử dụng với trình duyệt "Non Javascript"
Mặc định trình duyệt lúc nào cũng bật Javascript, nhưng đôi lúc bị tắt đi bởi người dùng. Trường hợp này ta làm như sau:
<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>
Để tránh việc xuất hiện cùng lúc 2 hình ảnh giống nhau ta thêm code css sau:

.lazy {
     display: none;
 }

Thêm đoạn code sau để bật Javascript cho trình duyệt:

$("img.lazy").show().lazyload();

Sử dụng khi hình ảnh bên trong một thẻ bao với thanh cuộn

Code Css:

 #container vị trí {
     height: 600px;
     overflow: scroll;
 }

Code Js:

$("img.lazy").lazyload({
     container: $("#container")
});

 Kiểm soát số lượng hình ảnh được load :

$("img.lazy").lazyload({
    failure_limit : 10
});

Đối phó với những hình ảnh "Invisible":

$("img.lazy").lazyload({
    skip_invisible : true
});

Download toàn bộ source code và ví dụ cụ thể tại đây

Chúc các bạn thành công!

Xem thêm:

- Cách lấy giá trị biến từ một URL bằng Javascript (Get URL Variables)
- Basic jQuery Slider - Slider đơn giản dễ sử dụng trong thiết kế web
- Code popup quảng cáo nằm dưới trình duyệt (popup under)

Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery chúng ta sử dụng đối tượng Location và Document.


Cách làm như 2 ví dụ ngắn sau:

Sử dụng Javascipt: Sử dụng window.location và window.document
var getUrl = window.location.href;     // Lấy đường dẫn url trang hiện tại  
var getTitle = window.document.title;  // Lấy tiêu đề trang hiện tại
Sử dụng jQuery: Sử dụng $(location) và $(document) 
$(document).ready(function () {
  var getUrl = $(location).attr('href');    // Lấy đường dẫn url trang hiện tại
  var getTitle = $(document).attr('title');  // Lấy tiêu đề trang hiện tại
});

Chúc các bạn thành công!


Xem thêm:
- Cách tự động chuyển trang ( Auto Redirect ) bằng HTTP Status Code 301 hoặc 302
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Sau đây là trích dẫn cách làm menu dropdown bằng css và jquery rất đơn giản nhanh chóng chỉ với 3 bước cho mọi người cùng tham khảo:



Bước 1. HTML
Coppy đoạn code html dưới vào vị mà bạn muốn đặt menu:
<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Bước 2. CSSBạn coppy đoạn css này vào file css của bạn:
ul.topnav {
 list-style: none;
 padding: 0 20px; 
 margin: 0;
 float: left;
 width: 920px;
 background: #222;
 font-size: 1.2em;
 background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
 float: left;
 margin: 0; 
 padding: 0 15px 0 0;
 position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;
}
ul.topnav li a:hover{
 background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
 list-style: none;
 position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
 left: 0; top: 35px;
 background: #333;
 margin: 0; padding: 0;
 display: none;
 float: left;
 width: 170px;
 border: 1px solid #111;
}
ul.topnav li ul.subnav li{
 margin: 0; padding: 0;
 border-top: 1px solid #252525; /*--Create bevel effect--*/
 border-bottom: 1px solid #444; /*--Create bevel effect--*/
 clear: both;
 width: 170px;
}
html ul.topnav li ul.subnav li a {
 float: left;
 width: 145px;
 background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
 padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
 background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}

Bước 3. jQuery
Chèn đường dẫn jQuery vào trang web của bạn
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
Chèn đoạn script sau đặt dưới link jQuery:

$(document).ready(function(){

 $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
 
 $("ul.topnav li span").click(function() { //When trigger is clicked...
  
  //Following events are applied to the subnav itself (moving subnav up and down)
  $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

  $(this).parent().hover(function() {
  }, function(){ 
   $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
  });

  //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() { 
   $(this).addClass("subhover"); //On hover over, add class "subhover"
  }, function(){ //On Hover Out
   $(this).removeClass("subhover"); //On hover out, remove class "subhover"
 });

});
 
Chú ý: Bạn có thể bỏ dấu mũi trên bằng cách bỏ thẻ SPAN như trong hình ra:



Tham khảo: sohtanaka.com

Chúc các bạn thành công!
Nút Roll Top hay còn gọi là nút "Lên đầu trang" dùng để di chuyển nhanh lên đầu trang web mà không cần dùng chuột kéo RollBar. Website của bạn đã có nút này chưa? Nếu chưa có thì hãy cùng Beetiny Blog thực hiện thêm nút này chỉ với 3 bước nhé.


Bước 1: Thêm file thư viện jquery vào website của bạn (Gắn trước thẻ đóng </head>), bạn có thể dùng thư viện jquery trực tuyến của google:

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
Thêm đoạn script dưới đây bên dưới :
<script type="text/javascript">

    $(function() {
        $(window).scroll(function() {

            if($(this).scrollTop() != 0) {

                $('#toTop').fadeIn();   

            } else {

                $('#toTop').fadeOut();
            }

        });
        $('#toTop').click(function() {

            $('body,html').animate({scrollTop:0},800);
        });   

    });

    </script>
Chú ý: đoạn script trên phải nằm dưới link file thư viện jquery.

Bước 2: Viết style cho nút Roll Top, bạn chèn trên thẻ </head> hoặc add vào file css của bạn đoạn css sau:

<style type="text/css">

    #toTop{

        border:1px solid #ccc;

            background:#f7f7f7;

            text-align:center;

            padding:18px;

            border-radius:5px;

            position:fixed; /* this is the magic */

            bottom:10px; /* together with this to put the div at the bottom*/

            right:10px;

            cursor:pointer;

            display:none;

            color:#333;

            font-size:11px;

    }

    #toTop:before{

        content:"";

        position:Absolute;

        width:0;

        height:0;

        border:11px solid transparent;

        border-bottom:11px solid #099;

        left:7px;

        top:-4px;

    }

    #toTop:after{

        content:"";

        position:Absolute;

        width:10px;

        height:12px;

        background-color:#099;

        left:13px;

        top:18px;
    }

    </style>
Bước 3: Chèn nút Roll Top vào website, bước này rất đơn giản chép thẻ div bên dưới vào vị trí bất kì trên website của bạn, nên nhớ là nằm trong thẻ <body> nhé:
<div id="toTop"></div>
Vậy là xong, bây giờ hãy chạy thử để thấy kết quả!

Chúc các bạn thành công!
Trong jQuery bạn sử dụng method hide() và show() để thực hiện hành động ẩn một thành phần nào đó trong html, cách thực hiện nhanh như sau:

Tạo một file html với đoạn code bên dưới:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>
Trong file html trên ta có đoạn jQuery tạo hành động ẩn thành phần html là <p> khi click <button> có id là hide và để hiện thành phần <p> ta click <button> có id là show.

Rất đơn giản phải không nào, bạn hãy lưu và mở trên trình duyệt để xem kết quả nhé.

Chúc các bạn thành công!

Kiến thức XenforoThủ thuật bloggerThủ thuật PhotoshopVector miễn phíTải PSD miễn phíThủ thuật SEOThủ thuật GameTải Ebook miễn phíKiến thức đời sốngTop phần mềm miễn phíKiến thức FlashHọc lập trìnhCách vào Facebook bị chặn
© Copyright 2015 OBin's Blog - All Rights Reserved Powered by Blogger DMCA.com Protection Status
Back to Top