Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 27, 2024 - @543.07 (what is this?)
Forum activity rating: Four Star Posts: 80/1k.beats 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!
| | | |-+  Trying to make a dropdown menu for changing between font families

 « previous next »
Pages: [1] Print
Author Topic: Trying to make a dropdown menu for changing between font families  (Read 303 times)
asterhalloween
Newbie ⚓︎
*


the beauty of experiencing the world

SpaceHey: Friend Me!
iMood: mythicalwaters

View Profile WWW

First 1000 Members!Joined 2023!
« on: December 01, 2023 @666.27 »
okay so... I am trying to make a settings page to change various aspects of my website, mainly appearance wise. I've already gotten a toggle working for theme selection (dark/light mode) but I also want to have a dropdown menu for selecting between different font families for the entire website (and hopefully custom cursors and eventually even cursor trails too, though that's for a different day O_o)
SO basically, I've got the actual dropdown menu in place with values and id's and such, but I have pretty much no idea what to do for the JavaScript in regard to setting the variables to the selected values.
I'm planning on having the font-family property use a var(--font), but unlike the theme management (linked above) I want it to only be a lone variable controlled by the selected dropdown value (and remembered using localStorage, of course) rather than a class that sets the variables, if possible. (I don't particularly mind if I need to make classes for each font variable if it's necessary, but if there is a way to do it without that I would prefer it)
Apologies if this topic is similar to others, I'm still fairly new to using forums and couldn't find an answer to my question in here or by looking it up ^_^"
Logged
:4u: Love makes the world go round! :transport:
TheFrugalGamer
Sr. Member ⚓︎
****


Itch.io: My Games

View Profile WWW

First 1000 Members!Pocket Icelogist!Joined 2022!
« Reply #1 on: December 01, 2023 @896.24 »
I believe you can just target the body tag and it should change everything that you haven't already set explicitly. See this JS Fiddle here:

https://jsfiddle.net/6uqLm3za/

I'm not sure how you'd save it from page to page though since I've never actually had to do that before.

HTML:
Code
<html>

<body>
  <p>
    This text should change once you've changed the dropdown below.
  </p>
  
  <p>
    Change font here:
  </p>

  <select id="fontToggle" onChange="changeFont()">
    <option value="0" selected="selected">None</option>
    <option value="courier">Courier</option>
    <option value="comic">Comic Sans</option>
    <option value="roman">Times New Roman</option>
  </select>
</body>

</html>

Code
function changeFont(){
var drop = document.getElementById("fontToggle");
var fchoice = drop.options[drop.selectedIndex].value;
var family = "";

switch(fchoice){
	case "courier":
  	family = "Courier";
    break;
	case "comic":
  	family = "Comic Sans MS";
    break;
	case "roman":
  	family = "Times New Roman";
    break;
}

console.log(family);
document.body.style.fontFamily = family;
}
Logged
| Find me on the Fediverse
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Forum feature requests and Ideas

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

 Replies: 250
Views: 21328 		Last post Today at @132.72
by BUTCHBONEZ
xX Welcome to the Forum & Rules Xx

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

 Replies: 0
Views: 5481 		Last post November 14, 2021 @627.84
by Melooon
chiptune maker!

Started by cinniBoard © ∙ Music Room

 Replies: 6
Views: 2063 		Last post March 08, 2023 @308.04
by Gans

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