XHTML

The Square Coloring Game

Posted in Javascript, XHTML on April 25th, 2012 by Joonas – Be the first to comment

The Square Coloring Game

I found myself with some “free time” on my hands on April 19 and decided to fiddle with some javascript to pass the time. I ended up writing a simple coloring game. You get to choose the size for your squares in pixels and then the game generates a blank page for you that you have to color by hovering your mouse over the squares. The game tracks how many squares are on your screen and how many you have colored. Once you have colored all your games, you get a message saying how many microseconds it took you to color all the squares.

You can play the game at the following link:
http://dev.strategystar.net/examples/the-square-coloring-game/

The game is really simple and doesn’t use any third party javascript libraries. You can view the game code at the following link:
http://dev.strategystar.net/examples/the-square-coloring-game/game.js

Simple jQuery Slideshow

Posted in jQuery, XHTML on January 14th, 2011 by Joonas – Be the first to comment

Want to present some data in a slide show fashion? See if my proof of concept piece will work for your needs. It can be used like a slide show or even a book type deal.

Click here to view a live example.

THE HTML

<div>
    <strong>Navigation</strong>
    <ol>
        <li><a href="#" onclick="return goToSlide(1);">Introduction</a></li>
        <li><a href="#" onclick="return goToSlide(2);">The History</a></li>
        <li><a href="#" onclick="return goToSlide(3);">Modern Usage</a></li>
        <li><a href="#" onclick="return goToSlide(4);">Outlook</a></li>
    </ol>
</div>
<div class="sliderContainer">
    <ul id="js_slides">
        <li>
            <strong>Introduction</strong>
            <br />
            <p>this is slide number one</p>
            <br />
            <a href="#" onclick="return goToSlide(2);">Next Slide ></a>
        </li>
        <li id="test">
            <strong>The History</strong>
            <br />
            <p>this is slide number two</p>
            <br />
            <a href="#" onclick="return goToSlide(1);">Previous Slide <</a>
            <br />
            <a href="#" onclick="return goToSlide(3);">Next Slide ></a>
        </li>
        <li>
            <strong>Modern Usage</strong>
            <br />
            <p>this is slide number three</p>
            <br />
            <a href="#" onclick="return goToSlide(2);">Previous Slide <</a>
            <br />
            <a href="#" onclick="return goToSlide(4);">Next Slide ></a>
        </li>
        <li>
            <strong>Outlook</strong>
            <br />
            <p>this is slide number four</p>
            <br />
            <a href="#" onclick="return goToSlide(3);">Previous Slide <</a>
        </li>
    </ul>
</div>

THE JAVASCRIPT

<script type="text/javascript">
 
var sliderSlideWidth = 300;
 
function goToSlide(slideNum){
    var offset = (slideNum-1) * sliderSlideWidth;
    $('#js_slides').animate({left:'-'+offset+'px'}, 500, function(){
        $('#js_slides li').each(function(){ this.scrollTop = 0; });
    });
    return false;
}
 
</script>

THE CSS

<style type="text/css">
 
div.sliderContainer {
    width: 300px;
    height: 400px;
    border: solid 1px black;
    overflow: hidden;
    background: #efefef;
}
 
