Javascript tips at par with this jekyll

• Thi
• Automatically reload page if js file changes
• Add MathJax to website
• Anchor links hidden by fixed navigation
• Heading hover anchor links
• Back to top button
• Hide / Show box
• Click to enlarge photo
• Prevent default event
• Search + result + navigation
• Scrolling headings in TOC
• Fetch starred repository (JSON to ol)

Thi

Ref: 👉 Site: update briefs 👉 Note: magnific popup 👉 Note: jekyll inner links 👉 Note: secret recipes

Automatically reload page if js file changes

1. Install nodejs.
2. Install live-server using nodejs: npm install -g live-server.
3. cd to the project folder.
4. run live-server (accept all networks notification)
5. Browse: http://127.0.0.1:8080
6. Enjoy!

::: warning It may not reload the browser (it only detects the changes)! :::

Add MathJax to website

👉 Check the codes.

Anchor links hidden by fixed navigation

If you use table of content for posts in which links starting with # link to headings. After jumping, headings are usually hidden by the fixed navigation. Adding below script before </body> tag can solve the problem (change value 100 to change where the page jump).link

👉 Check the codes. Update 10/26/21: This method is not good. It works only if we click on an <a> tag which starts with # in the href. In the case of which inside <a> containing an <svg>, for example, it won’t work!

Heading hover anchor links

👉 Check the codes.link

Back to top button

Click and go back to the top of the page using javascript with smooth effect.

👉 Check the codes.

Hide / Show box

Auto hide / show the next div of the currently clicked div.

👉 Check the codes.

Advantage: We don’t need the id of content div, this method requires that div.hs__content comes right after div.hs__title, otherwise it won’t work!

Click to enlarge photo

If some photos on your page are too small and you wanna add a function in that users can click on the photo to enlarge it. This technique requires Bootstrap 4.

👉 Check the codes.

Prevent default event

Stop arrow key acts as usual,

window.addEventListener("keydown", function(e) {
	// space and arrow keys
	if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
		e.preventDefault();
	}
}, false);

If div_1 inside div_2, prevent actions in div_2 when performs on div_1 (check this example), use e.stopPropagation().

Search + result + navigation

• Auto close the result if losing focus.
• Cycling the result items with arrow up/down keys.
• Auto focus to the a tag of the title.

👉 Check the codes.

Scrolling headings in TOC

Follow the position of viewport, auto highlight heading in toc w.r.t the current heading on page

👉 Check the codes.

Fetch starred repository (JSON to ol)

Automatically fetch a list of Github starred repositories using Github API and display it under <ol> html tag.link

👉 Check the codes.

The following wiki, pages and posts are tagged with javascript