October 12

Creating charts in Angular


September 02

GitHub - benoitvallon/whack-a-mole-game: Very simple whack a mole game in JavaScript

whack-a-mole-game - Very simple whack a mole game [...]

Join GitHub today

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

Sign up

Very simple whack a mole game in JavaScript

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

README.md

Whack a mole game

Very simple whack a mole game in JavaScript, you can play here.

Installation

To play the game, you just need to launch a web server and serve the index.html file. If you have python installed, you could do so by running:

python -m SimpleHTTPServer 8080
You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
September 02

Tic Tac Toe javascript

The classic with a responsively sized game board. [...]
Quick-add: + add another resource
            
              <div class="container">

  <div class="dialogueBox startScreen">

    <div class="introUtility">
      <div class="row">
        <div class="col-md-12">
          <h1 class="title">Tic Tac Toe</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4">
          <h2 class="startScreenMarkerX">X's</h2>
          <div class="radio">
            <div class="radioBtn-warning">
              <input type="radio" name="radio" id="player1Human" />
              <label for="player1Human">Human</label>
            </div>
            <div class="radioBtn-warning">
              <input type="radio" name="radio" id="player1Computer" />
              <label for="player1Computer">Computer</label>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <h2 class="versus">Vs.</h4>
          </div>
          <div class="col-md-4">
            <h2 class="startScreenMarkerO">O's</h2>
          <div class="radio">
            <div class="radioBtn-primary">
              <input type="radio" name="radio2" id="player2Human" />
              <label for="player2Human">Human</label>
            </div>
            <div class="radioBtn-primary">
              <input type="radio" name="radio2" id="player2Computer" />
              <label for="player2Computer">Computer</label>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <button class="startGame btn btn-lg btn-block btn-success disabled">Start</button>
          <button class="viewSource btn btn-sm btn-link">
              <a href="https://github.com/VitaC123/Tic-Tac-Toe-javascript">View source on GitHub</a>
            </button>
        </div>
      </div>
    </div>
    <!-- /introUtility -->

    <div class="scoreboardUtility">
      <div class="row">
        <div class="col-sm-4">
          <h4 class="score">Game no. 1<br>X's 0, O's 0</h4>
        </div>
        <div class="col-sm-4">
          <h3 class="messageToPlayer">X's, <span class="actionWord">go!</span></h3>
        </div>
        <div class="col-sm-4">
          <button class="playAgain btn btn-info disabled">Play again</button>
          <button class="resetGame btn btn-danger">Reset</button>
        </div>
      </div>
    </div>
    <!-- /scoreboardUtility -->
  </div>
  <!-- dialogueBox -->

  <div class="row">
    <div class="col-md-12">
      <table>
        <tr>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
        </tr>
        <tr>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
        </tr>
        <tr>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
          <td class="gameSquare">
            <canvas></canvas>
          </td>
        </tr>
      </table>
    </div>
  </div>

</div>
<!-- /container -->
            
          
            
              /* position / height × width / margin / padding / border / background / font*/

body {
  min-width: 340px;
  background: #f3f3f3;
  text-align: center;
  font-size: 16px;
  font-family: 'Acme', sans-serif;
}

.dialogueBox {
  position: relative;
  left: 50%;
  z-index: 1;
  min-height: 100px;
  padding: 1.25em;
  background: #2ab7ca;
  color: white;
  transition: 1s;
}

.startScreen {
  width: 70%;
  top: 3em;
  margin-left: -35%;
  box-shadow: 10px 10px 5px grey;
  border-radius: 1em;
  font-size: 1.15em;
  opacity: 0.9;
}

.title {
  margin-bottom: 0.25em;
  font-size: 4em;
}

.startScreenMarkerX {
  color: #f0ad4e;
}

.startScreenMarkerO {
  color: #0275d8;
}

.versus {
  margin: auto;
  padding: 0.01em;
  border-radius: 50%;
  background: #1f8693;
  font-size: 2.25em;
  font-style: italic;
}

.radio input[type="radio"]:empty {
  display: none;
}

.radio label {
  width: 100%;
  border: 0.1em solid #1f8693;
  border-radius: 0.25em;
}

.radio input[type="radio"]:empty ~ label {
  line-height: 2.5em;
  margin: 0.25em auto;
  cursor: pointer;
}

.radio input[type="radio"]:not(:checked) ~ label {
  color: #34919d;
}

.radio .radioBtn-warning input[type="radio"]:checked ~ label {
  color: white;
  background: #f0ad4e;
}

.radio .radioBtn-primary input[type="radio"]:checked ~ label {
  color: white;
  background: #0275d8;
}

.btn {
  font-family: 'Acme', sans-serif;
  letter-spacing: 0.1em;
}

.startGame {
  margin: 1.5em 0 0.5em 0;
}

.viewSource {
  font-family: menlo, monospace;
  white-space: normal;
}

.scoreboardUtility {
  display: none;
}

.scoreboardScreen {
  width: 100%;
  margin-left: -50%;
  top: 0;
  background: #2ab7ca;
  letter-spacing: 0.15em;
  color: white;
  opacity: 0.8;
}

.score {
  white-space: nowrap;
}

.messageToPlayer {
  visibility: visible;
  padding: 0.05em;
  border-radius: 50%;
  font-size: 3.15em;
  background: #1f8693;
  font-family: 'Acme', sans-serif;
}

.actionWord {
  visibility: hidden;
}

.actionWordVisible {
  visibility: visible;
  font-style: italic;
  transition: 0.3s;
  color: #5cb85c;
}

.playAgain {
  margin-bottom: 0.5em;
}

.resetGame {
  margin-bottom: 0.5em;
}

table {
  margin: 5% auto;
  border-collapse: collapse;
  transition: 1s;
}

.gameSquare {
  height: 15em;
  line-height: 0;
  border: 0.4em solid white;
  transition: 1s;
}

table tr:first-child td {
  border-top: 0;
}

table tr td:last-child {
  border-right: 0;
}

table tr td:first-child {
  border-left: 0;
}

table tr:last-child td {
  border-bottom: 0;
}

