Motyar

Freelance Web Developer

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).

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;
    cursorpointer;
    height5px;
    left0px;
    positionabsolute;
    top500px;
    width100%;
    z-index500;
    displaynone;
    -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: ,


By :