Adding a "splash screen"
In case you hadn't heard the term somehow, a 'splash screen' is the screen you see before a program loads. It's usually small, and nothing more than the program's logo and maybe a progress bar. I want to add one, well, something like it at least, to Bookworm. Why, after all this is not a very complicated program? Well, since I'm using jQuery UI for my styling I layout everything in HTML and then run some JavaScript to format it all. This is causes a moment when the page loads and the text isn't styled. I got some screenshots of it...
I started playing with GitHub to learn about version tracking, so you can see a little green bar in the screenshots where I added new code...
This was easy enough, and seemed like a simple idea, but it didn't quite turn out how I expected...
Well, it was actually pretty easy, I just removed what I had done before. I had set a min-height for the tabs div, which I deleted and everything worked perfectly after that. Okay, so I made the problem myself :) At least it was an easy fix. I did add one new thing, I added a 50px margin-bottom to the main <body> element. That's because I like how the button to "Load Another Document" is at the bottom of the screen and had the border for the tabs div running through it. It's a silly little stylistic thing, but it's hard to see at the bottom of the screen. Which is hard to describe, so here's a before and after set of screenshots...
Disabling the Save Notes button
Something you can see in the screenshots above is how the "Save Notes to File" button is enabled even though no notes have been loaded. It seems silly to save a blank file as notes, so I want to set that button to be disabled at startup and have the function that loads the notes enable it. I made that button in plain HTML and while I can change it's state in HTML I think I'm going to go ahead and make it a jQuery UI button instead, and add a little icon of a floppy disk to it. I like working with jQuery and jQuery UI to learn how they work, it might even be easier to do a lot of this in plain HTML/ CSS (the tabs, accordion and buttons) but I'm going to focus on doing as much as I can with jQuery UI. I can always re-write it later, which would be another learning experience :)
So, I'm going to add the button, it's icon and set it to disabled in the function that loads the UI elements...
Then it's a line in the function that loads a notes file to enable the save button...
And here's how it looks...
While I'm at it, why not change the "Load Another Document" button as well?
The Textarea Width
This has bugged me, I set the "cols" attribute on the <textarea> just following what I was reading at the time - but I don't like how it's not the full width of the screen. So I'm changing that to be 95% width in CSS. Looks better now.
Light and Dark Themes
While I'm in CSS there's one last thing I'm going to change right now. By default everything's black text on a white page, which is fine but I do sometimes like to read in the dark (I know it's bad for my eyes). So I want to make a dark and light themes that can be changed. To do this I'm going to make a new tab called "settings" and put some buttons that will change a CSS class on the <body> element (which everything should inherit from).
So I need to do a few things. First I need to add a new section to the tabs widget for the settings. Then I need to add some buttons. The easiest way I can think of to switch themes is to use jQuery's "toggleClass" method, which will take a list of classes (in this case "light" and "dark") and will then remove the class already there and add the class not there. I could make an if-then block for each, but this is easier. Then I also need to add the classes to the CSS stylesheet, and the new settings theme buttons to the jQuery UI setup function, with the "light" button disabled to start (since that'll be the default style). Which led to some typing and then this...
So... I forgot that my simple "toggleClass" didn't change the light button to be enabled. I also didn't realize the jQuery UI widgets wouldn't inherit from the <body>'s style. Okay... mistakes were made... I did want to add the ability to change the style of the jQuery UI buttons, to have something like green instead of the default blue. So apparently I need to look at how to change all that styling...
Which I am going to do later. Right now I'm out of my time to work on this, so I'll pick it up from here for next week. I've got the updated file (somewhat broken as it currently is :) that you can download here. Until next week!
No comments:
Post a Comment