canvas {
  height: 100%;
  cursor: pointer;
}
            
          
            
              (function () {
  "use strict";

  var player1 = {
    player: undefined,
    marker: "x",
    moves: [],
    score: 0
  };

  var player2 = {
    player: undefined,
    marker: "o",
    moves: [],
    score: 0
  };

  var gameboard = {
    activeGame: false,
    currentPlayer: player2, // Prompts Player 1 for game's first move
    numberOfGames: 1,
    availablePositions: [0, 1, 2, 3, 4, 5, 6, 7, 8],
    winningCombos: [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ],
    adjustGameboardSize: function () {
      this.determineScaledHeightForGameSquare().then(function (result) {
        return gameboard.applyScaledHeightToGameSquare(result);
      }).then(function (result) {
        gameboard.applyScaledHeightToCanvas(result);
      });
    },
    determineScaledHeightForGameSquare: function () {
      return new Promise(function (resolve, reject) {
        var scaledHeight = Math.floor($(window).height() * 0.25);
        if ($(".scoreboardScreen").height()) {
          scaledHeight = scaledHeight - Math.ceil($(".scoreboardScreen").height() / 3);
        }
        if (scaledHeight * 4 > $(window).width()) {
          scaledHeight = Math.floor($(window).width() * 0.25);
        }
        if (scaledHeight) {
          resolve(scaledHeight);
        } else {
          reject("Unable to determine scaledHeight");
        }
      });
    },
    applyScaledHeightToGameSquare: function (scaledHeight) {
      return new Promise(function (resolve, reject) {
        $(".gameSquare").height(scaledHeight);
        resolve(scaledHeight);
      });
    },
    applyScaledHeightToCanvas: function (scaledHeight) {
      return new Promise(function (resolve, reject) {
        $("canvas").width(scaledHeight);
        resolve("Resized");
      });
    }
  };

  $(document).ready(function () {
    gameboard.adjustGameboardSize();
  });

  $(window).resize(function () {
    gameboard.adjustGameboardSize();
  });

  $(".radio").click(function () {
    if ($("#player1Human").prop("checked")) {
      player1.player = "human";
    }
    if ($("#player1Computer").prop("checked")) {
      player1.player = "computer";
    }
    if ($("#player2Human").prop("checked")) {
      player2.player = "human";
    }
    if ($("#player2Computer").prop("checked")) {
      player2.player = "computer";
    }
    if (player1.player && player2.player) {
      $(".startGame").removeClass("disabled");
    }
  });

  $(".startGame").click(function () {
    if (!$(this).hasClass("disabled")) {
      clearGameboardForNewGame();
      gameboard.activeGame = true;
      $(".introUtility").slideUp("slow");
      $(".dialogueBox").removeClass("startScreen").addClass("scoreboardScreen");
      $(".scoreboardUtility").slideDown("slow", function () {
        $(".gameSquare").css("border-color", "grey");
        $("canvas").css("visibility", "visible");
        displayScore();
        gameboard.adjustGameboardSize();
        setTimeout(cycleActivePlayer, 800);
        $(".startGame").addClass("disabled");
      });
    }
  });

  $(".playAgain").click(function () {
    if (!$(this).hasClass("disabled")) {
      $(this).addClass("disabled").addClass("btn-info").removeClass("btn-success");
      clearGameboardForNewGame();
      gameboard.numberOfGames++;
      gameboard.activeGame = true;
      $(".gameSquare").css("border-color", "grey");
      $("canvas").css("visibility", "visible");
      cycleActivePlayer();
      displayScore();
    }
  });

  $(".resetGame").click(function () {
    player1.player = null;
    player2.player = null;
    player1.score = 0;
    player2.score = 0;
    gameboard.numberOfGames = 0;
    $(".dialogueBox").removeClass("scoreboardScreen").addClass("startScreen");
    $(".scoreboardUtility").hide("fast", function () {
      $(".introUtility").slideDown("slow", function () {
        clearGameboardForNewGame();
        $(".playAgain").addClass("disabled");
        $(".messageToPlayer").html("X's, <span class='actionWord'>go!</span>");
      });
    });
  });

  function clearGameboardForNewGame() {
    player1.moves = [];
    player2.moves = [];
    gameboard.activeGame = false;
    gameboard.availablePositions = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    gameboard.currentPlayer = player2;
    clearAllCanvasElements();
    $("input").prop("checked", false);
    $(".gameSquare").css("border-color", "white");
  }

  function displayScore() {
    $(".score").html(
      "Game no. " + gameboard.numberOfGames + "<br>" +
      player1.marker.toUpperCase() + "'s " + player1.score + ", " +
      player2.marker.toUpperCase() + "'s " + player2.score
    );
  }

  $("td").click(function enableHumanMove() {
    if (gameboard.currentPlayer.player === "human" && gameboard.activeGame) {
      var locationOfMove = $(this).index("td");
      if (gameboard.availablePositions[locationOfMove] !== null) {
        gameboard.availablePositions[locationOfMove] = null;
        gameboard.currentPlayer.moves.push(locationOfMove);
        drawMarker(locationOfMove);
        scanForWinningCombo();
      }
    }
  });

  function makeComputerMove() {
    if (gameboard.activeGame) {
      var locationOfMove;
      if (player1.moves.length === 0) {
        locationOfMove = Math.floor(Math.random() * 9);
      } else {
        locationOfMove = determineOffensiveMove(gameboard.currentPlayer);
      }
      if (locationOfMove === undefined) {
        locationOfMove = determineDefensiveMove(gameboard.currentPlayer);
      }
      if (locationOfMove === undefined) {
        locationOfMove = selectTheFirstEmptySquare();
      }
      gameboard.availablePositions[locationOfMove] = null;
      gameboard.currentPlayer.moves.push(locationOfMove);
      drawMarker(locationOfMove);
      scanForWinningCombo();
    }

    function determineOffensiveMove(currentPlayer) {
      var otherPlayer = currentPlayer === player1 ? player2 : player1;
      var invalidatedByOtherPlayerMoves = function (combo) {
        return otherPlayer.moves.some(function (val) {
          return combo.indexOf(val) !== -1;
        });
      };
      for (var i = 0; i < gameboard.winningCombos.length; i++) {
        var combo = gameboard.winningCombos[i];
        if (invalidatedByOtherPlayerMoves(combo)) {
          continue;
        }
        var missingValuesFromWinningCombo = combo.filter(function (val) {
          return currentPlayer.moves.indexOf(val) === -1;
        });
        if (missingValuesFromWinningCombo.length === 1) {
          return missingValuesFromWinningCombo[0];
        }
      }
    }
  }

  function determineDefensiveMove(currentPlayer) {
    var otherPlayer = currentPlayer === player1 ? player2 : player1;
    var secondBestMove;
    for (var i = 0; i < gameboard.winningCombos.length; i++) {
      var combo = gameboard.winningCombos[i];
      var defensiveMoves = combo.filter(function (val) {
        return otherPlayer.moves.indexOf(val) === -1;
      });
      if (defensiveMoves.length === 1 && gameboard.availablePositions[defensiveMoves[0]] !== null) {
        return defensiveMoves[0];
      }
      if (defensiveMoves.length === 2) {
        secondBestMove = defensiveMoves.find(function (val) {
          return gameboard.availablePositions.indexOf(val) !== -1;
        });
      }
    }
    return secondBestMove;
  }

  function selectTheFirstEmptySquare() {
    for (var i = 0; i < gameboard.availablePositions.length; i++) {
      if (gameboard.availablePositions[i] !== null) {
        return gameboard.availablePositions[i];
      }
    }
  }

  function scanForWinningCombo() {
    var aWinningCombination;
    for (var i = 0; i < gameboard.winningCombos.length; i++) {
      var combo = gameboard.winningCombos[i];
      aWinningCombination = combo.every(function (val) {
        return gameboard.currentPlayer.moves.indexOf(val) !== -1;
      });
      if (aWinningCombination) {
        gameboard.activeGame = false;
        gameboard.currentPlayer.score++;
        displayScore();
        $(".messageToPlayer").html(gameboard.currentPlayer.marker.toUpperCase() + "'s win!");
        $(".gameSquare").css("border-color", "white");
        $(".playAgain").removeClass("disabled").removeClass("btn-info").addClass("btn-success");
        break;
      }
    }
    if (player1.moves.length + player2.moves.length === 9) {
      gameboard.activeGame = false;
      displayScore();
      $(".messageToPlayer").html("It's a tie!");
      $(".gameSquare").css("border-color", "white");
      $(".playAgain").removeClass("disabled").removeClass("btn-info").addClass("btn-success");
    } else if (!aWinningCombination) {
      cycleActivePlayer();
    }
  }

  function cycleActivePlayer() {
    if (gameboard.currentPlayer === player1) {
      gameboard.currentPlayer = player2;
    } else {
      gameboard.currentPlayer = player1;
    }
    if (gameboard.currentPlayer.player === "computer") {
      setTimeout(makeComputerMove, 1150);
    }
    $(".actionWord").removeClass("actionWordVisible");
    $(".messageToPlayer").html(gameboard.currentPlayer.marker.toUpperCase() +
      "'s, <span class='actionWord'>go!</span>");
    setTimeout(function () {
      $(".actionWord").addClass("actionWordVisible");
    }, 300);
  }


  function drawMarker(locationOfMove) {
    if (gameboard.activeGame) {
      var canvas = document.getElementsByTagName("canvas")[locationOfMove];
      var context = canvas.getContext("2d");
      canvas.width = canvas.height; // Ensures canvas is a square
      context.lineWidth = $("body").css("font-size").slice(0, -2);
      if (gameboard.currentPlayer.marker === "x") {
        context.strokeStyle = "#f0ad4e";
        drawX(canvas, context);
      } else {
        context.strokeStyle = "#337ab7";
        drawO(canvas, context);
      }
    }

    function drawX(canvas, context) {
      var position1 = canvas.width * 0.25;
      var position2 = canvas.width * 0.75;
      var pos1Copy = position1;
      var pos2Copy = position2;
      var drawSpeed = 3;
      // First diagnoal line: top left to bottom right
      for (var i = position1; i < position2; i++) {
        setTimeout(function () {
          context.beginPath();
          context.moveTo(position1, position1);
          context.lineTo(i, i);
          context.stroke();
        }, i * drawSpeed);
      }
      // Second diagnoal line: bottom left to top right
      for (var j = position1; j < position2; j++) {
        setTimeout(function () {
          context.beginPath();
          context.moveTo(position1, position2);
          context.lineTo(pos1Copy, pos2Copy);
          context.stroke();
          pos1Copy++;
          pos2Copy--;
        }, j * drawSpeed);
      }
    }

    function drawO(canvas, context) {
      var center = canvas.width * 0.5;
      var radius = canvas.width * 0.25;
      var startAngle = 6.25;
      for (var i = 6.25; i > 0; i = i - 0.05) {
        setTimeout(function () {
          context.beginPath();
          context.arc(center, center, radius, startAngle, (2 * Math.PI));
          context.stroke();
          startAngle = startAngle - 0.1;
        }, i * 150);
      }
    }
  }

  function clearAllCanvasElements() {
    for (var i = 0; i < gameboard.availablePositions.length; i++) {
      var canvas = document.getElementsByTagName("canvas")[i];
      var context = canvas.getContext("2d");
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
    $("canvas").css("visibility", "hidden");
  }
})();

            
          

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

September 02

GitHub - AlexYeates/balloon-burst: A JavaScript game where you pop balloons before they reach the top

balloon-burst - :balloon: A JavaScript game where [...]

Join GitHub today

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

Sign up

🎈 A JavaScript game where you pop balloons before they reach the top

README.md

WDI-Project-1 - Balloon Burst

Introduction

This is my first project for the Web Development Immersive course at General Assembly in London. Balloon Burst started out with inspiration from the popular phone game Fruit Ninja.

As the game was planned and developed, it was tweaked to have balloons rather than fruit, and for the balloons to travel to the top of the board rather than fall back again after a certian distance.

You can see a working version of the game here.

You can see the code for the game here.

How To Play

The aim of the game is to pop the balloons as they appear with your cursor before they reach the top of the screen.

The balloons initially spawn at an interval of one second, which decreases every time you collect 25 points. Each balloon is worth one point.

If you let one balloon reach the top then the game is over and your high score is stored. A reset button appears to give you the option of starting again.

Project Brief

  • To build a game using HTML, CSS, Javascript and jQuery over the period of one week.
  • The game should either support two players or beat the computer.
  • To build the game in object orientated programming if possible.

How It Was Built

Future Improvements

  • Add a drop down theme replacer.
  • Make a bluner balloon appear every 25 points that if you pop, you lose.

Credits

You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
September 02

Memory Game

A JavaScript memory game on Codepen ! Click the ca [...]
Quick-add: + add another resource
            
              * {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	background: black;
	min-height: 100%;
	font-family: "Arial", sans-serif;
}

.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}

