Ronald Roe

Mark Your Spot on a Page – Bookmarklet

Recently, I was trying to work my way through an HTML-based online book. It became a pain to find my spot again when I had to close the browser or reboot the computer for various reasons. So, I created a bookmarklet to help me find my spot again when I return to the page. The bookmarklet adds a small box in the upper right corner of the window with buttons to add or clear bookmarks. When you click the ADD button, you’ll be prompted to name the bookmark, which will then be added to the list. Bookmarks are stored in local storage, so they will persist from session to session. You’ll just have to click the bookmarklet again to reload them.

Go HERE to get the bookmarklet. Full code is below:

function bm_go(){

  var bm_block;

  bm_block = document.createElement('div');
  bm_block.classList.add('bm_class');
    bm_block.style.width = '100px';
    bm_block.style.minHeight = '33px';
    bm_block.style.position = 'fixed';
    bm_block.style.padding = '5px';
    bm_block.style.top = '10px';
    bm_block.style.right = '10px';
    bm_block.style.backgroundColor = 'white';
    bm_block.style.fontFamily = 'Arial, sans-serif';
    bm_block.style.color = 'black';
    bm_block.style.borderRadius = '5px';
    bm_block.style.border = '1px solid #999';
    bm_block.style.zIndex = '10000000';

  var bm_add_button = document.createElement('div');
  	bm_add_button.classList.add('bm_add_button');
    bm_add_button.style.display = 'inline-block';
    bm_add_button.style.height = '33px';
    bm_add_button.style.width = '45%';
    bm_add_button.style.border = '1px solid #999';
    bm_add_button.style.fontSize = '15px';
    bm_add_button.style.textAlign = 'center';
    bm_add_button.style.lineHeight = '33px';
    bm_add_button.style.cursor = 'pointer';
    bm_add_button.style.boxShadow = '2px 2px #666';
    bm_add_button.innerText = 'ADD';
  bm_block.appendChild(bm_add_button);

  var bm_clr_button = document.createElement('div');
  	bm_clr_button.classList.add('bm_clr_button');
    bm_clr_button.style.display = 'inline-block';
    bm_clr_button.style.height = '33px';
    bm_clr_button.style.width = '45%';
    bm_clr_button.style.border = '1px solid #999';
    bm_clr_button.style.fontSize = '15px';
    bm_clr_button.style.textAlign = 'center';
    bm_clr_button.style.lineHeight = '33px';
    bm_clr_button.style.cursor = 'pointer';
    bm_clr_button.style.boxShadow = '2px 2px #666';
    bm_clr_button.style.marginLeft = '5%';
    bm_clr_button.innerText = 'CLR';
  bm_block.appendChild(bm_clr_button);

  var bm_message = document.createElement('div');
  	bm_message.classList.add('bm_message');
    bm_message.style.marginTop = '5px';
    bm_message.style.marginBottom = '5px';
    bm_message.style.fontSize = '10px';
    bm_message.style.textAlign = 'center';
    bm_message.innerText = 'Click "ADD" to set bookmark at current scroll position.';
  bm_block.appendChild(bm_message);
    
  	document.body.appendChild(bm_block);
  
  var bm_list_init = JSON.parse(localStorage.getItem('bm_list')) || [];
   
  function bm_pop_list(list){
  	
    var rm_bm = document.querySelector('.bm_bm_list');
    if (rm_bm) rm_bm.parentNode.removeChild(rm_bm);
    
    var bm_bm_list = document.createElement('ul');
    bm_bm_list.classList.add('bm_bm_list');
    bm_bm_list.style.paddingLeft = '0';
    
    for (var i = 0; i < list.length; i++){

      var bm_list_item = document.createElement('li');
      bm_list_item.classList.add('bm_list_item');
      bm_list_item.innerText = list[i].name;
      bm_list_item.setAttribute('data-x', list[i].x);
      bm_list_item.setAttribute('data-y', list[i].y);
      bm_list_item.style.marginLeft = '0';
      bm_list_item.style.listStyleType = 'none';
      bm_list_item.style.cursor = 'pointer';

      bm_list_item.addEventListener('click', function(){

      	bm_go_to_location(bm_list_item);

      });

      bm_bm_list.appendChild(bm_list_item);

    }
    
    bm_block.appendChild(bm_bm_list);

  }
  
  bm_pop_list(bm_list_init);
  
  function bm_go_to_location(item){

  	window.scrollTo(item.getAttribute('data-x'), item.getAttribute('data-y'));

  }
  
  function bm_add_item(){

  	var bm_get_name = prompt('Enter Bookmark Name', 'bookmark'),
      	bm_get_x = window.pageXOffset,
        bm_get_y = window.pageYOffset;
    var bm_list = JSON.parse(localStorage.getItem('bm_list')) || [];

    bm_list.push({
    	name: bm_get_name,
      x: bm_get_x,
      y: bm_get_y
    });

    localStorage.setItem('bm_list', JSON.stringify(bm_list));
    bm_pop_list(bm_list);

  }
  
  function bm_clear(){

  	localStorage.removeItem('bm_list');
    bm_pop_list([]);

  }
  
  bm_add_button.addEventListener('click', bm_add_item);

  bm_clr_button.addEventListener('click', bm_clear);
  
}

var bm_ = new bm_go();