div.sliderContainer ul {
    position: relative;
    width: 1200px;
    list-style: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
 
div.sliderContainer ul li {
    float: left;
    width: 280px;
    height: 380px;
    overflow: auto;
    background: white;
    padding: 10px;
}
 
</style>

Remember that for this to work, you must have jQuery loaded up on your page. You can easily include jQuery from Google with the following piece of code within your head tags.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

HTML input fields with default values using jQuery

Posted in jQuery, XHTML on July 9th, 2010 by Joonas – Be the first to comment

Designers often choose to compact their designs by putting input field labels in to the input boxes themselves. It is our jobs as developers then to make the default label text disappear when a user clicks or focuses on the input box. jQuery makes this super simple. All it takes is a few lines of javascript and a special class name for your input fields.

The HTML:

<input type="text" name="email" value="Email" class="jsClearDefault" />
<input type="password" name="password" value="Password" class="jsClearDefault" />
<input type="submit" name="action" value="Login" />

The Javascript:

<script type="text/javascript">
 
$('.jsClearDefault').each(function(i){
    var defaultValue = $(this).val();
 
    $(this).focus(function(){
        if($(this).val() == defaultValue)
        {
            $(this).val('');
        }
    });
 
    $(this).blur(function(){
        if($(this).val().length == 0)
        {
            $(this).val(defaultValue);
        }
    });
});
 
</script>

All you have to do to get this working on your page is paste the Javascript block right before your </body> tag and give your input fields the jsClearDefault class. You should also have jQuery loaded on your page. You can load it directly from Google using:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

View Live Example

xHTML & CSS Layout with 100 percent height

Posted in CSS, XHTML on July 3rd, 2010 by Joonas – Be the first to comment

Creating a website layout with 100% height got tricky after someone said that you shouldn’t use tables anymore. All the browsers act differently and everything isn’t cookie cutter stuff anymore. Here is a quick little jump start for your next layout that you need to throw together. It is an xHTML and CSS layout built with divs and some CSS trickery. It features a header, navigation, content, sidebar, and footer.

View The Live Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xHTML & CSS Layout with 100% height; includes, header, navigation, content, sidebar, and footer!</title>
        <style type="text/css">
 
        html,body { margin:0; padding:0; height:100%; background: #565656; }
 
        div#container {
            position: relative;
            margin: 0 auto;
            width: 980px;
            background: white;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            border-left: solid 1px black;
            border-right: solid 1px black;
        }
 
        h1,h2 { margin: 0 0 15px 0; padding: 0; }
 
        div.clear { clear: both; height: 0; line-height: 0; font-size: 0; }
 
        div#header { border-bottom: solid 1px black; padding: 15px; background: gray; }
        div#navigation { padding: 5px; background: black; color: white; }
        div#content { padding: 15px 15px 100px 15px; }
        div#footer { position: absolute; width: 100%; bottom: 0; height: 100px; background: gray; border-top: solid 1px black; }
 
        div#content div#main { float: left; width: 735px; }
        div#content div#sidebar { float: right; width: 200px; }
 
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>xHTML & CSS Layout with 100% height</h1>
                <p>Includes: Header, Navigation, Content, Sidebar, and Footer</p>
            </div>
            <div id="navigation">
                Put links and what ever ever navigation elements you want here
            </div>
            <div id="content">
                <div id="main">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Nam placerat aliquam nulla ut imperdiet. Duis feugiat neque et neque suscipit bibendum lacinia libero gravida. Duis et eros in felis viverra mollis vel ut leo. Praesent in neque lectus, quis hendrerit dui. Nunc eu consequat neque. Nunc feugiat, velit et cursus ornare, magna libero aliquam nibh, a ullamcorper ante sapien nec lectus. Integer velit mauris, porttitor in semper nec, hendrerit et ante. Phasellus ante libero, hendrerit quis pretium et, aliquet sed nulla. Morbi id mauris at diam vulputate tristique. Aenean sed eros vel quam venenatis imperdiet nec mattis odio. Ut venenatis, sem eget adipiscing ultricies, lacus nibh imperdiet nisi, eu tincidunt velit dui nec tortor. Sed suscipit, dui id faucibus viverra, massa neque lacinia turpis, vel imperdiet orci sem ac orci. Ut et mauris velit, nec tristique nunc. Vestibulum in orci eget nulla commodo pulvinar eget eget nunc.</p>
                    <p><a href="http://dev.strategystar.net/2010/07/xhtml-css-layout-with-100-percent-height/" style="font-size:2em;">Return to the blog post</a></p>
                    <h2>Cras vitae neque libero, quis elementum sapien</h2>
                    <p>In sollicitudin lectus in ligula semper gravida. Sed erat felis, eleifend eget imperdiet a, luctus eu metus. Pellentesque at elit lacus. Donec consequat, tellus quis fringilla pellentesque, metus ipsum adipiscing tellus, nec sodales nisi felis nec mauris. Etiam at erat eget magna dictum sodales sed sollicitudin lorem. Quisque ornare iaculis neque, id bibendum orci elementum vitae. Ut nisl nunc, volutpat ac tincidunt eu, posuere non orci. Vestibulum fringilla ultrices eros, sit amet mollis sapien hendrerit sit amet. Curabitur dictum feugiat est. Nulla viverra mattis augue non sodales. Phasellus nec lectus vulputate nisi luctus scelerisque et id ligula. Suspendisse potenti.</p>
                </div>
                <div id="sidebar">
                    <h2>Sidebar</h2>
                    <p>All kinds of cool stuff can be placed here!</p>
                </div>
                <div class="clear"> </div>
            </div>
            <div id="footer">
                <p>Put your credits, copyright, and other stuff here. Remember to adjust the height to make it fit your needs.</p>
            </div>
        </div>
    </body>
</html>

You should probably separate the CSS from the example and put it in its own file, but I have kept it all in the HTML document for simplicity’s sake in this example. I hope somebody finds this useful.