.game {
	transform-style: preserve-3d;
	perspective: 500px;
	min-height: 100%;
  height: 100%;
}

@mixin width($max){
	@media (max-width: $max){
		@content;
	}
}

@keyframes matchAnim {
	0% {
		background: #bcffcc;
	}
	100% {
		background: white;
	}
}

.card {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
	display: block;
	perspective: 500px;
	position: relative;
	cursor: pointer;
  z-index: 50; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);  
	@include width(800px){
		width: 25%;
		height: 16.666%;
	}
	.inside {
		width: 100%;
		height: 100%;
		display: block;
		transform-style: preserve-3d;
		transition: .4s ease-in-out;
		background: white;

		&.picked, &.matched {
			transform: rotateY(180deg);
		}
		&.matched {
			animation: 1s matchAnim ease-in-out;
			animation-delay: .4s;
		}
	}

  .front, .back {
  	border: 1px solid black;
  	backface-visibility: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	padding: 20px;

  	img {
  		max-width: 100%;
  		display: block;
  		margin: 0 auto;
  		max-height: 100%;
  	}
  }
  .front {
  	transform: rotateY(-180deg);
  	@include width(800px){
  		padding: 5px;
  	}
  }
  .back{
		transform: rotateX(0); // fix firefox backface-visibility.
		@include width(800px){
  		padding: 10px;
  	}
  }
}

