Skip to content

Instantly share code, notes, and snippets.

@jhauga

jhauga/dom_Note_TakePageNotes.js

Last active December 12, 2025 20:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jhauga/52661cda4f5340a8023ffee94ece792b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jhauga/52661cda4f5340a8023ffee94ece792b to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklet - use this bookmarklet for when learning something new, and want to take notes on it. Ensure to copy/paste the top condensed line of the bookmarklet. Info at "https://github.com/isocialPractice/bookmarklets".
Raw
dom_Note_TakePageNotes.js
/// *********************************************************** ///
// ****************** BROWSER BOOKMARKLET GIST ***************** //
// ************************************************************* //
// //
// LICENSE /////////////////////////////////////////////////////
// ******* //
// The code in this gist is public domain. //
// Licensed as Public Domain CC0 //
//////////////////////////////////////////////////////////////////
//
// COPY / PAST BELOW LINE TO USE
javascript:(function() { /* Global variables. */ var noteBoxDomTakePageNotes = /* use this to check that element does not exist - no duplicates */ document.getElementById("noteBoxDomTakePageNotes"); var noteContainerDomTakePageNotes = /* container holding notebox and button */ document.getElementById("noteContainerDomTakePageNotes"); var styleTagDomTakePageNotes = /* use this to check that element does not exist - no duplicates */ document.getElementById("styleTagDomTakePageNotes"); var toggleBtnDomTakePageNotes = /* toggle button to show/hide notebox */ document.getElementById("toggleBtnDomTakePageNotes"); var styleDomTakePageNotes = /* style applied to bookmarklet */ ` #noteContainerDomTakePageNotes { z-index: 10000; display: inline-block; position: fixed; top: 100px; left: 100px; width: auto !important; height: auto !important; background: #ffffff; border: 2px solid #d3d3d3; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); padding: 5px; cursor: move; } #noteContainerDomTakePageNotes[data-collapsed="true"] { width: auto; padding: 0px; } #toggleBtnDomTakePageNotes { display: block; position: relative; width: 25px; height: 25px; border: none; border-radius: 5px; background: #04AA6D; color: white; cursor: pointer; text-align: center; font-size: 16px; font-weight: bold; margin: 0; padding: 0; } #toggleBtnDomTakePageNotes:hover { background: #038859; border: 2px solid #060606; } #noteBoxDomTakePageNotes { display: block; width: 350px; height: 200px; border: 1px solid #d3d3d3; border-radius: 5px; padding: 10px; margin-top: 5px; resize: both; overflow: auto; font-family: Arial, sans-serif; font-size: 14px; box-sizing: border-box; } #noteContainerDomTakePageNotes[data-collapsed="true"] #noteBoxDomTakePageNotes { display: none !important; } `; /* Variables for dragging functionality */ var isDraggingDomTakePageNotes = false; var offsetXDomTakePageNotes = 0; var offsetYDomTakePageNotes = 0; /************************************* SUPPORT FUNCTIONS *************************************/ /* Create the notebox textarea element. */ const createNoteBoxDomTakePageNotes = () => { let noteBox = document.createElement("textarea"); noteBox.setAttribute("id", "noteBoxDomTakePageNotes"); noteBox.setAttribute("placeholder", "Take your notes here..."); return noteBox; }; /* Create the toggle button element. */ const createToggleBtnDomTakePageNotes = () => { let btn = document.createElement("button"); btn.setAttribute("id", "toggleBtnDomTakePageNotes"); btn.innerHTML = "x"; return btn; }; /* Create the container holding all elements. */ const createContainerDomTakePageNotes = () => { let container = document.createElement("div"); container.setAttribute("id", "noteContainerDomTakePageNotes"); container.setAttribute("data-collapsed", "false"); return container; }; /* Add the notebox and toggle button to the page. */ const addNoteBoxDomTakePageNotes = () => { if (!noteContainerDomTakePageNotes) { let container = createContainerDomTakePageNotes(); let toggleBtn = createToggleBtnDomTakePageNotes(); let noteBox = createNoteBoxDomTakePageNotes(); container.insertAdjacentElement("afterbegin", toggleBtn); container.insertAdjacentElement("beforeend", noteBox); document.body.insertAdjacentElement("afterbegin", container); noteContainerDomTakePageNotes = document.getElementById("noteContainerDomTakePageNotes"); toggleBtnDomTakePageNotes = document.getElementById("toggleBtnDomTakePageNotes"); noteBoxDomTakePageNotes = document.getElementById("noteBoxDomTakePageNotes"); } }; /* Add the style tag for the bookmarklet. */ const addStyleTagDomTakePageNotes = () => { if (!styleTagDomTakePageNotes) { let doc = document.getElementsByTagName("body"); let styleTag = document.createElement("style"); styleTag.setAttribute("id", "styleTagDomTakePageNotes"); styleTag.innerHTML = styleDomTakePageNotes; doc[0].insertAdjacentElement("afterbegin", styleTag); } }; /* Toggle notebox visibility on button click. */ const addToggleFunctionalityDomTakePageNotes = () => { toggleBtnDomTakePageNotes.addEventListener("click", () => { let isCollapsed = noteContainerDomTakePageNotes.getAttribute("data-collapsed"); if (isCollapsed == "false") { noteContainerDomTakePageNotes.setAttribute("data-collapsed", "true"); toggleBtnDomTakePageNotes.innerHTML = "o"; } else { noteContainerDomTakePageNotes.setAttribute("data-collapsed", "false"); toggleBtnDomTakePageNotes.innerHTML = "x"; } }); }; /* Add drag functionality to move notebox anywhere on page. */ const addDragFunctionalityDomTakePageNotes = () => { noteContainerDomTakePageNotes.addEventListener("mousedown", (e) => { if (e.target === toggleBtnDomTakePageNotes || e.target === noteContainerDomTakePageNotes) { isDraggingDomTakePageNotes = true; offsetXDomTakePageNotes = e.clientX - noteContainerDomTakePageNotes.offsetLeft; offsetYDomTakePageNotes = e.clientY - noteContainerDomTakePageNotes.offsetTop; noteContainerDomTakePageNotes.style.cursor = "grabbing"; } }); document.addEventListener("mousemove", (e) => { if (isDraggingDomTakePageNotes) { noteContainerDomTakePageNotes.style.left = (e.clientX - offsetXDomTakePageNotes) + "px"; noteContainerDomTakePageNotes.style.top = (e.clientY - offsetYDomTakePageNotes) + "px"; } }); document.addEventListener("mouseup", () => { if (isDraggingDomTakePageNotes) { isDraggingDomTakePageNotes = false; noteContainerDomTakePageNotes.style.cursor = "move"; } }); }; /********************************************************************************************* MAIN FUNCTION *********************************************************************************************/ function runDomTakePageNotes() { /* Add the styling for bookmarklet. */ addStyleTagDomTakePageNotes(); /* Add notebox and toggle button to page. */ addNoteBoxDomTakePageNotes(); /* Add toggle functionality to button. */ addToggleFunctionalityDomTakePageNotes(); /* Add drag functionality to move notebox. */ addDragFunctionalityDomTakePageNotes(); } /* Call main function. */ runDomTakePageNotes();})();
// MAKE ANY EDITS AS NEEDED
// *************************************************************
// Use the JS Formatted Bookmarklet below to see if any changes
// need to be made in accordance to the page you want to use
// it for. After making needed changes ensure that the revised
// bookmarklet is condensed before using it in your browser.
// For more info on this bookmarklet visit:
// https://github.com/isocialPractice/bookmarklets
// *************************************************************
// *************************************************************
// ************************JS-FORMATTED*************************
javascript:(function() {
/* Global variables. */
var noteBoxDomTakePageNotes = /* use this to check that element does not exist - no duplicates */
document.getElementById("noteBoxDomTakePageNotes");
var noteContainerDomTakePageNotes = /* container holding notebox and button */
document.getElementById("noteContainerDomTakePageNotes");
var styleTagDomTakePageNotes = /* use this to check that element does not exist - no duplicates */
document.getElementById("styleTagDomTakePageNotes");
var toggleBtnDomTakePageNotes = /* toggle button to show/hide notebox */
document.getElementById("toggleBtnDomTakePageNotes");
var styleDomTakePageNotes = /* style applied to bookmarklet */
`
#noteContainerDomTakePageNotes {
z-index: 10000;
display: inline-block;
position: fixed;
top: 100px;
left: 100px;
width: auto !important;
height: auto !important;
background: #ffffff;
border: 2px solid #d3d3d3;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
cursor: move;
}
#noteContainerDomTakePageNotes[data-collapsed="true"] {
width: auto;
padding: 0px;
}
#toggleBtnDomTakePageNotes {
display: block;
position: relative;
width: 25px;
height: 25px;
border: none;
border-radius: 5px;
background: #04AA6D;
color: white;
cursor: pointer;
text-align: center;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
#toggleBtnDomTakePageNotes:hover {
background: #038859;
border: 2px solid #060606;
}
#noteBoxDomTakePageNotes {
display: block;
width: 350px;
height: 200px;
border: 1px solid #d3d3d3;
border-radius: 5px;
padding: 10px;
margin-top: 5px;
resize: both;
overflow: auto;
font-family: Arial, sans-serif;
font-size: 14px;
box-sizing: border-box;
}
#noteContainerDomTakePageNotes[data-collapsed="true"] #noteBoxDomTakePageNotes {
display: none !important;
}
`;
/* Variables for dragging functionality */
var isDraggingDomTakePageNotes = false;
var offsetXDomTakePageNotes = 0;
var offsetYDomTakePageNotes = 0;
/************************************* SUPPORT FUNCTIONS *************************************/
/* Create the notebox textarea element. */
const createNoteBoxDomTakePageNotes = () => {
let noteBox = document.createElement("textarea");
noteBox.setAttribute("id", "noteBoxDomTakePageNotes");
noteBox.setAttribute("placeholder", "Take your notes here...");
return noteBox;
};
/* Create the toggle button element. */
const createToggleBtnDomTakePageNotes = () => {
let btn = document.createElement("button");
btn.setAttribute("id", "toggleBtnDomTakePageNotes");
btn.innerHTML = "x";
return btn;
};
/* Create the container holding all elements. */
const createContainerDomTakePageNotes = () => {
let container = document.createElement("div");
container.setAttribute("id", "noteContainerDomTakePageNotes");
container.setAttribute("data-collapsed", "false");
return container;
};
/* Add the notebox and toggle button to the page. */
const addNoteBoxDomTakePageNotes = () => {
if (!noteContainerDomTakePageNotes) {
let container = createContainerDomTakePageNotes();
let toggleBtn = createToggleBtnDomTakePageNotes();
let noteBox = createNoteBoxDomTakePageNotes();
container.insertAdjacentElement("afterbegin", toggleBtn);
container.insertAdjacentElement("beforeend", noteBox);
document.body.insertAdjacentElement("afterbegin", container);
noteContainerDomTakePageNotes = document.getElementById("noteContainerDomTakePageNotes");
toggleBtnDomTakePageNotes = document.getElementById("toggleBtnDomTakePageNotes");
noteBoxDomTakePageNotes = document.getElementById("noteBoxDomTakePageNotes");
}
};
/* Add the style tag for the bookmarklet. */
const addStyleTagDomTakePageNotes = () => {
if (!styleTagDomTakePageNotes) {
let doc = document.getElementsByTagName("body");
let styleTag = document.createElement("style");
styleTag.setAttribute("id", "styleTagDomTakePageNotes");
styleTag.innerHTML = styleDomTakePageNotes;
doc[0].insertAdjacentElement("afterbegin", styleTag);
}
};
/* Toggle notebox visibility on button click. */
const addToggleFunctionalityDomTakePageNotes = () => {
toggleBtnDomTakePageNotes.addEventListener("click", () => {
let isCollapsed = noteContainerDomTakePageNotes.getAttribute("data-collapsed");
if (isCollapsed == "false") {
noteContainerDomTakePageNotes.setAttribute("data-collapsed", "true");
toggleBtnDomTakePageNotes.innerHTML = "o";
} else {
noteContainerDomTakePageNotes.setAttribute("data-collapsed", "false");
toggleBtnDomTakePageNotes.innerHTML = "x";
}
});
};
/* Add drag functionality to move notebox anywhere on page. */
const addDragFunctionalityDomTakePageNotes = () => {
noteContainerDomTakePageNotes.addEventListener("mousedown", (e) => {
if (e.target === toggleBtnDomTakePageNotes || e.target === noteContainerDomTakePageNotes) {
isDraggingDomTakePageNotes = true;
offsetXDomTakePageNotes = e.clientX - noteContainerDomTakePageNotes.offsetLeft;
offsetYDomTakePageNotes = e.clientY - noteContainerDomTakePageNotes.offsetTop;
noteContainerDomTakePageNotes.style.cursor = "grabbing";
}
});
document.addEventListener("mousemove", (e) => {
if (isDraggingDomTakePageNotes) {
noteContainerDomTakePageNotes.style.left = (e.clientX - offsetXDomTakePageNotes) + "px";
noteContainerDomTakePageNotes.style.top = (e.clientY - offsetYDomTakePageNotes) + "px";
}
});
document.addEventListener("mouseup", () => {
if (isDraggingDomTakePageNotes) {
isDraggingDomTakePageNotes = false;
noteContainerDomTakePageNotes.style.cursor = "move";
}
});
};
/*********************************************************************************************
MAIN FUNCTION
*********************************************************************************************/
function runDomTakePageNotes() {
/* Add the styling for bookmarklet. */
addStyleTagDomTakePageNotes();
/* Add notebox and toggle button to page. */
addNoteBoxDomTakePageNotes();
/* Add toggle functionality to button. */
addToggleFunctionalityDomTakePageNotes();
/* Add drag functionality to move notebox. */
addDragFunctionalityDomTakePageNotes();
}
/* Call main function. */
runDomTakePageNotes();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment