JSFiddle

  • Calendar Front End Test (No sections) #28 is the latest revision

    jQuery 2.0.2, HTML, SCSS, JavaScript

    $(".events, .close").click(function() {
        $(document.body).toggleClass("calendar");
    });
    
    FastClick.attach(document.body);
    $(".event-item").click(function(){
        $(this).toggleClass("expanded");
    });
  • Calendar Front End Test

    No-Library (pure JS), HTML, SCSS, JavaScript

    <meta name="viewport" content="width=device-width, user-scalable=false;">
    <div class="grid">
    	<header class="clearfix">
    		<div class="day"><span>S</span></div>
    		<div class="day"><span>M</span></div>
    		<div class="day"><span>T</span></div>
    		<div class="day"><span>W</span></div>
    		<div class="day"><span>T</span></div>
    		<div class="day"><span>F</span></div>
    		<div class="day"><span>S</span></div>
    	</header>
    	<section class="clearfix">
    		<div class="day"><span>1</span></div>
    		<div class="day"><span>2</span></div>
    		<div class="day"><span>3</span></div>
    		<div class="day"><span>4</span></div>
    		<div class="day events">
                <span>5</span>
                <div class="event-number">99 events</div>
    			<div class="event-bullet">&bull;</div>
            </div>
    		<div class="day"><span>6</span></div>
    		<div class="day"><span>7</span></div>
    	</section>
    	<section class="clearfix">
    		<div class="day"><span>8</span></div>
    		<div class="day events">
                <span>9</span>
                <div class="event-number">1 event ...</div></div></section></div></meta>
  • CLNDR.js test #11 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

      var currentMonth = moment().format('YYYY-MM');
      var nextMonth    = moment().add('month', 1).format('YYYY-MM');
    
    var events = [
        { date: currentMonth + '-' + '10', title: 'Persian ...
  • Dynamic Multiple Events Page

    jQuery 2.0.2, HTML, SCSS, JavaScript

    FastClick.attach(document.body);
    $(".event-item").click(function(){
        $(this).toggleClass("expanded");
    });
  • Menu Prototype

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Egan &amp; Sons</h1>
    <ul>
        <li>
            <h2>Light Fare</h2>
            <ul>
                <li>
                    <h3>Goat Cheese Mapoleam</h3>
                    <span>$11.00</span>
                    <p>Herb and peppercon marinated goat cheese roasted red
                       pepper, portobello, grilled ...</p></li></ul></li></ul>
  • Multiple Events Page

    Click on an event to see more about it(?)

    <div class="container">
    <h2>Friday, December 28, 2012</h2>
    <hr>
    <ul>
    <li>
        <h3>BubbleMania!</h3>
        <summary>Combining comedy, science, music and a facinating exploration of bubbles of unusual shapes, sizes and ...</summary></li></ul></div>
  • Upcoming Events

    Upcoming Events front end for In Town and Around

    // Remember Brick datepicker august 30 to oct bug
    var options = {
        valueNames: ["title", "description", "location", "town", "url", "phone", "start_date", "end_date"],
        item ...
  • Upcoming Events #24 is the latest revision

    Upcoming Events front end for In Town and Around

    $(".calendar-container").focus(function(){
        $(this).toggleClass("focused", true);
    }).blur(function(){
        $(this).toggleClass("focused", false);
    }).click(function(e){
        $(this).toggleClass("focused", true ...
  • Dieci Call To Action

    jQuery 1.8.3, HTML, CSS, JavaScript

    document.getElementsByClassName("get-yours")[0].onclick = function(e){
        document.body.className = "call-to-action";
    };
    
    document.getElementsByClassName("submit")[0].onclick = function(e){
        document.body ...
  • Daily Special Mockup

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="container">
        <img src="https://dl.dropboxusercontent.com/u/6519882/InTownAndAround/gennaros-1.jpg" alt="">
        <p class="caption">Special name</p>
    </div>