.modal-overlay {
	display: none;
	background: rgba(0,0,0,.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal {
	display: none;
	position: relative;
	width: 500px;
	height: 400px;
	max-height: 90%;
	max-width: 90%;
	min-height: 380px;
	margin: 0 auto;
	background: white;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 10px;
	.winner {
		font-size: 80px;
		text-align: center;
		font-family: "Anton", sans-serif;
		color: #4d4d4d;
		text-shadow: 0px 3px 0 black;
		@include width(480px){
			font-size: 60px;
		}
	}
	.restart {
		font-family: "Anton", sans-serif;
		margin: 30px auto;
		padding: 20px 30px;
		display: block;
		font-size: 30px;
		border: none;
		background: #4d4d4d;
		background: linear-gradient(#4d4d4d, #222);
		border: 1px solid #222;
		border-radius: 5px;
		color: white;
		text-shadow: 0px 1px 0 black;
		cursor: pointer;
		&:hover {
			background: linear-gradient(#222, black);
		}
	}
	.message {
		text-align: center;
		a {
			text-decoration: none;
			color: #28afe6;
			font-weight: bold;
			&:hover {
				$c: lighten(#28afe6, 10%);
				color: $c;
				border-bottom: 1px dotted $c;
			}
		}
	}
	.share-text {
		text-align: center;
		margin: 10px auto;
	}
	.social {
		margin: 20px auto;
		text-align: center;
		li {
			display: inline-block;
			height: 50px;
			width: 50px;
			margin-right: 10px;
			&:last-child {
				margin-right: 0;
			}
			a {
				display: block;
				line-height: 50px;
				font-size: 20px;
				color: white;
				text-decoration: none;
				border-radius: 5px;
				&.facebook {
					background: #3b5998;
					&:hover {
						background: lighten(#3b5998, 10%);
					}
				}
				&.google {
					background: #D34836;
					&:hover {
						background: lighten(#D34836, 10%);
					}
				}
				&.twitter {
					background: #4099FF;
					&:hover {
						background: lighten(#4099FF, 10%);
					}
				}
			}
		}
	}
}

footer {
	height: 20px;
	position: absolute;
	bottom: 0;
	width: 100%;
  z-index: 0;
	.disclaimer {
		line-height: 20px;
		font-size: 12px;
		color: #727272;
		text-align: center;
		@include width(767px){
			font-size: 8px;
		}
	}
}
            
          
            
              // Memory Game
// © 2014 Nate Wiley
// License -- MIT
// best in full screen, works on phones/tablets (min height for game is 500px..) enjoy ;)
// Follow me on Codepen

(function(){
	
	var Memory = {

		init: function(cards){
			this.$game = $(".game");
			this.$modal = $(".modal");
			this.$overlay = $(".modal-overlay");
			this.$restartButton = $("button.restart");
			this.cardsArray = $.merge(cards, cards);
			this.shuffleCards(this.cardsArray);
			this.setup();
			this.binding();
		},

		shuffleCards: function(cardsArray){
			this.$cards = $(this.shuffle(this.cardsArray));
		},

		setup: function(){
			this.html = this.buildHTML();
			this.$game.html(this.html);
			this.$memoryCards = $(".card");
			this.paused = false;
     	this.guess = null;
		},

		binding: function(){
			this.$memoryCards.on("click", this.cardClicked);
			this.$restartButton.on("click", $.proxy(this.reset, this));
		},
		// kinda messy but hey
		cardClicked: function(){
			var _ = Memory;
			var $card = $(this);
			if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
				$card.find(".inside").addClass("picked");
				if(!_.guess){
					_.guess = $(this).attr("data-id");
				} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
					$(".picked").addClass("matched");
					_.guess = null;
				} else {
					_.guess = null;
					_.paused = true;
					setTimeout(function(){
						$(".picked").removeClass("picked");
						Memory.paused = false;
					}, 600);
				}
				if($(".matched").length == $(".card").length){
					_.win();
				}
			}
		},

		win: function(){
			this.paused = true;
			setTimeout(function(){
				Memory.showModal();
				Memory.$game.fadeOut();
			}, 1000);
		},

		showModal: function(){
			this.$overlay.show();
			this.$modal.fadeIn("slow");
		},

		hideModal: function(){
			this.$overlay.hide();
			this.$modal.hide();
		},

		reset: function(){
			this.hideModal();
			this.shuffleCards(this.cardsArray);
			this.setup();
			this.$game.show("slow");
		},

		// Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
		shuffle: function(array){
			var counter = array.length, temp, index;
	   	// While there are elements in the array
	   	while (counter > 0) {
        	// Pick a random index
        	index = Math.floor(Math.random() * counter);
        	// Decrease counter by 1
        	counter--;
        	// And swap the last element with it
        	temp = array[counter];
        	array[counter] = array[index];
        	array[index] = temp;
	    	}
	    	return array;
		},

		buildHTML: function(){
			var frag = '';
			this.$cards.each(function(k, v){
				frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
				<div class="front"><img src="'+ v.img +'"\
				alt="'+ v.name +'" /></div>\
				<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
				alt="Codepen" /></div></div>\
				</div>';
			});
			return frag;
		}
	};

	var cards = [
		{
			name: "php",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
			id: 1,
		},
		{
			name: "css3",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
			id: 2
		},
		{
			name: "html5",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
			id: 3
		},
		{
			name: "jquery",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
			id: 4
		}, 
		{
			name: "javascript",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
			id: 5
		},
		{
			name: "node",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
			id: 6
		},
		{
			name: "photoshop",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
			id: 7
		},
		{
			name: "python",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
			id: 8
		},
		{
			name: "rails",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
			id: 9
		},
		{
			name: "sass",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
			id: 10
		},
		{
			name: "sublime",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
			id: 11
		},
		{
			name: "wordpress",
			img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
			id: 12
		},
	];
    
	Memory.init(cards);


})();
            
          

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

September 02

Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

DrawingBoard

Detailed information is available in the readme on Github.

The default DrawingBoard

Real world usage

The drawingboard was originally made for a French website with a dubious humor (that you'll definitely understand even if you're not French): jaiunegrosseteu.be

Other websites using it:

August 06

How to call a php script/function on a html button click

<button type="button">Click Me</button>
<p></p>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'script.php',
                success: function(data) {
                    alert(data);
                    $("p").text(data);

                }
            });
   });
});
</script>
March 12

