The heaviest Static HTML site ever, but with ponies!
This is where I'm teaching myself jQuery with stuff I'm going to actually use on client projects in some form. Because I use WordPress which is its own level of weirdness, I created a static HTML site to focus only on CSS and JQuery. And because I have to stare at it all day, it's My Little Pony: Friendship Is Magic themed. Because, obviously.
Are these the best code snippets evar? Probably not, I'm teaching myself. Can someone else learn something from them and/or find a better way? Sure! Which is why they're on GitHub
Here's what it contains so far:
- 100% height slider: resizes to fit the window, with text at the bottom
- Hidden Searchbar: expands on button click, collapses when you click outside the box
- Fixed Position Header:
- desktop mode, shrinks on scrolldown and expands again when you get to the top
- mobile mode, hides on scrolldown, expands again if you scroll up a little
- Expanding "more content" with articles and changing button text
- Responsive "Google Image" style gallery
- Dynamically calculate the number of images in each row on load (works) and resize (mostly) and wrap them in container DIVs
- Dynamically create a DIV underneath the row the image is located in
- Pull associated "additional content" into the DIV
- Switch content without animation between images of the same row
- Close and reopen additional content DIV when changing rows