Closed TJScalzo closed 7 years ago
Yesss! I saw a feature like this on an author's website (scroll to the bottom) and thought it was a great touch.
The main problem I can see is that if you navigate to a different page the original font will be used. Somehow we'll need to store their choice of font. Maybe cookies?
yep, cookies are a good way to go for something like this.
I haven't done much with cookies aside from picoCTF but here's a resource I used that hopefully will help: http://www.quirksmode.org/js/cookies.html
@gisellegk Having read through that page, I think it'll work. I'll see if/when I'll be able to work on writing this.
I've got almost everything working. The main problem that I'm facing is actually the way that I change/check the font family.
function setFont() {
if (font != null) {
document.getElementsByTagName("body").style.fontFamily = font;
}
}
It looks like it should work. But it keeps throwing this error:
TypeError: undefined is not an object (evaluating 'document.getElementsByTagName("body").style.fontFamily = font')
column: 51
line: 75
The error is thrown right after style
and before .fontFamily
. from my googling I've found that that error probably means it can't find the element that's been specified. I'm not sure why that is though...
Do you think you could help me out @gisellegk? I'm stuck.
Never mind, @gisellegk, I've figured it out. This works:
function setFont() {
if (font != null) {
document.body.style.fontFamily = font;
}
}
Now all I need to do is add Open Dyslexic
as a font on the site and make sure the cookies work the way I'm pretty sure they do.
@TJScalzo glad you figured it out!
I think this would work well as a toggle switch. I'll look into it more.
I'm going to do this to toggle the font temporarily. Do you see anything wrong with how this'll work @gisellegk?
<input id="font-switch" onclick="toggleFont()" type="checkbox" />
function toggleFont() {
if (document.body.style.fontFamily = "Open Sans") {
font = "Open Dyslexic";
} else {
font = "Open Sans";
}
setFont();
setFontSwitch();
}
function setFontSwitch() {
if (font == "Open Dyslexic") {
$( "#font-switch" ).prop( "checked", true );
} else {
$( "#font-switch" ).prop( "checked", false );
}
}
@TJScalzo is "font" defined as a global variable/outside of the two functions?
it might be better off if you make font a local variable in toggleFont and pass it as a parameter in setFontSwitch.
I'd say try it! it will probably work, and it's fine if you ignore the above suggestion, i just usually like to avoid global variables, i guess for security and namespace reasons but it's not particularly critical in this situation lol
@gisellegk yeah, font
's used as a global variable. It's mainly to make it easy for me to test everything. I also have it as a global variable because setFontSwitch
will be run when the page loads to set the toggle switch correctly based on what font
is elsewhere in the code. I'm not sure how easy it'd be to make font
into a local variable and still make it possible for toggleFont
to detect how font
has been set. I'll probably attempt to change it to a local variable once everything else is working properly.
@TJScalzo Is it possible just to get it from the CSS?
like here
(document.body.style.fontFamily = "Open Sans")
also == not = but you might have already caught that lol
@gisellegk That'd definitely work. I didn't do it that way because I was worried about how much it'd add to load time. I assume it won't be much. I'll try and make it work with font as a local variable.
Hurray! I did it @gisellegk!
yay! btw, i can't see the toggle button for some reason. I'm on chrome on ubuntu. IDK
On Sat, Jun 4, 2016 at 9:43 PM, Tim Scalzo notifications@github.com wrote:
Hurray! I did it @gisellegk https://github.com/gisellegk!
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-223788116, or mute the thread https://github.com/notifications/unsubscribe/AC4tv-4W3lR8ibYyg2KuP-s_-ai6pq8Pks5qIinBgaJpZM4ImKar .
Giselle Koo
@gisellegk I've commented it out for right now because I don't want things being seen yet. I'm still working on styling the switch to look nice, then I'll make things public. Another thing that's commented out is the code that has fontCookieCheck
run when the page loads.
OK, cool, got it!
On Sat, Jun 4, 2016 at 10:01 PM, Tim Scalzo notifications@github.com wrote:
@gisellegk https://github.com/gisellegk I've commented it out for right now because I don't want things being seen yet. I'm still working on styling the switch to look nice, then I'll make things public. Another thing that's commented out is the code that has fontCookieCheck run when the page loads.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-223788660, or mute the thread https://github.com/notifications/unsubscribe/AC4tvycBiNaogj7EBydByDE33Jm7DYlFks5qIi36gaJpZM4ImKar .
Giselle Koo
I've made this: X It's much easier to work with and is simpler. It's all CSS!
@gisellegk basically everything's done with this. I'd love it if you could look everything over and see if you can find any problems. You'll just need to un-comment out the toggle and button in the footer and the line at the bottom of change-font.js for everything to work. Let me know if there are any problems at all.
The last thing I'd like to try and do is make another css file that alters styles and spacing when the font is different because everything ends up looking a little off when Open Dyslexic is being used.
@gisellegk I've set up this page to serve as a place to test everything out. I was going to use /website-testing but since it's a different repo Jekyll layouts and includes work differently.
hi i'm just checking out that test page, is it supposed to have the modals/popups or is it just the toggle button?
The toggle button seems to work fine (of course I can't switch pages) but the debug cookie buttons aren't doing anything
wait-- i got the pop up to come up and IDK what I did.
On Tue, Aug 2, 2016 at 7:53 PM, Tim Scalzo notifications@github.com wrote:
@gisellegk https://github.com/gisellegk I've set up this page http://farmingtonrobotics.org/test/ to serve as a place to test everything out. I was going to use /website-testing https://github.com/team178/website-testing but since it's a different repo Jekyll layouts and includes work differently.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-237086637, or mute the thread https://github.com/notifications/unsubscribe-auth/AC4tv27VPQ9k_dciAdwglvZi9qLrPR67ks5qb9hrgaJpZM4ImKar .
Giselle Koo
OK now I refreshed the page and the cookie says "true" but the font is regular? I need to check this on my laptop...
On Thu, Aug 11, 2016 at 4:21 PM, Giselle Koo gisellegk@gmail.com wrote:
hi i'm just checking out that test page, is it supposed to have the modals/popups or is it just the toggle button?
The toggle button seems to work fine (of course I can't switch pages) but the debug cookie buttons aren't doing anything
wait-- i got the pop up to come up and IDK what I did.
On Tue, Aug 2, 2016 at 7:53 PM, Tim Scalzo notifications@github.com wrote:
@gisellegk https://github.com/gisellegk I've set up this page http://farmingtonrobotics.org/test/ to serve as a place to test everything out. I was going to use /website-testing https://github.com/team178/website-testing but since it's a different repo Jekyll layouts and includes work differently.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/team178/team178.github.io/issues/113#issuecomment-237086637, or mute the thread https://github.com/notifications/unsubscribe-auth/AC4tv27VPQ9k_dciAdwglvZi9qLrPR67ks5qb9hrgaJpZM4ImKar .
Giselle Koo
Giselle Koo
@gisellegk The only thing that will actually be on the site is the toggle switch. The function run by "Check for Cookie" will be run every time the page loads (it doesn't right now because it'd also affect the main site). If the cookie checker doesn't find a cookie it should show a modal of some kind asking you to set the font. If it sees a cookie it sets the font and the toggle to that font and doesn't display a popup. I removed the second modal that sets the font settings and made the toggle switch save to the cookie. This means you'll only see a modal if you don't have a cookie on your computer. (Hence the "Remove Cookie" button allowing you to remove the cookie.)
Things left to do:
Basically, add a button somewhere that sets all of the fonts on the site to Open Dyslexic. I feel like it'd be an awesome way to make the site more accessible to more people. We could use code along the lines of:
(BTW: I made up this code using stuff from here)