This is off-topic for a PG forum but I’m at a loss to get this script to work and hope someone with more savvy than I have can help me.
I found this script on the Internet which creates buttons that increases/decreases the page’s font size but the ‘decrease’ button does not work and I cannot figure out how to get it to return the text to its smaller size. Any suggestions how to modify the code below so the ‘decrease’ button returns the font size to its CSS-set default setting? Or even better, is there any way to accomplish this using a PineGrow module or component?
Take a look at answer 2 on this page. I added this to the Bootstrap Starter Template and it worked. It won’t work within Pinegrow, but it works when previewing the page in a browser. Also, if you’re using Bootstrap, be advised that Bootstrap has set font sizes for certain classes, so you would need to override those settings to have any kind of “global” font change.
Just out of curiosity, why do you want people to be able to change the font size on your website? I remember this being kind of a thing way back when pages were built with little more than HTML and frames, but now that we have CSS and media queries, you can pretty much create an optimum layout for any size device.
Another thing you can do is use the viewport width property to dynamically change the font size as the size of the window changes.
Exactly what I was looking for (strange this solution didn’t show up in any of my Google searches). Like you say, it works perfectly.
The site I’m building is an information site for the elderly (statecollegedev.com/gettinon) and I have been asked if there was a way for a visually impaired reader to increase the font size for certain pages. That’s why the “old-fashioned” way of allowing the user to resize the font would be very handy. I just needed to find an old-fashioned implementation that will work for this site. I will implement this tool on the pages the sponsor chooses (which is a NPO, so I volunteer my time).
Again, a 1000 ‘thank-yous’ to you and to @Rob (This forum is great!)
On which level is the awareness of CMD- +/- (CTRL- +/-), especially by those requiring this basic “browsing knowledge”? I mean - especially elder people struggle with font-sizes on so many other sites as well, don’t they? What is their strategy? Searching for a button (which they probably cannot see by default)?
This sounds so lame, literally.
It’s “the silver surfer is stupid!” mentality. I think (or hope) that especially elder people are much more prepared (and used) to the web as it was 10 years before. They learned, that a page can be scrolled to reach more content than just being presented on the visual part of the screen (do you remember the discussion “people don’t scroll” and the scary “all has to fit on screen” solution?).
And they know at least one trick, zooming into the page for better readability.
In my experience, it’s not just elderly people, but ordinary, average people who are unaware of pretty much anything beyond the immediate surface when it comes to technology. I’ve met people who have never even clicked on the menu in a browser. All they know is the forward, backward and home buttons. I’ve met people who’ve never used the right mouse button on their computers. Heck, think of how many millions of VCRs spent decades with their clocks flashing “12:00” because people couldn’t read a page in a manual to set the clocks.
I agree that using CTRL +/- is probably the simplest solution for most people if they’re having trouble seeing the text on websites, especially since it’s a universal solution for all websites they’ll encounter. The question is, is it easier to explain this to people, or to implement a font sizing feature on a website?
Personally, if I was going to offer a way to change the text size for people on a site, I would probably just have three large, clear links/buttons labeled “Text Small” “Text Med” “Text Lg” rather than have buttons that change the size by increments.
Beneath the missing mouse-handler on the +/- Reset links, this page is using (f*****g) iFrames (being no reason at all for them though.
But more of interest is the result?
Yep - cutting-off the bottom edges! And now the question: How to get a local element (div) to grow with remote content? I have no idea - and am happy not having to mind about it.
Having a usability/capability to address accessibility (e.g., consider Section 508) far outweighs its omission because of perceived user ignorance, I believe… especially when the site’s sponsor/owner requests the capability.
Anyone who is visually impaired and relies on a site’s capability of enlarging the text size either probably already knows about the CMD +/- keyboard taps or using the finger-pinch on touch screens. Those affected would have (at least should have) access to usability support if using the Internet is critical to their quality of life.
Ooops… thanks for bringing this up, @Printninja. I forgot to change the iFrame height to ‘auto’ so the enlarged text can be scrolled. I’m using a javascript code that @Rob refered me to earlier… works slick. (I have no idea how to do this in ‘plain HTML’)
I don’t have any issue with the font % – what’s happening on your computer with “…making the font render poorly”? Is it unreadable? I’ve tried it on my Macbbook, iPhone, Lenovo PC/Windows10, and Linux devices. All seem fine.
re: (F*****g) iFrames…
The only way I know to have selected panels display by clicking on a button is the use of iFrames… which really doesn’t fit in with Section 508 standards. I’d love to learn an alternate method that would replace the functionality of iFrames and avoid the many issues of how they display remote content. Can you refer me to a tutorial that will help me learn an alternate to the use of iFrames, @Thomas?
You basically need something like this. Of course this is completely unstyled, but it provides the basic functionality you’re looking for. You definitely want to avoid iframes at all costs. Since you’re just showing ordinary content, you could do this with standard bootstrap responsive components and that would also solve your problem with the height of the div changing when the text is enlarged.
Thanks for the demo link @Printninja. However this is not quite what I need.
Do you know of a way to display a page’s content on other pages by clicking a button or a link without actually including the content on the page (i.e., using a show/hide technique)?
I will be adding 5-6 more pages to the site where I’ll be reusing the same panels that display on the homepage… using the same button-effect that is used on the homepage. So I’d like to have the content pages as ‘includes’, as separate, stand-alone pages that can be called up and displayed on multiple pages. The iFrame makes this a simple process without having to add all the content on each of the new pages, keeping their file sizes and load-times down.
And before you go, here you are, check this out.
I just had a quick look… using google and looked for
How to dynamically add content to a web page when clicking a button
This uses Jquery (more goodness to learn) and has a demo there if it floats your boat
It also uses hashtag so…if allows you to use the Forwards and backwards keys/whatever for accessibility navigation.
TADA!
I give. you… good ol’ Chris Coyers work.
this is a good place to hang out and learn stuff.
N.B
Even this is 6 years old and I might get spat at for listing it, but its still not iFrames and looks rather elegant and I think it fits your required SSI (server side includes) sort of behaviour and avoids DRY (Don’t Repeat Yourself.)
give it a go or wait until the other grown ups appear in the room.
But whatever, just carry on making stuff! Sure some of it might be a bit wrong by modern standards but HEY! then you know, and you get to do it all again, the new way
And learn in the process.
I learn every time somewhere asks a question … and I tend to learn even more when I try answering.
Every day a school day
oh! really? ok I was in Uni back then doing my techie/webby/comms Degree and I hadn’t even heard of jQuery! …in fact , I still haven’t really used javascript much.
but I do know I have just spent 5 hours, cloning a 30GB hard drive to a 60Gb one for my powerbook g4 ,just for it to tell me the disk is failing with Disk Utility.
Gah!
4am, time for bed, said Zebedee have fun with your design @randyrie
As an aside @schpengle, my TCO (Total Cost of Operation – in time and money) has dropped to a miniscule point since I began using Apple devices. My Macbook Pro just turned 5 years old and I haven’t spent a dime of money or time on it and am terribly spoiled by never having to do any performance tweaks, security updates (like every 5 minutes l on my Windows laptop) or de-fragmentations. I open the lid and it just works - ALWAYS. (Hope I haven’t hexed it by my bragging…)
More importantly, I just re-posted the opening pages, re-done with simple HTML rather than iFrames… initial load times are a bit longer from click-to-click but this technique does give me a higher Section 508 score since all the text on the page can now be read by a text reader. Check it out and let me know if I’ve improved things or have taken a step backward: https://statecollegedev.com/gettinon
