Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 28, 2024 - @506.23 (what is this?)
Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :dive: Are u having fun?? :dive:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Make side bar content apply on every page?


« previous next »
Pages: [1] Print
Author Topic: Make side bar content apply on every page?  (Read 588 times)
zj
Jr. Member ⚓︎
**


StatusCafe: zeejay
iMood: zeejay

View Profile WWW

First 1000 Members!Joined 2023!
« on: October 08, 2023 @529.84 »

I use my side bar as a navigation bar, with links to all my pages. My problem is, every time I want to add something new to it, I have to manually add the new thing to every page on my site :') .. So, I'm looking for a way to make any change apply to every iteration of the sidebar.

Evey source I've found only had tips for how to create a brand new side bar, but I would prefer to use my pre-existing sidebar  :ok:

Any advice is greatly appreciated!  :transport:


This is the code:
Spoiler
Code
<aside id="rightSidebar">
            
            
            <center><img class="blinkie" src="/gifs/be-kind.webp" alt="be kind to your computer"></center>
            <center><img class="blinkie" src="/gifs/internet loser.webp" alt="internet loser"></center>
            <center><a href="https://www.imood.com/users/zeejay"><img src="https://moods.imood.com/display/uname-zeejay/fg-fceaf/bg-191970/trans-1/imood.gif" alt="The current mood of zeejay at www.imood.com" border="0"></a></center>
 <h3>Navigation</h3>
            <ul>
                <li><a href="https://zj.neocities.org/">Home</a>
                </li><li><a href="https://zj.neocities.org/about">About</a></li>
                <li><a href="https://hizj.123guestbook.com/">Guestbook!</a></li>
                <li><a href="https://zj.neocities.org/stamps">Stamp collection</a></li>
                <li><a href="https://zj.neocities.org/scrapbook">Scrapbook</a> <img src="https://zj.neocities.org/gifs/updatedts.gif" alt="updated!" width="50px"></li>
                <li><a href="https://zj.neocities.org/resources">Resources</a> <img src="https://zj.neocities.org/gifs/newts.gif" alt="new!" width="25px"></li>
                <li><a href="https://zj.neocities.org/neighbours">Internet neighbours</a> <img src="/gifs/newts.gif" alt="new!" width="25px"></li>
            </ul>
            
      
       <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=zeejay" defer></script>
       <br>
       <center><a href="https://tamanotchi.world/7460c"><img src="https://tamanotchi.world/i2/7460" alt="It's tamaNOTchi! Click to feed!"></a>
       <br>This is Kurt! Click to feed him :3</center>
       
       <h3>Webrings!</h3>
      <center><p><a href="https://hotlinewebring.club/zj/previous" target="_blank">←</a> <a href="https://hotlinewebring.club/" target="_blank">hotline webring</a> <a href="https://hotlinewebring.club/zj/next" target="_blank">→</a></p></center>
      <center><p><a href="https://webring.dinhe.net/prev/zj.neocities.org">←</a> <a href="https://webring.dinhe.net/">retronaut ring</a> <a href="20230127205717/https://webring.dinhe.net/next/zj.neocities.org">→</a></p></center>
      <center><p><script src="https://nuthead.neocities.org/ring/ring.js"></script></p></center>
      
      <center>
      <object id="melonland-surf-club" data="https://melonland.net/surf-badge.svg?fill=#fceaff" type="image/svg+xml" style="width: 100px; height: 100px;"></object>
      </center>
                  
[close]
« Last Edit: October 08, 2023 @547.29 by zj » Logged

why dontcha have a peek at my site :eyes:
(23 years old)
this is Kurt ↓
gif of a ""tamaNOTchi". Click to feed!
click to feed him :3
TheNothingMonster
Full Member ⚓︎
***


Hey psst! Wanna see something spooky?

StatusCafe: thenothingmonster

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #1 on: October 08, 2023 @585.38 »

There's a very basic way of doing this with Javascript. Don't worry, it's nothing complicated!

