Apr 17, 2010
Create page bookmarker with JQuery
I am not talking about the Internet bookmark or Web Bookmark; i am here with the real bookmark. Yes A bookmark is a thin marker, commonly made of paper or card, used to keep one's place in a book and so be able to return to it with ease. Today we will learn to create the real bookmarker on web pages with JQuery(not Jquery).
JavaScript / JQuery
HTML
bookmarker on/off
Idea
Sometimes while reading long articles or blog posts, we have to leave them unfinished to read after some time. A bookmarker can help you to mark the place, you leave.Code
CSS
 #bookmarker {
    background-color:red;
    cursor: pointer;
    height: 5px;
    left: 0px;
    position: absolute;
    top: 500px;
    width: 100%;
    z-index: 500;
    display: none;
    -webkit-box-shadow: #000 -2px 2px 2px;
    -moz-box-shadow: #000 -2px 2px 2px;
} 
JavaScript / JQuery
 $(document).ready(function () {
    $('#bookmarker_switch').toggle(
    function () {
        $('#bookmarker').show();
        $(document).mousemove(
        function (e) {
            $('#bookmarker').css("top", e.pageY);
        });
        $('#bookmarker').toggle(
        function () {
            $(document).unbind('mousemove');
        }, 
        function () {
            $(document).mousemove(
            function (e) {
                $('#bookmarker').css("top", e.pageY);
            });
        });
    },
  function (document) {
        $('#bookmarker').hide();
        $(document).unbind('mousemove');
    });
}); 
HTML
 <div id="bookmarker"></div>
 <a id="bookmarker_switch" href="#">bookmarker on/off</a> Demo
This link will toggle the bookmarker.bookmarker on/off
Labels: Javascript, jquery
By : Motyar+ @motyar