Welcome to the Sandbox

Widges, widgets, and more widgets...

This is where I play and experiment with new technologies, frameworks, and libraries. Here are some for your entertainment. :)

 

DOM

[Functional widgets ready for you to style.]

Cool Flyup Window
memory

Flexbox Sticky Footer
filter_vintage

Layered Slideshow
brightness_7

Search/Sort Responsive Table
track_changes

Animated Tab Viewer
explore

Smart Buttons
face

 

Ajax / JSON

~ Fetching JSON

Using the Google Books API

Show Top 6
Show All

~ Looping through a JSON array

 

var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', 'dogs-' + pageCounter + '.json');
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var ourData = JSON.parse(ourRequest.responseText);
      renderHTML(ourData);
    } else {
      console.log("We connected to the server, but it returned an error.");
    }

  };

  ourRequest.onerror = function() {
    console.log("Connection error");
  };

  ourRequest.send();
  pageCounter++;
  if (pageCounter > 3) {
    btn.classList.add("hide-me");
  }
});

function renderHTML(data) {
  var htmlString = "";

  for (i = 0; i < data.length; i++) {
    htmlString += "p" +
        data[i].name + " is a " + data[i].breed + " that likes to eat ";
        for (ii = 0; ii < data[i].foods.likes.length; ii++) {
        if (ii == 0) {
        htmlString += data[i].foods.likes[ii];
        } else {
        htmlString += " and " + data[i].foods.likes[ii];
        }
        }
        htmlString += ' but hates ';
        for (ii = 0; ii < data[i].foods.hates.length; ii++) {
        if (ii == 0) {
        htmlString += data[i].foods.hates[ii];
        } else {
        htmlString += " and " + data[i].foods.hates[ii];
        }
        }
        htmlString += './p';
  }
  animalContainer.insertAdjacentHTML('beforeend', htmlString);

~ More JSON

		var myObj, i, j, x = "";
		myObj = {
			"name": "John",
			"age": 30,
			"cars": [
				{"name": "Ford", "models": ["Fiesta", "Focus", "Mustang"]},
				{"name": "BMW", "models": ["320", "X3", "X5"]},
				{"name": "Fiat", "models": ["500", "Panda"] }
			]
		}
		for (i in myObj.cars) {
			x += myObj.cars[i].name;
				for (j in myObj.cars[i].models) {
					x += myObj.cars[i].models[j];
				}
			}
		document.getElementById("demo").innerHTML = x;

~ PHP/AJAX Form Hints

Start typing a name in the input field below:

First name:

Suggestions:

 

Sliders & Carousels

~ Horizontal Slider

Lorem ipsum

dolor sit amet

consectetur adipisicing elit.

Lorem ipsum dolor sit amet

consectetur adipisicing elit

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

consectetur adipisicing elit

Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

consectetur adipisicing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum
Do eiusmod
Ut enim
Ullamco oris
Duis aute
Esse cillum
Sint occaecat
Deserunt
Unde omnis
Laudantium

~ Vertical Slider

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Lorem ipsum
Dolor sit amet, consectetur adipiscing
Do eiusmod
Tempor incididunt ut labore et dolore magna
Ut enim
Ad minim veniam, quis nostrud exercitation
Ullamco oris
Nisi ut aliquip ex ea commodo consequat
Duis aute
Irure dolor in reprehenderit
Esse cillum
Dolore eu fugiat nulla pariatur excepteur
Sint occaecat
Cupidatat non proident, sunt in culpa
Deserunt
Mollit anim id est laborum sed ut
Unde omnis
Iste natus error sit voluptatem
Laudantium
Totam rem aperiam, eaque ipsa quae ab illo

~ Dynamic Slider

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam.

Lorem ipsum

Dolor sit amet, consectetur adipiscing

Do eiusmod

Tempor incididunt ut labore et dolore magna

Ut enim

Ad minim veniam, quis nostrud exercitation

Ullamco oris

Nisi ut aliquip ex ea commodo consequat

Duis aute

Irure dolor in reprehenderit

Esse cillum

Dolore eu fugiat nulla pariatur excepteur

Sint occaecat

Cupidatat non proident, sunt in culpa

Deserunt

Mollit anim id est laborum sed ut

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Vivamus varius pretium ligula, a aliquam odio euismod sit amet. Quisque laoreet sem sit amet orci ullamcorper at ultricies metus viverra. Pellentesque arcu mauris, malesuada quis ornare accumsan, blandit sed diam.

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Vivamus varius pretium ligula, a aliquam odio euismod sit amet. Quisque laoreet sem sit amet orci ullamcorper at ultricies metus viverra. Pellentesque arcu mauris, malesuada quis ornare accumsan, blandit sed diam.

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Vivamus varius pretium ligula, a aliquam odio euismod sit amet. Quisque laoreet sem sit amet orci ullamcorper at ultricies metus viverra. Pellentesque arcu mauris, malesuada quis ornare accumsan, blandit sed diam.

Go to slide: 1, 2, 3, 4, 5, 6

~ JSON Slider.

 

Hover Effects

HOVER 1

Slide Right

HOVER 2

Slide Down

HOVER 3

Slide Up

HOVER 4

Slide Left

HOVER 5

Whoa, what's going on?

HOVER 6

Uh, you sure about this?

HOVER 7

Welcome to the carnival

HOVER 8

Where'd I park?

Hover.css - A collection of CSS3 powered hover effects

2D Transitions

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward

 

Background Transitions

Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

 

Font Awesome Icons

Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

 

Border Transitions

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

 

Shadow and Glow Transitions

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

 

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

 

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

Made by
Ian Lunn - WordPress & Front-end Developer

Copyright © 2017 Ian Lunn Design Limited