Make a new .js file and name it whatever you want. For this example, I'm going to call it sidebar.js.
This is where your sidebar's HTML code will be stored & printed. To achieve that, we will create a variable which will contain your sidebar's code in a string and later a function which will print out the contents of that variable.

Code
let sidebarHTML = `Sidebar content will go in here.`;
document.write(sidebarHTML);

Adding in your sidebar's code into the variable's string, it will look something like this:

Code
let sidebarHTML = `
<aside id="rightSidebar">
	            
	            
	            <center><img class="blinkie" src="/gifs/be-kind.webp" alt="be kind to your computer"></center>
	            <center><img class="blinkie" src="/gifs/internet loser.webp" alt="internet loser"></center>
	            <center><a href="https://www.imood.com/users/zeejay"><img src="https://moods.imood.com/display/uname-zeejay/fg-fceaf/bg-191970/trans-1/imood.gif" alt="The current mood of zeejay at www.imood.com" border="0"></a></center>
	 <h3>Navigation</h3>
	            <ul>
	                <li><a href="https://zj.neocities.org/">Home</a>
	                </li><li><a href="https://zj.neocities.org/about">About</a></li>
	                <li><a href="https://hizj.123guestbook.com/">Guestbook!</a></li>
	                <li><a href="https://zj.neocities.org/stamps">Stamp collection</a></li>
	                <li><a href="https://zj.neocities.org/scrapbook">Scrapbook</a> <img src="https://zj.neocities.org/gifs/updatedts.gif" alt="updated!" width="50px"></li>
	                <li><a href="https://zj.neocities.org/resources">Resources</a> <img src="https://zj.neocities.org/gifs/newts.gif" alt="new!" width="25px"></li>
	                <li><a href="https://zj.neocities.org/neighbours">Internet neighbours</a> <img src="/gifs/newts.gif" alt="new!" width="25px"></li>
	            </ul>
	            
	      
	       <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=zeejay" defer></script>
	       <br>
	       <center><a href="https://tamanotchi.world/7460c"><img src="https://tamanotchi.world/i2/7460" alt="It's tamaNOTchi! Click to feed!"></a>
	       <br>This is Kurt! Click to feed him :3</center>
	       
	       <h3>Webrings!</h3>
	      <center><p><a href="https://hotlinewebring.club/zj/previous" target="_blank">←</a> <a href="https://hotlinewebring.club/" target="_blank">hotline webring</a> <a href="https://hotlinewebring.club/zj/next" target="_blank">→</a></p></center>
	      <center><p><a href="https://webring.dinhe.net/prev/zj.neocities.org">←</a> <a href="https://webring.dinhe.net/">retronaut ring</a> <a href="20230127205717/https://webring.dinhe.net/next/zj.neocities.org">→</a></p></center>
	      <center><p><script src="https://nuthead.neocities.org/ring/ring.js"></script></p></center>
	      
	      <center>
	      <object id="melonland-surf-club" data="https://melonland.net/surf-badge.svg?fill=#fceaff" type="image/svg+xml" style="width: 100px; height: 100px;"></object>
	      </center>
`;
document.write(sidebarHTML);

And now, wherever you want to include your sidebar in your HTML pages, just add this little snippet:

Code
<script src="path_to_the_file/sidebar.js"></script>

Make sure to change path_to_the_file into, well, the path which leads to sidebar.js's location in your site files.
And, of course, if you have given the file your own name, make sure to change that as well.

If something was made unclear, feel free to ask! :grin:
« Last Edit: October 08, 2023 @587.44 by TheNothingMonster » Logged

~~~~~~~~~~~~
Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #2 on: October 08, 2023 @781.52 »

Its important if you are doing a JavaScript based sidebar that you add a <noscript> alert that informs visitors that the site needs JavaScript to function! Quite a lot of web revival explorers don't allow JavaScript by default, so they could visit a site and have no clue how to navigate it if theres a JS dependancy!

