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