Interactive cross-platform JavaScript HTML5 Charts, Maps, Stocks and Gantts for your project | AnyChart

Interactive cross-platform JavaScript HTML5 Charts [...]

JavaScript Charts designed to be embedded and integrated

Visualize financial or any timeline data in JavaScript

What's new in anychart?
7.13.0 Version Released! Angular/React/NodeJS plugins, Pareto Chart, Step/Stick/Jump Charts, Vertical Charts, Technical Indicators, Sharing feature, and more.

AnyChart's product family is a set of flexible JavaScript (HTML5) libraries for all your data visualization needs. Differentiate your products, applications and web pages with beautiful charts and dashboards.

Why AnyChart?

Our tools help developers build better, more engaging JS charts.
Whether you are building a website, a corporate BI application, a presentation for your CEO or a solution for your customers, you will be impressed by the flexibility and customization opportunities our charting products have. No matter what server technology or database you are using, your customers will be able to enjoy charts and dashboards on any device – PCs, smartphones or tablets.

Run More Tests

Please take a look at selected case-studies, where individuals and companies from various industries share their experience and tell how they have succeeded in solving their development and business tasks using AnyChart products.

Learn more

10 000+ Happy Customers

More than ten thousand customers all over the world are happy with AnyChart

Contact Our Sales Representatives

Our Sales Representatives will be happy to talk to you and answer any your questions regarding our products, licensing, purchasing and everything else.
AnyChart

AnyChart is a flexible JavaScript (HTML5) based solution that allows developers to embed interactive and great looking charts and dashboards into any web, standalone or mobile project. Whether you need to enhance your website with better reporting, embed dashboards into your on-premises and SaaS systems, or build an entire new product, AnyChart covers all your data visualization needs. Our products include massive out-of-the-box capabilities, combined with the flexibility and the simplicity.
Loved by thousands of happy customers.

February 12

Useful CSS3 LESS Mixins | CSS-Tricks

Useful CSS3 LESS Mixins | CSS-Tricks

Useful CSS3 LESS Mixins

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: @string;
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	-webkit-border-top-right-radius:    @topright;
	-webkit-border-bottom-right-radius: @bottomright;
	-webkit-border-bottom-left-radius:  @bottomleft;
	-webkit-border-top-left-radius:     @topleft;

	-moz-border-radius-topright:        @topright;
	-moz-border-radius-bottomright:     @bottomright;
	-moz-border-radius-bottomleft:      @bottomleft;
	-moz-border-radius-topleft:         @topleft;

	border-top-right-radius:            @topright;
	border-bottom-right-radius:         @bottomright;
	border-bottom-left-radius:          @bottomleft;
	border-top-left-radius:             @topleft;

	-moz-background-clip:    padding; 
	-webkit-background-clip: padding-box; 
	background-clip:         padding-box; 
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
	-webkit-animation: @name @duration @delay @ease;
	-moz-animation:    @name @duration @delay @ease;
	-ms-animation:     @name @duration @delay @ease;
}

.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}
.skew (@deg, @deg2) {
	-webkit-transform:       skew(@deg, @deg2);
	-moz-transform: 	 skew(@deg, @deg2);
	-ms-transform: 		 skew(@deg, @deg2);
	-o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	-webkit-transform:       translate(@x, @y);
	-moz-transform: 	 translate(@x, @y);
	-ms-transform: 		 translate(@x, @y);
	-o-transform: 		 translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	-webkit-transform:       translate3d(@x, @y, @z);
	-moz-transform: 	 translate3d(@x, @y, @z);
	-ms-transform: 		 translate3d(@x, @y, @z);
	-o-transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	-webkit-perspective: 	@value;
	-moz-perspective: 	@value;
	-ms-perspective: 	@value;
	perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

Comments

  1. This is great. I maintain a LESS mixin library myself with a css3 library, but didn’t include text-shadow as I felt it was only one line anyway and wouldn’t benefit from having a mixin. But I guess by including it you were able to have a text-shadow with default values. Was this your rationale?

    • I know this is like 5 years later lol, but probably the fact that he has a default value for it.

  2. Some thoughts for compatibility between gradients (including transparency) and IE6-8:

    Using an adapted mixin in conjunction with using Paul Irish’s infamous class based IE selectors (so that .ie6, .ie7, .ie8 classes are applied to either the HTML or body elements) you could hack in support without too much effort.

    I suppose you could also use conditional stylesheets, though that’d be a lot longer way round the circle and something I haven’t done in a long while.

    The RGBa to HEX function built into LESSPHP ensures that when you pass a RGBa value to the variable argument it is correctly converted for the proprietary MS CSS filter (using alpha hex, #AARRGGBB).

    .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
            background-color: @startColor;
            background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
            background: -webkit-linear-gradient(top, @startColor, @endColor);
            background: -moz-linear-gradient(top, @startColor, @endColor);
            background: -ms-linear-gradient(top, @startColor, @endColor);
            -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
            background: -o-linear-gradient(top, @startColor, @endColor);
            background: -linear-gradient(top, @startColor, @endColor);
    }
    
    .ie6 .gradient, .ie7 .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
           @ieStartColor: rgbahex(@{startColor});
           @ieEndColor: rgbahex(@{endColor});
           background: transparent;
           filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
    }
    
    .ie8 .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
           @ieStartColor: rgbahex(@{startColor});
           @ieEndColor: rgbahex(@{endColor});
           background: transparent;
           -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
    }
    

    I've got to test the code yet, but it's an idea. Any thoughts?

    • That would be awesome. However, far as I can tell, LESS doesn’t allow for multiple selectors in mixin names.

    • Yeah a simple thought that could be done using nesting and ampersands, so:

      
      .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
         background-color: @startColor;
         background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
         background: -webkit-linear-gradient(top, @startColor, @endColor);
         background: -moz-linear-gradient(top, @startColor, @endColor);
         background: -ms-linear-gradient(top, @startColor, @endColor);
         -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
         background: -o-linear-gradient(top, @startColor, @endColor);
         background: -linear-gradient(top, @startColor, @endColor);
         
         @ieStartColor: rgbahex(@{startColor});
         @ieEndColor: rgbahex(@{endColor});
         
         .ie6 &, 
         .ie7 .ie8 }
       
      

      I haven’t tested this either :O

    • Aww the preview didn’t match the result, take two:

      .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
        background-color: @startColor;
        background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background: -webkit-linear-gradient(top, @startColor, @endColor);
        background: -moz-linear-gradient(top, @startColor, @endColor);
        background: -ms-linear-gradient(top, @startColor, @endColor);
        -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
        background: -o-linear-gradient(top, @startColor, @endColor);
        background: -linear-gradient(top, @startColor, @endColor);
      
        @ieStartColor: rgbahex(@{startColor});
        @ieEndColor: rgbahex(@{endColor});
      
        .ie6 &, 
        .ie7 &{
          background: transparent;
          filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
        }
          .ie8 & {
          background: transparent;
          -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
        }
      }
      
    • You can add “,GradientType=0” after youe ieEndColor for vertical gradient, and “,GradientType=1” for horizontal gradient.

      I have 2 versions for this: .gradient-v and .gradient-h

  3. Thanks for sharing. Nice set of Mixins.

    I’m wondering about the opacity mixin: What’s the reason for using vendor prefixes. They seem to be unnecessary. See http://caniuse.com/#search=opacity

    I use the following opacity mixin in my base.less file:

    .opacity(@opacity: 1) {
    	@ieOpacity: @opacity * 100;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ieOpacity})";
    	filter: ~"alpha(opacity=@{ieOpacity})";	
    	opacity: @opacity;
    }
  4. Its great to have the box-sizing mixin. Other sets I’ve seen havent included it.
    Going to town resetting a less file for my genesis theme. Thanks for making me feel SMARTER today…

    • Out of all the mixin sets i checked out today, this one is by far the best one. It’s not overly cluttered with things i will never (ever!) use, it contains just about everything i’ll need and it’s very nicely done. Thanks for the link!

  5. for the lazy ;)

    .gradientAuto (@color: #000, @coef: 5%){
        background: lighten(@color, @coef); /* Old browsers */
        background: -moz-linear-gradient(top, lighten(@color, @coef) 0%, darken(@color, @coef) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color, @coef)), color-stop(100%,darken(@color, @coef))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* IE10+ */
        background: linear-gradient(to bottom, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color, @coef)', endColorstr='darken(@color, @coef)',GradientType=0 ); /* IE6-9 */
    }
    
  6. I’m having problem when creating an mixing for box-shadow. My one is the same of yours, so I presume you passed by the same problem.
    When using multiple box-shadows (comma separated) in one element (like ‘2px 2px 3px 4px #000, inset -2px 1px 1px 0 #000’). LessCSS don’t compile and gives an error.

    There is a way to go around this? I mean, to treat the value as a string or something else.
    Thanks!!

    • The comma separates the variables

      use this ;)

      .box-shadow-double (@string, @string2) {
          -webkit-box-shadow: @string, @string2;
          -moz-box-shadow:    @string, @string2;
          box-shadow:         @string, @string2;
      }
      
  7. Is there a way to write multiple transition with the .transition() mixin?
    I’m trying to find how to make a mixin with undefined number of arguments and put all inside the rules with @arguments special variable.

  8. <

    p>I’ve just find how!

    From LESS version 1.3.1 they’ll introduce a new special variable @arguments-list that will take arguments as a raw string. Here’s the usage:


    .transition(...) {
    -moz-transition: @arguments-list;
    -webkit-transition: @arguments-list;
    -o-transition: @arguments-list;
    -ms-transition: @arguments-list;
    transition: @arguments-list;
    }

    The ‘…’ means “don’t know how much arguments you’ll pass to my mixin, take ’em all” ;)

  9. background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);

    Of the two, the second one is the one Webkit now recognizes (as well as Firefox and the Spec) correct? If so, which browsers only support the former version?

    • It can easily replace those three ;-)

      .box-shadow (@string) {
          -webkit-box-shadow: @string;
          -moz-box-shadow:    @string;
          box-shadow:         @string;
      }
      .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
          -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
          -moz-box-shadow:  @x @y @blur @spread rgba(0, 0, 0, @alpha);
          box-shadow:   @x @y @blur @spread rgba(0, 0, 0, @alpha);
      }
      .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
          -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
          -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
          box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
      }
      
  10. How do you create multi transition’s so that the out put is something like this?

    -webkit-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
      -moz-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
        -o-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
          transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
    

    I have something like this,

    .multi_animation(@anim1, @anim2 ){
        -webkit-transition: @anim1, @anim2;
          -moz-transition: @anim1, @anim2;
            -o-transition: @anim1, @anim2;
              transition: @anim1, @anim2;
    }
    

    There should be a better way to write it I am just not sure how.

    • You can checkout my mixin librabry: more-or-less

      The mixin looks really simple yet requires three other mixins to work (.vendorize(), .for() and .in()).
      The entire library is built on my .vendorize() mixin which makes the library very strong and easy to maintain.

      vendorize mixin
      in-mixin
      for-mixin

      The good thing is that all values are checked and vendorized if needed. This allows to use the mixin for transitions on the e.g. transform or box-shadow properties.
      The needed vendor-prefixes are defined in this variable @vendorPrefixes: -webkit-, -moz-, -o-, '';

      The mixin requires Less 1.7.0 to work

      mixin

      @import '../helpers/_vendorize';
      
      .transition(@values...) {
          @vendorPrefixes: -webkit-, -moz-, -o-, '';
          @prop: transition;
          .vendorize(@values);
      }
      

      Input

      .transition-one {
          .transition(transform 200ms linear 400ms);
      }
      
      .transition-two {
          .transition(transform 200ms, height 500ms;);
      }
      
      .transition-three {
          .transition(transform 200ms linear, height 500ms linear, box-shadow 500ms linear, opacity 500ms linear;);
      }
      

      output

      .transition-one {
        -webkit-transition: -webkit-transform 200ms linear 400ms;
        -moz-transition: -moz-transform 200ms linear 400ms;
        -o-transition: -o-transform 200ms linear 400ms;
        transition: transform 200ms linear 400ms;
      }
      .transition-two {
        -webkit-transition: -webkit-transform 200ms, height 500ms;
        -moz-transition: -moz-transform 200ms, height 500ms;
        -o-transition: -o-transform 200ms, height 500ms;
        transition: transform 200ms, height 500ms;
      }
      .transition-three {
        -webkit-transition: -webkit-transform 200ms linear, height 500ms linear, -webkit-box-shadow 500ms linear, -webkit-opacity 500ms linear;
        -moz-transition: -moz-transform 200ms linear, height 500ms linear, -moz-box-shadow 500ms linear, -moz-opacity 500ms linear;
        -o-transition: -o-transform 200ms linear, height 500ms linear, -o-box-shadow 500ms linear, -o-opacity 500ms linear;
        transition: transform 200ms linear, height 500ms linear, box-shadow 500ms linear, opacity 500ms linear;
      }
      
  11. New BIG mixin library available. It is ‘almost’ as strong as ‘lesshat’ …but… WITHOUT inline-javascript.
    Find it here: more-or-less

    It is fully modular and allows to import mixins similar to ‘compass’

    @import 'css3/transition';
    

    Basic CSS3 mixin example

    @import '../helpers/_vendorize';
    
    .border-radius(@values) {
        @vendorPrefixes: -webkit-, -moz-, '';
        @prop: border-radius;
        .vendorize();
    }
    

    Usage

    .border-radius(0 0 3px 3px);
    

    The .vendorize mixin is able to prefix properties or values (e.g. for transitions)

    The library even allows mixins like this one… (allows endless number of layers)
    All values are prefixed if needed.

    .background-image(linear-gradient(top, #000, #fff));
    
    .background-image(url('test.png'),
                      radial-gradient(45px 45px, farthest-corner, rgba(0,0,0,0.1) 0%, 
                                                                  rgba(100,0,0,0.1) 100%),
                      linear-gradient(top, rgba(0,0,0,0.2), rgba(0,255,0,0.1)), 
                      linear-gradient(top, #000, #fff));
    
  12. wrote this for transform what do you think?
    $empty: ”;
    @function notEmpty($val) {
    @if($val != $empty) {
    @return true;
    } @else {
    @return false;
    }
    }
    @mixin transform($type:”,$val1:”,$val2:”,$val3:”,$val4:”,$val5:”,$val6:”) {
    @if notEmpty($val2) { $val2: “,” + $val2; }
    @if notEmpty($val3) { $val2: “,” + $val2; }
    @if notEmpty($val3) { $val3: “,” + $val3; }
    @if notEmpty($val3) { $val4: “,” + $val4; }
    @if notEmpty($val3) { $val5: “,” + $val5; }
    @if notEmpty($val3) { $val6: “,” + $val6; }
    -webkit-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
    -moz-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
    -ms-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
    -o-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
    transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
    }

  13. suppose I have my own jumbotron override:
    .jumbotron {
    background-color: #ff4400;
    }
    and then I want to have a custom override of that where I inherit the above class and only override its background color using its color a sa parameter to “lighten()”. I can’t figure out the syntax:
    .Myjumbotron {
    .jumbotron;
    /* not sure what goes below for “parent.background-color” */
    background-color: lighten(parent.background-color, 30%);
    }

    Thanks!

  14. Here is LESS mixin for linear gradient I usually use:

    .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25), @direction: vertical) {
    
        .setGradientVars(@direction) when (@direction = vertical){
            @direct: top;
            @directW3: to bottom;
            @webkitDirectFrom: left top;
            @webkitDirectTo: left bottom;
            @ieGradientType: 0;
        }
        .setGradientVars(@direction) when (@direction = horizontal){
            @direct: left;
            @directW3: to right;
            @webkitDirectFrom: left top;
            @webkitDirectTo: right top;
            @ieGradientType: 1;
        }
    
        .setGradientVars(@direction);
    
        @ieStartColor: argb(@startColor);
        @ieEndColor: argb(@endColor);
    
        background-color: @startColor;
        background: -moz-linear-gradient(@direct, @startColor 0%, @endColor 100%);
        background: -webkit-linear-gradient(@direct, @startColor 0%, @endColor  100%);
        background: -webkit-gradient(linear, @webkitDirectFrom, @webkitDirectTo, color-stop(0%, @startColor), color-stop(100%, @endColor));
        background: -ms-linear-gradient(@direct, @startColor 0%, @endColor  100%);
        background: -o-linear-gradient(@direct, @startColor 0%, @endColor  100%);
        background: -linear-gradient(@direct, @startColor 0%, @endColor  100%);
        background: linear-gradient(@directW3, @startColor 0%, @endColor 100%);
        filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=%d)", @ieStartColor, @ieEndColor, @ieGradientType));
    }
    

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `

this
` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Wanna do a workshop at your company?

Thanks to Media Temple, I'm heading to one lucky company's office for a day, for free! It could be yours!

Go Enter Today

We have a pretty good* newsletter.

Every week-ish, we round up the best of the stuff we've published on here and shared on social media. Even better, we share new things that we've learned and what we're thinking about.

February 12

Regular Expressions Cheat Sheet

Regular Expressions Cheat Sheet from DaveChild. A [...]

Regular Expressions Cheat Sheet

A quick reference guide for regular expressions (regex), including symbols, ranges, grouping, assertions and some sample patterns to get you started.

January 27

CSS3 & jQuery Based Off-canvas Navigation Demo


January 27

Meny - A three dimensional and space efficient menu concept

A three dimensional and space efficient menu creat [...]
January 26

CSS and jQuery Menu


January 04

25+ jQuery Timeline Plugin with Example

Best jQuery Timeline slider plugin with examples a [...]

Best jQuery Timeline Plugins & Tutorials with Demo

Timeline Framework with HTML5 & CSS

AWSM Timeline’ is a pack of super cool and interactive timeline layouts for your website. It is rather a basic framework which you can use to build your own style of timeline layouts by making some basic CSS changes. This documentation will help you to integrate the layout easily into your existing HTML files.

Flik Timeline : WordPress Responsive Timeline Plugin

Build a simple, interactive, historical timeline with FLIK TIMELINE. The benefits of this timeline is that it’s simple, able to handle nearly any form of content (including image slider, thumbnail slider), printer friendly, and highly customizable .

  • Unlimited timeline for in post or page
  • Show images like slider or thumbnail slider
  • 5 different style
  • 8 different animation effect
  • Horizontal and vertical styles

Cool Timeline Pro – WordPress Responsive Timeline Plugin

Cool Timeline Pro is an advanced WordPress timeline plugin that showcases your life history or your company’s story in a responsive vertical chronological order based on the year and the date of your posts.Extensions Bundle.

  • Create Multiple Timeline Stories – Create unlimited timeline stories inside your WordPress website or blog.
  • Timeline Scrolling Navigation – Quickly and easily navigate your timeline with a beautiful scrolling navigation inside your timeline.
  • Historical Dates – Allow you to set dates between the years 1850-2020.
  • Stories Content Format – Add different type of content like Video, Slideshow, Image in your story.
  • Stories Category Management – Add stories in specific category.
  • Advanced Style Options – Customize with your own colors, styles.
  • Story Single Page – Custom single story page.
  • Animation Effects – Add animation effects on timeline scroll.
  • Stories Images in popup – Display stories images in popup.
  • Stories Images Slideshow – Add images slideshow in stories.

ZoomTimeline : CSS Timeline Pack

Looking for a company timeline ? A shipping log ? Shipping history ? Personal History ? A cool timeline slider ? This plugin has it all. No matter the needs for a timeline, the six modes included cover all the timeline needs.Awesome for – company timeline, time line, history, company history, shipping history, parcel track display, timeline slider.

  • HTML5 technology – zoomtimeline uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
  • fully responsive – looks great from mobile to HD
  • five modes – full skins to fit every brand
  • CSS3 technology – this player uses cutting-edge css3
  • SCSS Powered – easy for developers to modify
  • Retina-ready – graphics have double resolution for smooth retina viewing
  • easy install – purchase, download the zip, read the docs
  • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices

EventControl : jQuery Timeline Control

EventControl is a jQuery timeline control with support for stacking events.

Flik : jQuery Timeline Plugin with CSS3

This is very simple and modern CSS3 and jQuery. 8 style with 5 different effect

Features:

  • 8 Style
  • 5 different effect
  • Pure CSS3
  • Works with all CSS3 Browsers
  • Easy to implement, customize and style

Responsive Timeline using CSS3

I share responsive timeline, its not contain single line of javascript or jQuery code. HTML and CSS is fully hand-coded and easy to use and understand for change something according to you.

jQuery jSon Slider, Carousel & Timeline Plugin

The jSon Slider is a multi purpose jQuery plugin. We can crate slider, carousel & timeline.It is a responsive and fast-loading slider with built-in search functionality and other powerful features.

Features:

  • Very fast-loading slider
  • CSS3 & jQuery animation
  • Carousel (Option for setting different numbers of slides for Desktop, Tablet and Mobile)
  • Testimonial, Tab & Timeline
  • Search within slides
  • YouTube and HTML5 videos in slides
  • Full screen
  • Thumbnails, bullets or HTML
  • Multiple sliders allowed on one page
  • Slides can be selected using a GET method in URl

ZoomTimeline : Ultimate jQuery Timeline Pack

Looking for a company timeline ? A shipping log ? Shipping history ? Personal History ? A cool timeline slider ? This plugin has it all. No matter the needs for a timeline, the six modes included cover all the timeline needs.

Awesome for – company timeline, time line, history, company history, shipping history, parcel track display, timeline slider.



January 04

Blueprint: Vertical Timeline

Blueprint: Vertical Timeline