For that reason Id always recommend putting your nav bars in an iFrame or using a frameset layout - those have downsides too; but with a bit of tweaking they work for just about everyone!

To do this with an iFrame - you'd put your nav code in a separate nav.html file, and then put an iframe on each page showing the nav.html; then you use target="_parent" on your nav links to make them change the whole page ^^
« Last Edit: October 08, 2023 @783.74 by Melooon » Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
larvapuppy
Jr. Member ⚓︎
**



View Profile WWW

First 1000 Members!Joined 2023!
« Reply #3 on: October 08, 2023 @845.15 »

This is great info, thanks TheNothingMonster and Melooon! :grin: I just changed my navbar to an iframe on all of my pages... this makes things so much easier  :cheerR:
Logged

the end of an era, one starts anew
PurpleHello98
Full Member ⚓︎
***


'Cause I'm your girl, hold me baby <3

SpaceHey: Friend Me!
StatusCafe: purplehello98

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: October 08, 2023 @888.95 »

Its important if you are doing a JavaScript based sidebar that you add a <noscript> alert that informs visitors that the site needs JavaScript to function! Quite a lot of web revival explorers don't allow JavaScript by default, so they could visit a site and have no clue how to navigate it if theres a JS dependancy!

For that reason Id always recommend putting your nav bars in an iFrame or using a frameset layout - those have downsides too; but with a bit of tweaking they work for just about everyone!

To do this with an iFrame - you'd put your nav code in a separate nav.html file, and then put an iframe on each page showing the nav.html; then you use target="_parent" on your nav links to make them change the whole page ^^

Some people may have problems with iframes not reflecting new changes, and have to reset their caches to see new additions. Because of this, framesets, in my humble opinion, are easier, although there is a way to force reloads every so often, which I used when I had an iframe sidebar to force it to refresh every 30 seconds, which was a good enough fix for me. To do this, include this

Code
<meta http-equiv="refresh" content="30" >

inside the <head></head> tags on your sidebar's HTML page.
Logged

"As she realized what might have been, she grew to be thankful for what was."
-Elizabeth Gaskell, North and South



Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #5 on: October 08, 2023 @898.41 »

Some people may have problems with iframes not reflecting new changes,

Oh I don’t disagree; that’s why I use frameset on my site; iFrames can be a MASSIVE pain; but frameset just has too many complications of it’s own; such as needing a JS script to fix urls, not working perfectly for mobile, being really poorly documented these days (we have a wiki page for it though) - it’s really hard to recommend it to someone casually without explaining all that  :ohdear:

That’s a clever fix thought! I’ll have to test it some time; I guess you could also have a JS that updates the iframe url with a timetamped address like nav.html?v=37474 - that way if someone has no JS that nav will work (even if it’s an outdated nav) and if they have JS it’ll be perfect!
« Last Edit: October 08, 2023 @899.92 by Melooon » Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
TheFrugalGamer
Sr. Member ⚓︎
****


Itch.io: My Games

View Profile WWW

First 1000 Members!Pocket Icelogist!Joined 2022!
« Reply #6 on: October 10, 2023 @602.13 »

I should mention that if anyone does decide to go the JS route, it should probably be standard to add a link at the bottom of your page to a sitemap. That way you don't have to update anything but the sitemap page as things change, but anyone who has JS disabled will be able to navigate to it and still get around your site.

It'll still be an extra step for them, but you know at least they're not lost.
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

chiptune maker!

Started by cinniBoard © ∙ Music Room

Replies: 6
Views: 2195
Last post March 08, 2023 @308.04
by Gans
My new side project: status.cafe

Started by m15oBoard ☆ ∙ Showcase & Links

Replies: 27
Views: 5271
Last post May 05, 2024 @882.11
by Paprika
What are some of your favorite 404 pages?

Started by Icey!Board ✁ ∙ Web Crafting

Replies: 16
Views: 3784
Last post May 07, 2024 @217.47
by Icey!

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi