The heaviest Static HTML site ever, but with ponies!
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
images
js
README.md
flexslider.css
gallery2.html
index.html
style.css

README.md

MLP-JQuery-Testing-Playground

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