Trying to create a button to change font size, Trying to create a button to change my font size using html and js |
Trying to create a button to change font size, Trying to create a button to change my font size using html and js |
markee |
Nov 1 2021, 11:09 PM
Post
#1
|
Group: Members Posts: 4 Joined: 4-October 21 Member No.: 28,131 |
Hi, I'm not sure if I'm posting this in the correct place. I am trying to create a button that allows a user to increase the font size and decrease the font size of a page. I'm am doing this with an HTML page and a javascript page, which I have never done before.
This is what I have at the beginning of the body section on my HTML page: <section> <p class=''>Change the font size below</p> <button class="increase">+</button> <button class="decrease">-</button> </section> I also have this at the end of my body section: <script src="main.js"></script> This is what my entire javascript page consists of: $(document).ready(function () { var changing_font_size = new Array(".change"); changing_font_size = changing_font_size.join(","); $(".decrease").click(function () { let originalFontSize = $(changing_font_size).css("font-size"); let changed_sized = parseFloat(originalFontSize, 10) - 0.8; $(changing_font_size).css("font-size", changed_sized); }); $(".increase").click(function () { let originalFontSize = $(changing_font_size).css("font-size"); let changed_sized = parseFloat(originalFontSize, 10) + 0.8; $(changing_font_size).css("font-size", changed_sized); }); }); If anyone knows why nothing happens when I click these buttons please help |
Christian J |
Nov 2 2021, 02:58 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
I'm am doing this with an HTML page and a javascript page, which I have never done before. Generally I would advice against a "change font-size" feature, it's much easier for both you and the user to just use the browser's own Zoom functionality. But let's take look at it anyway! Have you written the jQuery yourself, or found it on the web? I don't do jQuery (just a little javascript), but some guesses follow: QUOTE CODE var changing_font_size = new Array(".change"); I think the array above is meant to contain the CLASS selectors that the font-size changing script is meant to affect. So at a minimum, there should be an HTML element with the CLASS "change", as well as a corresponding rule in the stylesheet. QUOTE CODE let originalFontSize = $(changing_font_size).css("font-size"); let changed_sized = parseFloat(originalFontSize, 10) - 0.8; The above seems to retrieve the "font-size" value from the CLASS in the stylesheet, and decrease it by some amount. But wouldn't the size unit get lost then? Also I don't know if parseFloat() can take two parameters ("originalFontSize, 10"), that's not mentioned in the references I checked. |
markee |
Nov 2 2021, 04:44 PM
Post
#3
|
Group: Members Posts: 4 Joined: 4-October 21 Member No.: 28,131 |
I removed '10' and the button magically started working
|
pandy |
Nov 2 2021, 09:14 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Generally I would advice against a "change font-size" feature, it's much easier for both you and the user to just use the browser's own Zoom functionality. I don't agree. I would have said something similar 10 years ago, but since most browsers offer only the zoom function now and not text resizing, I think it at last is room for these buttons. No, I don't like page zoom. |
Darin McGrew |
Nov 3 2021, 03:32 PM
Post
#5
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE I don't agree. I would have said something similar 10 years ago, but since most browsers offer only the zoom function now and not text resizing, I think it at last is room for these buttons. No, I don't like page zoom. The browsers I've used have a minimum font size feature, but it's pretty well hidden if you don't know to look for it. |
pandy |
Nov 3 2021, 08:05 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
It's not the same. K-Meleon still has it, but I can no longer use the mouse wheel for that. Was so handy, CTRL+Scroll up/down.
|
Christian J |
Nov 3 2021, 08:23 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Nov 3 2021, 10:36 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
It's by keyboard only (or can it be remapped?) and it's page zoom, not text resizing.
|
Christian J |
Nov 4 2021, 07:44 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
No, I meant you need to tick the Preference checkbox where I indicated. Then Firefox will zoom text only. The actual zooming can be done with Ctrl+mousewheel.
|
pandy |
Nov 4 2021, 10:56 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Ah, I hadn't noticed that. Thanks.
|
Lo-Fi Version | Time is now: 21st May 2024 - 08:37 AM |