Trying to make a dropdown menu for changing between font families - ☔︎ ∙ I need Help! - MelonLand Forum

Welcome, Guest. Please login or register. - Thinking of joining the forum??
October 18, 2024 - @360.06 (what is this?)

Forum activity rating: Three Stars

Three Stars

Posts: 27/1k.beats

Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts

News:

Reminder: Forum messages stay readable for years! Keep yours high quality!

Halloween Topics! Gfx + Costumes, Decor + Crafts, Prep, Horror Movies, Spooky Songs!

~ E-Zine #2 is out now!

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 631 times)

asterhalloween
Casual Poster ⚓︎

the beauty of experiencing the world

⛺︎ My Room
SpaceHey: Friend Me!
iMood:

mythicalwaters

WWW

First 1000 Members!

Trying to make a dropdown menu for changing between font families

« 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

Love makes the world go round!

TheFrugalGamer
Sr. Member ⚓︎

⛺︎ My Room
Itch.io: My Games

WWW

First 1000 Members!

Pocket Icelogist!

Re: Trying to make a dropdown menu for changing between font families

« 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: 287 Views: 29374	October 09, 2024 @729.26 by TheFrugalGamer
	xX Welcome to the Forum & Rules Xx Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions	Replies: 0 Views: 6649	November 14, 2021 @627.84 by Melooon
	chiptune maker! Started by cinniBoard © ∙ Music Room	Replies: 7 Views: 2628	October 03, 2024 @483.26 by xwindows

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!

TamaNOTchi