Script Tutorials » Script Tutorials | Web Developer Tutorials | HTML5 and CSS3 Tutorials

Musical drop down menu

admin — Wed, 16 May 2012 14:59:35 +0000

Musical drop down menu

Our new tutorial tells about developing cool musical drop down menu (html5 + css3). This menu has css3 animation effects (neat hover effect to menu elements). We also used html5 Audio element in order to add music to this menu. If you are ready, lets start.

Final result

Here are samples and downloadable package:

Live Demo

download in package

Step 1. HTML

As the first, we should prepare HTML layout of our menu. Each menu element (which actually is a unordered list item) has anchor, or nested level.


    Menu element
        
            Submenu element
            .....
        
    
    Menu 4
    .....

Step 2. CSS

Here are the CSS styles of our menu:

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 700px;

    /* border radius */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    /* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav > li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
}

/* keyframes #animation */
@-webkit-keyframes animation {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}
@-moz-keyframes animation {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1.1);
    }
}
#nav li > a:hover {
    /* CSS3 animation */
    -webkit-animation-name: animation;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: animation;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
#nav li:hover ul {
    left: 0;
    top: 34px;
    width: 150px;
}

When we hover over a list item, we will animate (scale) it once to emulate beat effect.

Step 3. HTML5 JavaScript

Now, it is time to add music here. In the beginning, we should prepare a new empty array (to keep our Audio objects), and then, when the page is ready, initialize the music:

// variables
var aLoops = []; // sound loops

// initialization
addEvent(window, 'load', function (event) {

    // load music files
    aLoops[0] = new Audio('media/background.ogg');
    aLoops[0].volume = 0.3;
    aLoops[1] = new Audio('media/button.ogg');
    aLoops[1].volume = 1.0;
    aLoops[2] = new Audio('media/button_click.ogg');
    aLoops[2].volume = 1.0;

    aLoops[0].addEventListener('ended', function() { // loop background sound
        this.currentTime = 0;
        this.play();
    }, false);
    aLoops[0].play();
});

And then, we should add the handlers to different events: mouseover, mouseout and click:

// all the buttons
var aBtns = document.querySelectorAll('#nav li');

// onmouseover event handler
addEvent(aBtns, 'mouseover', function (event) {
    aLoops[1].currentTime = 0;
    aLoops[1].play(); // play click sound
});

// onmouseout event handler
addEvent(aBtns, 'mouseout', function (event) {
    aLoops[1].currentTime = 0;
    aLoops[1].pause(); // play click sound
});

// onclick event handler
addEvent(aBtns, 'click', function (event) {
    aLoops[2].currentTime = 0;
    aLoops[2].play(); // play click sound
});

And voila, we have finalized it.

Live Demo

download in package

Conclusion

Hope that you’ve enjoyed with our new menu. Good luck!

Bottom Menu Builder Part 2

admin — Tue, 15 May 2012 15:48:59 +0000

Bottom Menu Builder Part 2 (HTML5)

Today – our final part of our ‘Bottom Menu Builder’ which we started yesterday. We are going to implement our final features: Preview and Export (optional). So, webmaster will be able to arrange links by drag and drop, and then he can click ‘Preview’ button in order to Preview (and export results). I moved all the links into a separate php file (and now, we can have direct access to these links from PHP). In your case it can be database as example (in case of big project). So, lets start..

As the first, I would suggest you to download the source files and keep the demo opened in a tab for better understanding.

Live Demo

download result

So, lets start

Step 1. HTML

Today we do not have a static html files, I moved the contents of our index.html into a new index.php file.

Step 2. CSS

In addition to our main.css file, I added a new css file (to stylize our preview page):

css/bmenu.css

/* menu builder styles */
.actions {
    border: 1px solid #CCCCCC;
    font-size: 24px;
    margin: 20px auto 5px;
    overflow: hidden;
    padding: 10px;
    width: 900px;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
.column {
    border: 1px dotted #ccc;
    float: left;
    min-height: 100px;
    padding: 10px;
    position: relative;
    width: 33.3%;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.column a {
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 30px;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
}

Step 3. JS

Please add next code to our main.js file (at the bottom, right after the call of updateHandlerDrop):

js/main.js

// preview button
var previewBtn = document.querySelectorAll('#preview');
addEvent(previewBtn, 'click', function (event) {
    if (event.preventDefault) event.preventDefault();

    var params = '';
    var oColumns = document.querySelectorAll('div.column');
    for (var i = 0; i < oColumns.length; i++) {
        var iCol = i+1;
        var sColElems = '';
        for (var k = 0; k < oColumns[i].childNodes.length; k++) {
            if (oColumns[i].childNodes[k].nodeType == document.ELEMENT_NODE && oColumns[i].childNodes[k].tagName == 'A') {
                sColElems += oColumns[i].childNodes[k].id + '_';
            }
        }
        params += iCol + '=' + sColElems + '&';
    }

    // open results
    var http = new XMLHttpRequest();
    http.open('POST', 'preview.php', true);
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    http.setRequestHeader('Content-length', params.length);
    http.setRequestHeader('Connection', 'close');
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            document.open();
            document.write(http.responseText);
            return;
        }
    }
    http.send(params);
    return false;
});

This is Preview button code. As you can see – it prepares all necessary params in order to send to our new ‘preview.php’. Basically, this is some kind of serialization of our active links (in columns).

Step 4. PHP

Now, its time to review our server side scripting. As I told before, I moved all the links into separate php file (links.php), here it is:

links.php

 array('Link 1', '#link1'),
    2 => array('Link 2', '#link2'),
    3 => array('Link 3', '#link3'),
    4 => array('Link 4', '#link4'),
    5 => array('Link 5', '#link5'),
    6 => array('Link 6', '#link6'),
    7 => array('Link 7', '#link7'),
    8 => array('Link 8', '#link8'),
    9 => array('Link 9', '#link9'),
    10 => array('Link 10', '#link10'),
    11 => array('Link 11', '#link11'),
    12 => array('Link 12', '#link12')
);

Now I should generate code for our index page (with builder) with using this array:

index.php

 $aPair) {
    list($sText, $sUrl) = $aPair;
    $sLinks .= ''.$sText.'';
}

?>


    
        
        Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials
        
    
    
        
            Bottom Menu Builder (HTML5) - Step 2 (of 2)
            Back to original tutorial on Script Tutorials
        

        
            Actions:
            
            
        
        Columns (with active elements)
        
            
            
            
        
        
        All (inactive) elements. You can drag these elements into columns.

And finally, our preview page:

preview.php

 $sColEls) { // walk through all POST params
    $iColId = (int)$sCol; // Column ID

    $sColumns .= '';

    $aEls = explode('_', $sColEls); // obtain elements in column
    if (is_array($aEls) && count($aEls)) {
        foreach ($aEls as $iPos => $sEl) { // walk through all elements
            $iEl = (int)$sEl;
            if ($iEl) {
                list($sText, $sUrl) = $aLinks[$iEl];
                $sColumns .= ''.$sText.'';
            }
        }
    }
    $sColumns .= '';
}

// Here you can save current value of $sColumns into some cache file
//file_put_contents('cache/bottom_menu.html', $sColumns);

?>



    
        
        Bottom Menu Builder (HTML5) - Step 2 (of 2) | Script Tutorials
        
    
    
        
            Bottom Menu Builder (HTML5) - Step 2 (of 2)
            Back to original tutorial on Script Tutorials
        

        Result bottom menu (preview)
            Start again

Small code at the top – preparing of result bottom menu (with columns). As you can see, you even can uncomment ‘file_put_contents’ in order to generate cache file of result menu.

Live Demo

download result

Conclusion

That’s all, I hope that we have made really user friendly script – html5 drag and drop menu builder. Hope that our tutorial has helped you. Feel free to share our tutorials with your friends. Good luck!

Bottom Menu Builder (HTML5)

admin — Mon, 14 May 2012 18:15:31 +0000

Bottom Menu Builder (HTML5)

Bottom navigation website menu. I am sure that you have seen it many times (at different websites). As usual, this is three-four columns menu with different links. Today I would like to show you a builder, which you can use to build that bottom menu. Main purpose of this builder – prepare static HTML code (as cache file) for embedding into bottom of your website. If you like that idea, you are welcome to play with it, and I will tell you about creation of nice user friendly menu builder. This tutorial is separated into 2 parts, today I will tell you about first side: user interface with drag and drop possibility.

As the first, I would suggest you to download the source files and keep the demo opened in a tab for better understanding.

Live Demo

download result

So, lets start

Step 1. HTML

index.html


    Actions:
    
    

Columns (with active elements)

    
    
    


All (inactive) elements. You can drag these elements into columns.

    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    Link 7
    Link 8
    Link 9
    Link 10
    Link 11
    Link 12

There are three main sections: block with actions, block with active columns and block with inactive elements. All the elements we can drag and drop between columns. Also we can add and remove our columns.

Step 2. CSS

Now, it’s time to style our menu builder page:

css/main.css

/* menu builder styles */
.actions {
    border: 1px solid #CCCCCC;
    font-size: 24px;
    margin: 20px auto 5px;
    overflow: hidden;
    padding: 10px;
    width: 900px;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.actions button {
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
}
.actions #add_col {
    float: right;
}
.inactive {
    border: 1px dashed #ccc;
    margin: 0 auto;
    width: 900px;
}
.inactive a {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 8px 8px 20px;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    height: 20px;
    margin: 10px;
    opacity: 1;
    position: relative;
    text-align: center;
    width: 180px;

    -khtml-user-drag: element;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 Box Shadow */
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
.inactive a.hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 0;
}
.columns {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
.column {
    border: 2px dashed #ccc;
    float: left;
    min-height: 100px;
    padding: 10px;
    position: relative;
    width: 33.3%;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.column a {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 4px 4px 10px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 30px;
    margin-bottom: 15px;
    opacity: 1;
    position: relative;
    text-align: center;

    -khtml-user-drag: element;
    -webkit-user-drag: element;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 Box Shadow */
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.column img {
    cursor: pointer;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 5;
}

Step 3. JS

js/main.js

// add event handler realization
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

// update handlers for draggable objects
function updateHandlerDrag() {
    var dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        // dragstart event handler
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}

// update handlers for droppable objects
function updateHandlerDrop() {
    var dropAreas = document.querySelectorAll('[droppable=true]');

    // dragover event handler
    addEvent(dropAreas, 'dragover', function (event) {
        if (event.preventDefault) event.preventDefault();

        this.style.borderColor = "#000";
        return false;
    });

    // dragleave event handler
    addEvent(dropAreas, 'dragleave', function (event) {
        if (event.preventDefault) event.preventDefault();

        this.style.borderColor = "#ccc";
        return false;
    });

    // dragenter event handler
    addEvent(dropAreas, 'dragenter', function (event) {
        if (event.preventDefault) event.preventDefault();
        return false;
    });

    // drop event handler
    addEvent(dropAreas, 'drop', function (event) {
        if (event.preventDefault) event.preventDefault();

        // get dropped object
        var iObj = event.dataTransfer.getData('obj_id');
        var oldObj = document.getElementById(iObj);

        // get inner text
        var linkText = oldObj.innerHTML;
        oldObj.className += 'hidden';

        // remove object from DOM
        oldObj.parentNode.removeChild(oldObj);

        // add similar object in another place
        this.innerHTML += ''+linkText+'';

        // and update event handlers
        updateHandlerDrag();

        this.style.borderColor = "#ccc";
        return false;
    });
}

// add column button
var addColBtn = document.querySelectorAll('#add_col');
addEvent(addColBtn, 'click', function (event) {
    if (event.preventDefault) event.preventDefault();

    // recalculate widths for columns
    var oCols = document.querySelector('div.columns');
    var iChilds = oCols.childElementCount + 1;
    var dWidth = 100 / iChilds;

    // add single column
    oCols.innerHTML += '';

    // set new widths
    for (var i = 0; i < iChilds; i++) {
        oCols.children[i].style.width = dWidth + '%';
    }

    // update handlers
    updateHandlerDrop();

    return false;
});

// remove columns
function removeColumn(obj) {
    var oParent = obj.parentNode;

    // move object to inactive area
    var oInactive = document.querySelector('div.inactive');
    for (var i = 0; i < oParent.childNodes.length; i++) {
        if (oParent.childNodes[i].nodeType == document.ELEMENT_NODE && oParent.childNodes[i].tagName == 'A') {
            oInactive.innerHTML += ''+oParent.childNodes[i].innerHTML+'';
        }
    }

    // remove column
    oParent.parentElement.removeChild(oParent);

    // recalculate widths for columns
    var oCols = document.querySelector('div.columns');
    var iChilds = oCols.childElementCount;
    var dWidth = 100 / iChilds;

    // set new widths
    for (var i = 0; i < iChilds; i++) {
        oCols.children[i].id = 'drop_' + (i + 1);
        oCols.children[i].style.width = dWidth + '%';
    }

    // update handlers
    updateHandlerDrop();
    updateHandlerDrag();
}

// update handlers
updateHandlerDrag();
updateHandlerDrop();

There are a lot of event handlers (in order to make that html5 drag and drop). In the beginning, the script updates different handlers for all draggable and dropable objects. During dragging between blocks (drop areas) we should recreate objects and update handlers. In case when we need to remove column, we should move all the object of active column back to inactive area (with list of all possible elements). Tomorrow we will teach our builder to generate results.

Live Demo

download result

Conclusion

That’s all, today we have implemented first half of our bottom menu builder with native Drag and Drop functionality. Hope that our tutorial has helped you. Feel free to share our tutorials with your friends. Good luck!

CSS3 Form Design – Vintage

admin — Thu, 10 May 2012 18:39:18 +0000

CSS3 Form Design – Vintage

Today I prepared great CSS3 styles for forms in vintage style. You can see here styles of most necessary html form elements: text field, selector, checkbox, radio, button, file, textarea and submit button. I hope that I’m not in vain spent the whole evening. It is possible that it will be whole set of styles for your website. Now, let check it.

Final Result

Live Demo

download result

So, lets start

Step 1. HTML

Our form contains all the most of possible form elements:

index.html


    
        
            
                Name
                
            
            
                Email
                
            
        
    
    
        
            
                Text Field
                
            
            
                Selector
                
                    Please Select...
                    
                
            
            
                Disabled
                
                    
                    
                
            
            
                Checkbox active
                
                    
                    
                
                Checkbox checked
                
                    
                    
                
            
            
                Radio checked
                
                    
                    
                

                Radio unchecked
                
                    
                    
                
            
            
                Buttons
                Button 1
                Button 2
                Button 3
            
            
                File
                
                    Please select file
                    Upload
                    
                
            
            
                Textarea

Step 2. CSS

Now, its time to style our form. Don’t forget to include our CSS file in the head section of the result page.

css/forms.css

@font-face {
	font-family:'ClarendonRoman';
	src:url('../font/clarebtrom-webfont.ttf') format('truetype');
}
form {
	background-color:#fff;
	overflow:hidden;
	width:465px;
	margin:30px auto;
	padding:10px;
}
form label {
	font:13px "ClarendonRoman", Georgia, Times, serif;
	color:#525250;
	letter-spacing:2px;
	text-transform:uppercase;
	float:left;
	position:relative;
	top:4px;
}
form ul li {
	padding-top:10px;
	clear:both;
	overflow:hidden;
}
form select,form input {
	float:right;
}
form input {
	border-bottom:1px dashed #989895;
	border-right:none;
	border-left:none;
	border-top:none;
	color:#4f4f4f;
	background:none;
	outline:none;
	position:relative;
	font:16px "SeanRegular", Courier New, Courier New, Courier6, monospace;
	letter-spacing:1px;
}
form input:focus {
	border-bottom:1px dashed #000;
	-webkit-transition:border 0.3s ease-in;
	-moz-transition:border 0.3s ease-in;
	-o-transition:border 0.3s ease-in;
	transition:border 0.3s ease-in;
}
form input[type="text"] {
	width:300px;
}
fieldset {
	border:0;
	border-bottom:1px solid #A7A7A4;
	margin-bottom:10px;
	padding:10px;
}
textarea {
	margin-top:4px;
	width:445px;
	height:150px;
	border:none;
	background:none;
	outline:none;
	resize:none;
	overflow:auto;
	color:#4f4f4f;
	font:16px "SeanRegular", Courier New, Courier New, Courier6, monospace;
	letter-spacing:1px;
	float:left;
	display:block;
}
form input[type="submit"] {
	cursor:pointer;
	background:url(../images/submit.png) no-repeat;
	width:445px;
	height:86px;
	border:none;
	text-indent:-9999px;
	position:relative;
	bottom:10px;
}
form input[type="submit"]:hover {
	background-position:0 -86px;
}

div.selector,div.selector span,div.checker span,div.radio span,div.uploader,div.uploader span.action,div.button,div.button span {
	background-image:url(../images/sprite.png);
	background-repeat:no-repeat;
	-webkit-font-smoothing:antialiased;
}
.selector,.radio,.checker,.uploader,.button,.selector *,.radio *,.checker *,.uploader *,.button * {
	margin:0;
	padding:0;
}
.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
	outline: 0;
}
input.text,input.password,textarea {
	font-size:12px;
	font-family:"ClarendonRoman", Georgia, Times, serif;
	font-weight:400;
	color:#777;
	border-top:solid 1px #aaa;
	border-left:solid 1px #aaa;
	border-bottom:solid 1px #ccc;
	border-right:solid 1px #ccc;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	outline:0;
	padding:3px;
}
input.text:focus,input.password:focus,textarea:focus {
	border-color:#999;
}
div.selector {
	background-position:-483px -130px;
	float:right;
	font:12px "ClarendonRoman",Georgia,Times,serif;
	height:26px;
	left:7px;
	overflow:hidden;
	padding-left:10px;
	position:relative;
	width:300px;
}
div.selector select {
	background:none;
	border:medium none;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:12px;
	height:25px;
	left:0;
	opacity:0;
	position:absolute;
	top:0;
	width:300px;
}
div.selector span {
	cursor:pointer;
	background-position:right 0;
	height:26px;
	line-height:26px;
	display:block;
	float:left;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:268px;
	text-shadow:0 1px 0 #fff;
	color:#636363;
	padding:0 25px 0 2px;
}
div.selector:active {
	background-position:-483px -156px;
}
div.selector:active span {
	background-position:right -26px;
}
div.selector:hover {
	background-position:-483px -182px;
}
div.selector:hover span {
	background-position:right -52px;
}
div.selector:hover:active {
	background-position:-483px -208px;
}
div.selector:hover:active span {
	background-position:right -78px;
}
div.selector.disabled {
	background-position:-483px -234px;
}
div.selector.disabled span {
	color:#bbb;
	background-position:right -104px;
}
div.checker {
	float:left;
	height:19px;
	margin-right:10px;
	margin-top:4px;
	position:relative;
	width:19px;
}
div.checker input {
	background:none;
	display:inline-block;
	height:19px;
	opacity:0;
	width:19px;
}
div.checker span {
	background-position:0 -260px;
	display:block;
	float:left;
	height:19px;
	text-align:center;
	width:19px;
}
div.checker:active span {
	background-position:-19px -260px;
}
div.checker:hover span {
	background-position:-38px -260px;
}
div.checker:active:hover span {
	background-position:-57px -260px;
}
div.checker span.checked {
	background-position:-76px -260px;
}
div.checker:active span.checked {
	background-position:-95px -260px;
}
div.checker:hover span.checked {
	background-position:-114px -260px;
}
div.checker:hover:active span.checked {
	background-position:-133px -260px;
}
div.radio {
	width:18px;
	height:18px;
	position:relative;
	float:left;
	margin-top:4px;
	margin-right:10px;
}
div.radio input {
	width:18px;
	height:18px;
	opacity:0;
	text-align:center;
	display:inline-block;
	background:none;
}
div.radio span {
	height:18px;
	width:18px;
	background-position:0 -279px;
	display:block;
	float:left;
	text-align:center;
}
div.radio:active span {
	background-position:-18px -279px;
}
div.radio:hover span {
	background-position:-36px -279px;
}
div.radio:active:hover span {
	background-position:-54px -279px;
}
div.radio span.checked {
	background-position:-72px -279px;
}
div.radio:active span.checked {
	background-position:-90px -279px;
}
div.radio:hover span.checked {
	background-position:-108px -279px;
}
div.radio:hover:active span.checked {
	background-position:-126px -279px;
}
div.uploader {
	background-position:0 -297px;
	height:28px;
	position:relative;
	float:right;
	overflow:hidden;
	width:303px;
	margin-bottom:20px;
	margin-left:23px;
	cursor:pointer;
}
div.uploader span.action {
	background-position:right -409px;
	height:24px;
	line-height:24px;
	float:left;
	display:inline;
	overflow:hidden;
	cursor:pointer;
	width:124px;
	text-align:center;
	text-shadow:#fff 0 1px 0;
	background-color:#f9f9f5;
	font:bold 12px/24px "ClarendonRoman", Georgia, Times, serif;
	color:#636363;
	padding:2px 0;
}
div.uploader span.filename {
	height:24px;
	line-height:24px;
	float:left;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:default;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#777;
	width:157px;
	font-size:11px;
	margin:2px 0 2px 2px;
	padding:0 10px;
}
div.uploader:hover {
	background-position:0 -353px;
}
div.uploader:hover span.action {
	background-position:right -437px;
}
div.uploader:active span.action {
	background-position:right -465px;
}
div.uploader:focus:active span.action {
	background-position:right -493px;
}
div.uploader input {
	width:303px;
	opacity:0;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	float:right;
	height:25px;
	border:none;
	cursor:default;
}
div.button button,div.button input {
	position:absolute;
}
div.button {
	background-position:0 -523px;
	cursor:pointer;
	position:relative;
	display:-moz-inline-block;
	display:inline-block;
	height:30px;
}
div.button span {
	background-position:right -643px;
	display:-moz-inline-block;
	display:inline-block;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:12px;
	font-weight:700;
	height:22px;
	letter-spacing:1px;
	line-height:1;
	margin-left:13px;
	padding-left:2px;
	padding-right:15px;
	padding-top:8px;
	text-align:center;
	text-transform:uppercase;
}
div.button:focus,div.button:hover {
	background-position:0 -553px;
}
div.button:focus span,div.button:hover span {
	background-position:right -673px;
}
div.button.active,div.button:active {
	background-position:0 -583px;
}
div.button.active span,div.button:active span {
	background-position:right -703px;
	color:#555;
}
div.button.disabled,div.button:disabled {
	background-position:0 -613px;
}
div.button.disabled span,div.button:disabled span {
	background-position:right -733px;
	color:#bbb;
	cursor:default;
}

I hope that I was able to cover all necessary styles. These styles should work well in most of popular browsers.

Live Demo

download result

Conclusion

If you like our result – don’t forget to vote up, thanks in advance. You are free to modify our result and use it at your websites. Good luck!

Infographic: HTML5 and Game Development

admin — Wed, 09 May 2012 15:43:52 +0000

Infographic: HTML5 and Game Development

Today I would like to show you new interesting HTML5 infographics. Both of them related with web game development. Nowadays – HTML5 is a new Web based standard with very big potential to create cross-platform applications. It has just been evolving, and even now we can create various applications with using html5. What about Flash? Flash is still alive. And today you can compare updated information about flash and html5. I’m not sure that this is holy war, I think that this is just different standards, but anyway – this is interesting.

Information Graphics (known as infographics) are one of the best ways to transfer some information into a reader’s mind. It can be something new, or other useful information gathered in one place. Nowadays many people don’t have enough time to read a lot of text on multiple screens. Infographics makes the information intuitive and understandable. That’s why we would like to share the best relevant infographics from all over the web.

Download In High Quality

Original source: The Hype Versus Reality of HTML5 Deployment

Original source: 8bitrocket.com April 2012 HTML5 Game Development Poll Results Infographic

Google Maps API v3 Practical Implementation

admin — Tue, 08 May 2012 17:55:11 +0000

Google Maps API v3 Practical Implementation

In our new tutorial I would like to give you one interesting example of Google Maps API (v3) implementation. Let assume, that you have website with own members. And, you need to add possibility to save map positions of your members at your website. Or, you have to store map coordinates for something else (as example – business locations). I think that this is one of usual tasks in webdevelopment. For our practical realization I took the base of our chat system (I removed everything unnecessary except registration). Now, I will add here next features: index page block with map of 20 recent locations of members, profile page map (with single marker), and page to set coordinates at map.

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

If you have already had `cs_profiles` table in your database (due of tests), you don’t need remove previous version, keep it, and add second one new table `latlng268`:

CREATE TABLE `cs_profiles` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `name` varchar(255) NOT NULL default '',
  `first_name` varchar(255) NOT NULL default '',
  `last_name` varchar(255) NOT NULL default '',
  `email` varchar(255) NOT NULL default '',
  `password` varchar(40) NOT NULL default '',
  `salt` varchar(10) NOT NULL default '',
  `status` enum('active','passive') NOT NULL default 'active',
  `role` tinyint(4) unsigned NOT NULL default '1',
  `about` varchar(255) NOT NULL,
  `date_reg` datetime NOT NULL default '0000-00-00 00:00:00',
  `date_nav` datetime NOT NULL default '0000-00-00 00:00:00',
  `color` varchar(6) NOT NULL,
  `rate` float NOT NULL,
  `rate_count` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

CREATE TABLE `latlng268` (
  `id` int(11) unsigned NOT NULL auto_increment,
  `profile` int(11) unsigned NOT NULL,
  `name` varchar(255) NOT NULL default '',
  `lat` double NOT NULL,
  `lng` double NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 2. HTML

This is Login / Join form template:

templates/login_form.html


    Google Maps API v3 Practical Implementation
    Our demonstration contains next features: member registration, and possibility to add own custom marker at google map.



    
        
            Log In
            Join
        
    

    
        
            Username:
            Password:
            
        
        

            Full name:
            

            First name:
            

            Last name:
            

            Email:
            

            Password:
            

            Repeat Password:
            

            
        
    

    Powered by Script Tutorials

Very easy form, isn’t it? Next template – small logout template (with link to page to set position):

templates/logout_form.html


    Log Out
    Hello {name}
    Your status:
    {status}
    Set my position

Again – very easy template. Next template – index (main) page template:

templates/main_page.html




    Google Maps API v3 Practical Implementation
    
    
    
    


    
        Google Maps API v3 Practical Implementation
        Back to original tutorial on Script Tutorials
    
    
    
        {form}
    
    
        Main Map
        
            
        
    

    
        
            Online Members Block
            {online_members}
        
        
            Last Members
            {profiles}

Here you can see google maps initialization – this is very easy JS script, where we need prepare map options and initialize map object, and then – we need to add 20 (optonal) recent positions. Next template – profile page template:

templates/profile_page.html




    Google Maps API v3 Practical Implementation
    
    
    


    
        Google Maps API v3 Practical Implementation
        Back to original tutorial on Script Tutorials
    
    
    
        
            Name: {name}
            First name: {fname}
            Last name: {lname}
            About: {about}
            Date Reg: {datereg}
        
        
            Back to main page
        
    

    {map}

    
        
            Online Members Block
            {online_members}
        
        
            Last Members
            {profiles}

At this page, we will see single profile view page, and, if he (that member) has set his coordinates, we will see google map at his page. Next template – html template of that profile’s map:

templates/profile_map.html

You can see here new google map initialization in certain coordinates with marker, and we add event listener (when we click at marker) to display popup info (InfoWindow). And finally, we should prepare last one template file – for page where member can setup own coordinates:

templates/setpos_page.html




    Google Maps API v3 Practical Implementation
    
    
    


    
        Google Maps API v3 Practical Implementation
        Back to original tutorial on Script Tutorials
    
    
    
        Back to main page

        Type full street address into field and click on FIND to center map on location.
        
        

        
        Please confirm your position

This Javascript is more complicated, I added here possibility to drag marker, and also I added search panel, so now we can search by exact names.

Step 3. CSS

Now, it’s time to apply styles:

css/main.css

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#eee;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    float: left;
    font-size:22px;
    font-weight:normal;
    margin-left:10px;
    margin-right:20px;
    padding:22px 0;
}
header a.stuts,a.stuts:visited{
    float: left;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    height:70px;
    line-height:70px;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/* main styles */
a {
    color: #333;
    outline: none;
    text-decoration: none;
}
a:hover,a:active {
    outline: 0;
    text-decoration: none;
}
.container {
    background-color: #F2F4F8;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 2px 0 2px -2px #B2B9C9 inset;
    color: #333333;
    margin: 20px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 70%;
    float:left;
}
#con1.container {
    width: 300px;
}
#con2.container {
    width: 500px;
}
.container h2 {
    margin-bottom: 10px;
}
.column {
}
.column:first-child {
}
.column > * {
    margin-bottom: 10px;
}
.clear {
    clear: both;
    font-size: 1px;
}
.sidebar {
    background-color: #F2F4F8;
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 2px 0 2px -2px #B2B9C9 inset;
    color: #333333;
    display: block;
    height: 100%;
    padding: 10px;
    position: fixed;
    right: 0;
    top: 0;
    width: 250px;
    z-index: 101;
}
.sidebar > div {
    margin-bottom: 30px;
}

/* tabs section */
.tabs_container {
    margin: 0;
}
.tabs {
    overflow: hidden;
}
.tabs li {
    float: left;
    list-style: none;
}
.tabs li h3:first-child {
    margin-left: 10px
}
.tabs li h3 {
    border: 1px solid #ddd;
    border-bottom-width: 0;
    display: block;
    margin: 0 2px 0 0;
    padding: 6px 10px 4px
}
.tabs li.active h3 {
    background-color: #ccc;
    border: 1px solid #ddd;
    border-bottom-width: 0;

    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
.tabs li h3:hover {
    background-color: #bbb;
    cursor: pointer;
}
.tabs li.active h3:hover {
    background-color: #ccc;
    cursor: normal;
}
.nav_container form {
    background-color: #ccc;
    display: block;
    padding: 15px;
}
.login_form input,.login_form label,
.join_form input,.join_form label {
    display: block;
    margin-bottom: 10px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border-style: groove;
}
input[type=text], input[type=password] {
    border-style: groove;
    font-size: 16px;
    height: 25px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit],
input[type=file]{
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 35px;
    padding: 5px;
}

/* profiles */
.profiles {
    overflow: hidden;
}
.profiles a {
    display: block;
}
.profiles div {
    overflow: hidden;
}
.profiles div a {
    color: #333333;
    display: block;
    padding: 2px 22px 2px 10px;
    position: relative;
}
.profiles div a:hover {
    background-color: #E0E4EE;
    box-shadow: 2px 0 2px -2px #B2B9C9 inset;
}

.profiles div img {
    border: 0;
    float: left;
    height: 48px;
    margin-right: 8px;
    width: 48px;
}
.profiles div p {
    display: block;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profiles div img.status_img {
    border: 0;
    display: block;
    height: 7px;
    margin-top: -6px;
    position: absolute;
    right: 5px;
    top: 50%;
    width: 7px;
}

Step 4. PHP

Our PHP files are separated into two types: action files and classes. I think that you have already saw sources of most of classes of chat project. So, first two files are same:

classes/CLogin.php

classes/CMySQL.php

We don’t need to re-publish sources of both files again. Both are available in our package. But I updated Profiles class file (I removed all unnecessary here, now it contains only registration and few other functions):

classes/CProfiles.php

escape($_POST['username']);
        $sFirstname = $GLOBALS['MySQL']->escape($_POST['firstname']);
        $sLastname = $GLOBALS['MySQL']->escape($_POST['lastname']);
        $sEmail = $GLOBALS['MySQL']->escape($_POST['email']);
        $sPassword = $GLOBALS['MySQL']->escape($_POST['password']);

        if ($sUsername && $sEmail && $sPassword) {
            // check if already exist
            $aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `cs_profiles` WHERE `email`='{$sEmail}'");
            if ($aProfile['id'] > 0) {
                $sErrors = 'Another profile with same email already exist';
            } else {
                // generate Salt and Cached password
                $sSalt = $this->getRandCode();
                $sPass = sha1(md5($sPassword) . $sSalt);

                // add new member into database
                $sSQL = "
                    INSERT INTO `cs_profiles` SET
                    `name` = '{$sUsername}',
                    `first_name` = '{$sFirstname}',
                    `last_name` = '{$sLastname}',
                    `email` = '{$sEmail}',
                    `password` = '{$sPass}',
                    `salt` = '{$sSalt}',
                    `status` = 'active',
                    `role` = '1',
                    `date_reg` = NOW();
                ";
                $GLOBALS['MySQL']->res($sSQL);

                // autologin
                $GLOBALS['CLogin']->performLogin($sUsername, $sPassword);
            }
        }
    }

    // get random code (for salt)
    function getRandCode($iLen =  {
        $sRes = '';

        $sChars = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
        for ($i = 0; $i < $iLen; $i++) {
            $z = rand(0, strlen($sChars) -1);
            $sRes .= $sChars[$z];
        }
        return $sRes;
    }

    // get profiles block
    function getProfilesBlock($iLim = 20, $bOnlineOnly = false) {
        $iPLimit = PROFILE_TIMEOUT;
        $sOnlineSQL = ($bOnlineOnly) ? 'AND (`date_nav` > SUBDATE(NOW(), INTERVAL ' . $iPLimit . ' MINUTE))' : '';
        $sSQL = "
            SELECT `cs_profiles`.*,
            if (`date_nav` > SUBDATE(NOW(), INTERVAL {$iPLimit} MINUTE ), 1, 0) AS `is_online`
            FROM `cs_profiles`
            WHERE `status` = 'active'
            {$sOnlineSQL}
            ORDER BY `date_reg` DESC
            LIMIT {$iLim}
        ";
        $aProfiles = $GLOBALS['MySQL']->getAll($sSQL);

        // create list of messages
        $sCode = '';
        foreach ($aProfiles as $i => $aProfile) {
            $sName = $aProfile['name'];
            $iPid = $aProfile['id'];
            $sOnline = ($aProfile['is_online'] == 1) ? '' : '';
            $sCode .= ''.$sName.'
'.$sOnline.'';
        }

        $sClass = ($bOnlineOnly) ? 'profiles online_profiles' : 'profiles';
        return '' . $sCode . '';
    }

    // get profile info
    function getProfileInfo($i) {
        $sSQL = "
            SELECT *
            FROM `cs_profiles`
            WHERE `id` = '{$i}'
        ";
        $aInfos = $GLOBALS['MySQL']->getAll($sSQL);
        return $aInfos[0];
    }
}

$GLOBALS['CProfiles'] = new CProfiles();

Now lets review our main files:

index.php

=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php'); // service class to work with database
require_once('classes/CLogin.php'); // service class to work with login processing
require_once('classes/CProfiles.php'); // service class to work with profiles

// join processing
if (! isset($_SESSION['member_id']) && $_POST['Join'] == 'Join') {
    $GLOBALS['CProfiles']->registerProfile();
}

// login system init and generation code
$sLoginForm = $GLOBALS['CLogin']->getLoginBox();

if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active') {
    if ($_GET['action'] == 'update_last_nav') { // update last navigate time
        $iPid = (int)$_SESSION['member_id'];
        if ($iPid) {
            $GLOBALS['MySQL']->res("UPDATE `cs_profiles` SET `date_nav` = NOW() WHERE `id` = '{$iPid}'");
        }
        exit;
    }
}

// get profiles lists
$sProfiles = $GLOBALS['CProfiles']->getProfilesBlock();
$sOnlineMembers = $GLOBALS['CProfiles']->getProfilesBlock(10, true);

// prepare set of markers for global map
$sMarkers = '';
$aRecentMarkers = $GLOBALS['MySQL']->getAll("SELECT * FROM `latlng268` ORDER BY `id` DESC LIMIT 20");
foreach ($aRecentMarkers as $i => $sMInfo) {
    if ($sMInfo['lat'] != 0 && $sMInfo['lng'] != 0) {
        $sUnitLocation = str_replace('"', '', $sMInfo['name']);

        $sMarkers .= << $sLoginForm,
    '{profiles}' => $sProfiles,
    '{online_members}' => $sOnlineMembers,
    '{add_markers}' => $sMarkers
);
echo strtr(file_get_contents('templates/main_page.html'), $aKeys);

Pay attention to code where we add markers for map. By default, there are only 20 last markers. You always can play with that limit. Our next file – profile page:

profile.php

=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php'); // service class to work with database
require_once('classes/CLogin.php'); // service class to work with login processing
require_once('classes/CProfiles.php'); // service class to work with profiles

// get basic info about profile
$iPid = (int)$_GET['id'];
$aInfo = $GLOBALS['CProfiles']->getProfileInfo($iPid);
$sName = $aInfo['name'];
$sFName = $aInfo['first_name'];
$sLName = $aInfo['last_name'];
$sAbout = $aInfo['about'];
$sDate = $aInfo['date_reg'];

// get map block
$sMap = '';
$aPosInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `latlng268` WHERE `profile` = '{$iPid}'");
if ($aPosInfo['id']) {
    $aPosKeys = array(
        '{lat}' => $aPosInfo['lat'],
        '{lng}' => $aPosInfo['lng'],
        '{name}' => str_replace('"', '', $sName)
    );
    $sMap = strtr(file_get_contents('templates/profile_map.html'), $aPosKeys);
}

// get profiles listings
$sProfiles = $GLOBALS['CProfiles']->getProfilesBlock();
$sOnlineMembers = $GLOBALS['CProfiles']->getProfilesBlock(10, true);

// draw common page
$aKeys = array(
    '{id}' => $iPid,
    '{name}' => $sName,
    '{fname}' => $sFName,
    '{lname}' => $sLName,
    '{about}' => $sAbout,
    '{datereg}' => $sDate,
    '{profiles}' => $sProfiles,
    '{online_members}' => $sOnlineMembers,
    '{map}' => $sMap
);
echo strtr(file_get_contents('templates/profile_page.html'), $aKeys);

As you can see – most of the code are already commented. So I hope that this code are pretty understandable. And, in the long run – our new file which we use to set our coordinates:

setpos.php

=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php'); // service class to work with database
require_once('classes/CLogin.php'); // service class to work with login processing
require_once('classes/CProfiles.php'); // service class to work with profiles

$iPid = (int)$_SESSION['member_id'];

// save coordinates
if ($_POST && $_POST['Confirm']) {
    $dLat = (double)$_POST['lat'];
    $dLng = (double)$_POST['lng'];

    if ($iPid && $dLat && $dLng) {

        $aInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `latlng268` WHERE `profile` = '{$iPid}'");
        if ($aInfo['id']) {
            $GLOBALS['MySQL']->res("UPDATE `latlng268` SET `lat` = '{$dLat}', `lng` = '{$dLng}' WHERE `profile` = '{$iPid}'");
        } else {
            $aPInfo = $GLOBALS['CProfiles']->getProfileInfo($iPid);
            $sName = $GLOBALS['MySQL']->escape($aPInfo['name']);
            $GLOBALS['MySQL']->res("INSERT INTO `latlng268` SET `lat` = '{$dLat}', `lng` = '{$dLng}', `profile` = '{$iPid}', `name` = '{$sName}'");
        }
        header('Location: profile.php?id=' . $iPid);
    }
}

// find profile coordinates
$aPosInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `latlng268` WHERE `profile` = '{$iPid}'");
$dLat = 40;
$dLng = -75;
if ($aPosInfo['id']) {
    $dLat = $aPosInfo['lat'];
    $dLng = $aPosInfo['lng'];
}

// draw page
$aKeys = array(
    '{lat}' => $dLat,
    '{lng}' => $dLng
);
echo strtr(file_get_contents('templates/setpos_page.html'), $aKeys);

Step 5. Javascript

I added that simple script in order to update (periodically) time of our last navigation (simulation of online status)

js/update.js

$(function() {
    // Update last navigation time feature
    updateLastNav = function() {
        $.getJSON('index.php?action=update_last_nav', function() {

            // refresh last nav time
            setTimeout(function(){
               updateLastNav();
            }, 180000); // 3 mins
        });
    }
    updateLastNav();
});

Live Demo

download in archive

Conclusion

I hope that our new tutorial was very useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

Powerful Chat System – Lesson 8

admin — Mon, 07 May 2012 13:33:59 +0000

Powerful Chat System – Lesson 8

Today we continue a series of articles on the creation of powerful chat system. In our eighth lesson I added several features: I gave right to block (and unblock) members for admins and moderators (now, they can perform normal moderation – they can ban members), and I added rates to our members. Now, every active member can put his vote for another members.

Today I will publish updated sources of our growing project. All project is well structured: system classes is in ‘classes’ folder, all javascript files in ‘js’ folder, stylesheets in ‘css’ folder, all custom avatars in ‘data’ folder, images in ‘images’ folder, template files in ‘templates’ folder.

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

I added one new table into database ‘cs_profiles_vote_track’. This table keeps records voting (track). Please execute next SQL:

CREATE TABLE `cs_profiles_vote_track` (
  `pid` int(11) unsigned NOT NULL default '0',
  `ip` varchar(20) default NULL,
  `date` datetime default NULL,
  KEY `uip` (`ip`,`pid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 2. HTML

I updated template of our profile page. Now it contains extra button (block feature) and rate block:

templates/profile_page.html




    Powerful Chat System - Lesson 8
    
    
    

    


    
        Powerful Chat System - Lesson 8
        Back to original tutorial on Script Tutorials
    
    
    
        
            Name: {name}
            First name: {fname}
            Last name: {lname}
            About: {about}
            Date Reg: {datereg}
            Role: {role}
            Avatar: 
        
        
            Back to chat
                {actions}
            

        
    
    {rate}
    
        You can customize your profile page
        
            
        
        
            
                
            

            
                
                
                
                
            
            
        
    

    
        
            Online Members Block
            {online_members}
        
        
            Last Members
            {profiles}
        
    

    
    {priv_js}

And, we have one new template for rate block:

templates/vote.html






    
        
            
                
                    {votes}
                
                
            
            {rate_cnt} votes

Step 3. CSS

I added new css file to keep styles of our vote element:

css/vote.css

.votes_main {
    margin: 10px auto;
    overflow: hidden;
    width: 450px;
}
.votes_gray {
    background-image: url("../images/star_gray.png");
    float: left;
    height: 64px;
    position: relative;
}
.votes_active {
    background-image: url("../images/star.png");
    height: 64px;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
.votes_buttons {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 2;
}
.votes_button {
    border: medium none;
    height: 64px;
    margin: 0;
    padding: 0;
    width: 64px;
}
.votes_main span {
    color: #333333;
    display: block;
    float: left;
    font-weight: bold;
    font-size: 18px;
    line-height: 64px;
    margin-left: 10px;
}

Step 4. PHP

Profile page file was updated, I added only few lines at the bottom (into array), it isn’t necessary to publish whole file, but I will give you updated array:

profile.php

// draw common page
$aKeys = array(
    '{id}' => $iPid,
    '{name}' => $sName,
    '{fname}' => $sFName,
    '{lname}' => $sLName,
    '{about}' => $sAbout,
    '{datereg}' => $sDate,
    '{role}' => $sRole,
    '{avatar}' => $sAvatar,
    '{custom_styles}' => $sCustomBG,
    '{cust_visible}' => ($_SESSION['member_id'] == $iPid) ? '' : 'style="display:none"',
    '{profiles}' => $sProfiles,
    '{online_members}' => $sOnlineMembers,
    '{priv_js}' => $sPrivChatJs,
    '{actions}' => $GLOBALS['CProfiles']->getBlockMemberAction($iPid),
    '{rate}' => $GLOBALS['CProfiles']->getBlockRate($iPid),
);

This is our next updated file. There are three new functions (you can add them at the bottom of our class:

classes/CProfiles.php

// get block member action button
function getBlockMemberAction($iPid) {
    if ($_SESSION['member_id'] != $iPid && $_SESSION['member_status'] == 'active' && in_array($_SESSION['member_role'], array(4, 5))) {
        $aMyInfo = $this->getProfileInfo($_SESSION['member_id']);
        $aInfo = $this->getProfileInfo($iPid);

        if ($aMyInfo['role'] > $aInfo['role']) {
            $sStatus = $aInfo['status'];
            $sDescDesc = ($sStatus == 'active') ? 'Block this member' : 'Unblock this member';

            return '';
        }
    }
}

// block member
function blockMember($iPid) {
    if ($iPid) {
        $aInfo = $this->getProfileInfo($iPid);
        $sStatus = $aInfo['status'];
        $sUpStatus = ($sStatus == 'active') ? 'passive' : 'active';
        $sSQL = "
            UPDATE `cs_profiles` SET
            `status` = '{$sUpStatus}'
            WHERE `id` = '{$iPid}'
        ";
        $GLOBALS['MySQL']->res($sSQL);
        return ($sStatus == 'active') ? 2 : 1;
    }
    return;
}

// get block member action button
function getBlockRate($iPid) {
    if ($_SESSION['member_id'] != $iPid && $_SESSION['member_status'] == 'active') {
        // $aMyInfo = $this->getProfileInfo($_SESSION['member_id']);
        $aInfo = $this->getProfileInfo($iPid);

        // vote element
        $iIconSize = 64;
        $iMax = 5;
        $iRate = $aInfo['rate'];
        $iRateCnt = $aInfo['rate_count'];
        $fRateAvg = ($iRate && $iRateCnt) ? $iRate / $iRateCnt : 0;
        $iWidth = $iIconSize*$iMax;
        $iActiveWidth = round($fRateAvg*($iMax ? $iWidth/$iMax : 0));

        $sVot = '';
        for ($i=1 ; $i<=$iMax ; $i++) {
            $sVot .= '';
        }

        $aKeys = array(
            '{pid}' => $iPid,
            '{width}' => $iWidth,
            '{rate_cnt}' => $iRateCnt,
            '{rate_avg}' => $fRateAvg,
            '{votes}' => $sVot,
            '{act_width}' => $iActiveWidth,
        );
        return strtr(file_get_contents('templates/vote.html'), $aKeys);
    }
}

First one function getBlockMemberAction returns one little button for profile page. Clicking at this page will force block / unblock members. This function available only for moderators and admins. And, moderator can’t block admin, only admin can block moderator. Second one function blockMember updates profile status (block). And, last one – getBlockRate returns block with rate object (stars), where we can vote for members.

In order to perform different actions, I added one new PHP file:

actions.php

=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php');
require_once('classes/CLogin.php');
require_once('classes/CProfiles.php');

// for logged-in members only
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active') {
    if (in_array($_SESSION['member_role'], array(4, 5))) { // for moderators and admins only
        if ($_POST['action'] == 'block') { // Block action
            $iRes = $GLOBALS['CProfiles']->blockMember((int)$_POST['pid']);
            header('Content-Type: text/html; charset=utf-8');
            echo $iRes;
            exit;
        }
    }

    if ($_POST['action'] == 'put_vote') { // Put vote action
        $iPid = (int)$_POST['id'];
        $iVote = (int)$_POST['vote'];
        $sIp = getVisitorIP();

        // we can vote once per week (protection)
        $iOldId = $GLOBALS['MySQL']->getOne("SELECT `pid` FROM `cs_profiles_vote_track` WHERE `pid` = '{$iPid}' AND `ip` = '{$sIp}' AND (`date` >= NOW() - INTERVAL 7 DAY) LIMIT 1");
        if (! $iOldId) {
            $GLOBALS['MySQL']->res("INSERT INTO `cs_profiles_vote_track` SET `pid` = '{$iPid}', `ip` = '{$sIp}', `date` = NOW()");
            $GLOBALS['MySQL']->res("UPDATE `cs_profiles` SET `rate` = `rate` + {$iVote}, `rate_count` = `rate_count` + 1 WHERE `id` = '{$iPid}'");
            header('Content-Type: text/html; charset=utf-8');
            echo 1;
            exit;
        }
    }
}

function getVisitorIP() {
    $ip = "0.0.0.0";
    if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
        $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
        $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
    } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
        if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
            $ip = $_SERVER['REMOTE_ADDR'];
        }
    }
    return $ip;
}

Since today, I will use this file to perform different hidden actions. Now, I use this file to perform member blocking and to accept votes for members.

Step 5. Javascript

I added new JS file which will perform different admin’s service methods. First of them is blocking of members

js/admin_utils.js

$(function() {

    // block member
    $('#block').click(function(event) {
        var oBtn = $(this);
        $.post('actions.php', { pid: oBtn.attr('pid'), action: 'block' },
            function(data){
                if (data != undefined) {
                    oBtn[0].innerHTML = (data == 2) ? 'Unblock this member' : 'Block this member';
                }
            }
        );
    });
});

Another one JS file to work with rate object

js/vote.js

$(function(){
    var width = 0;

    $('.votes_buttons a').hover(
        function () {
            width = $(this).attr('id') * 64;
            $('.votes_active').width(width + 'px');
        },
        function () {
            width = $(this).parent().attr('val') * 64;
            $('.votes_active').width(width + 'px');
        }
    );

    $('.votes_buttons a').click(function () {
        var idVal = $(this).parent().attr('id');
        var iCnt = $(this).parent().attr('cnt');
        var voteVal = $(this).attr('id');
        var iSelWidth = voteVal * 64;

        $.post('actions.php', { id: idVal, vote: voteVal, action: 'put_vote' },
            function(data){
                if (data == 1) {
                    width = iSelWidth;
                    $('.votes_active').width(iSelWidth + 'px');
                    iCnt = parseInt(iCnt) + 1;
                    $('.votes_main span b').text(iCnt);
                    $('.votes_buttons').attr('val', voteVal);
                }
            }
        );
    });
});

Live Demo

download in archive

Conclusion

I hope that our new series of articles of chat system creation is very useful and interesting for you. If you want to share your ideas, or you noticed any weakness – don’t hesitate to contact us. Good luck and welcome back!

Office Style CSS3 Multilevel Menu

admin — Fri, 04 May 2012 04:39:13 +0000

Office Style CSS3 Multilevel Menu

In our new tutorial I will give you another one brilliant crossbrowser css3 navigation menu. This is click action drop down menu with strict office styles (like MS Office styles). Also, you can also use different icons in this menu. This solution is ideal for business websites. If you are ready, lets start.

This is our final result:

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the sources and lets start coding !

Step 1. HTML

Please point your attention to prepared HTML layout of our multilevel menu. This is usual UL-LI based multilevel navigation menu. Of course, the most interesting thing is CSS styles.

index.html


    
        File
            
                New
                Open
                Close
                Save
                    
                        Option 1
                            
                                Option A
                                Option B
                                Option C
                            
                        
                        Option 2
                        Option 3
                    
                
                Save As
                Print
                Exit
            
        
        Edit
            
                Cut
                Copy
                Paste
            
        
        View
            
                Normal
                Web Layout
                Print Layout
            
        
        Insert
        Format
        Tools
        Table
        Window
        Help

Step 2. CSS

Here are the CSS styles of our click action dropdown menu.

css/menu.css

#nav {
    position:relative;
    z-index:2;
}
#nav ul {
    background-color:#B8D1F8;
    border:1px solid #000C80;
    height:24px;
    list-style:none outside none;
    margin:0;
    padding:1px;
}
#nav ul ul {
    background-color:#FFFFFF;
    border:1px solid #8A867A;
    display:none;
    height:auto;
    left:0;
    padding:0;
    position:absolute;
    top:25px;
    width:168px;

    background-image:-webkit-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
    background-image:-moz-linear-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
}
#nav ul ul ul {
    display:none;
    left:168px;
    position:absolute;
    top:-1px;
    width:168px;
}
#nav ul li {
    float:left;
    margin-right:1px;
    position:relative;
}
#nav ul li a {
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:11px Tahoma,Arial;
    padding:3px 3px 4px;
    text-decoration:none;
}
#nav ul li span {
    background:url("../images/u.gif") no-repeat scroll 90% center transparent;
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:11px Tahoma,Arial;
    padding:3px 14px 4px 3px;
    position:relative;
}
#nav ul ul li span {
    background:url("../images/s.gif") no-repeat scroll 97% center transparent;
}
#nav ul ul li {
    float:none;
    margin-right:0;
    padding:1px;
    text-indent:10px;
}
#nav ul ul li a,#nav ul ul li span {
    border:1px solid transparent;
    padding:3px 3px 5px 2px;
}
#nav ul ul li a img,#nav ul ul li span img {
    border-width:0;
    float:left;
    margin-right:5px;
    vertical-align:middle;
}
#nav ul li:hover > a,#nav ul li:hover > span {
    background-color:#FFF2C8;
    border:1px solid #000C80;
    color:#000;
}
#nav img.close {
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-1;
}
#nav ul li span:focus + ul,#nav ul li ul:hover,#nav ul:hover + img.close {
    display:block;
}

Less than 100 lines of code, it’s great, isn’t it?

Live Demo

download in package

Conclusion

Hope you enjoyed with our new CSS3 menu, don’t forget to tell thanks and leave a comment Good luck!

HTML5 Canvas Twirl Sphere

admin — Wed, 02 May 2012 12:38:41 +0000

HTML5 Canvas Twirl Sphere

Today, I would like to tell about creation of animated Twirl Sphere (I modified our previous 3D sphere, and, I used same way of accessing pixels of canvas). Our sphere goes around the canvas continuously. This example is cross browser solution (because of html5).

In the result, you should to get something like this:

Here are our demo and downloadable package:

Live Demo

download in package

Ok, please download our source files and let’s start coding !

Step 1. HTML

This is markup of our result page. Here it is:

index.html

I prepared two canvas objects: first one for resource image, and second one – for our Twirl sphere.

Step 2. CSS

css/main.css

.container {
    height: 630px;
    margin: 50px auto;
    position: relative;
    width: 1024px;
    z-index: 1;
}
#obj {
    position: absolute;
    z-index: 2;
}

We should keep our Sphere object above our main canvas.

Step 3. JS

And now, our main js script file. Here it is:

js/script.js

var canvas, ctx;
var canvasObj, ctxObj;
var iDstW = 256;
var iDstH = 256;
var iXSpeed = 4;
var iYSpeed = 3;
var iLastX = iDstW / 2;
var iLastY = iDstH / 2;
var oImage;
var aMap = [];
var aMapT = [];
var aBitmap;

var mathTwirl = function(px,py) {
    var x = px - iDstW / 2;
    var y = py - iDstH / 2;
    var r = Math.sqrt(x * x + y * y);
    var maxR = iDstW / 2;
    if (r > maxR) return {'x':px, 'y':py, 't': 1};

    var a = Math.atan2(y, x);
    a -= 1 - r / maxR;

    var dx = Math.cos(a) * r;
    var dy = Math.sin(a) * r;

    return {'x': dx+iDstW/2, 'y': dy+iDstH/2, 't': 1.5}
}

window.onload = function(){

    // load background
    oImage = new Image();
    oImage.src = 'images/bg.jpg';
    oImage.onload = function () {

        // creating canvas and context objects
        canvas = document.getElementById('slideshow');
        ctx = canvas.getContext('2d');
        canvasObj = document.getElementById('obj');
        ctxObj = canvasObj.getContext('2d');

        // clear context
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // and draw source image
        ctx.drawImage(oImage, 0, 0);

        aBitmap = ctx.getImageData(0, 0, iDstW, iDstH);
        for (var y = 0; y < iDstH; y++) {
            for (var x = 0; x < iDstW; x++) {
                var t = mathTwirl(x, y);
                aMap[(x + y * iDstH) * 2 + 0] = Math.max(Math.min(t.x, iDstW - 1), 0);
                aMap[(x + y * iDstH) * 2 + 1] = Math.max(Math.min(t.y, iDstH - 1), 0);
                aMapT[(x + y * iDstH)] = t.t;
            }
        }

        // begin updating scene
        updateScene();
    };

    function updateScene() {

        // update last coordinates
        iLastX = iLastX + iXSpeed;
        iLastY = iLastY + iYSpeed;

        // reverse speed
        if (iLastX + 1 > ctx.canvas.width - iDstW/2) {
            iXSpeed = -4;
        }
        if (iLastX - 1 < iDstW/2) {
            iXSpeed = 4;
        }
        if (iLastY + 1 > ctx.canvas.height - iDstH/2) {
            iYSpeed = -3;
        }
        if (iLastY - 1 < iDstH/2) {
            iYSpeed = 3;
        }

        // shifting of the second object
        canvasObj.style.left = iLastX - Math.floor(iDstW / 2) + 'px';
        canvasObj.style.top = iLastY - (Math.floor(iDstH / 2)) + 'px';

        // draw result Twirl sphere
        var aData = ctx.getImageData(iLastX - Math.ceil(iDstW / 2), iLastY - Math.ceil(iDstH / 2), iDstW, iDstH + 1);
        for (var j = 0; j < iDstH; j++) {
            for (var i = 0; i < iDstW; i++) {
                var u = aMap[(i + j * iDstH) * 2];
                var v = aMap[(i + j * iDstH) * 2 + 1];
                var t = aMapT[(i + j * iDstH)];
                var x = Math.floor(u);
                var y = Math.floor(v);
                var kx = u - x;
                var ky = v - y;
                for (var c = 0; c < 3; c++) {
                    aBitmap.data[(i + j * iDstH) * 4 + c] =
                      (aData.data[(x + y * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + y * iDstH) * 4 + c] * kx) * (1-ky) * t +
                      (aData.data[(x + (y + 1) * iDstH) * 4 + c] * (1 - kx) + aData.data[((x + 1) + (y + 1) * iDstH) * 4 + c] * kx) * (ky) * t;
                }
            }
        }
        ctxObj.putImageData(aBitmap,0,0);

        // update timer
        setTimeout(updateScene, 16);
    }
};

During initialization, the script is preparing two canvas objects and two contexts. After, it loads background image, and draw it at our first context. After it prepares hash table of sphere transformations: aMap (with using of new mathTwirl function). And, in the end – it starts timer which updates the main scene. This function (updateScene) updates coordinates of our Sphere object, and draws updated sphere at our second context.

Live Demo

download in package

Conclusion

I hope that today’s Twirl HTML5 Sphere lesson has been interesting for you. We have done another one nice html5 example. I will be glad to see your thanks and comments. Good luck!

10 Creative Website Designs

admin — Tue, 01 May 2012 14:20:34 +0000

10 Creative Website Designs

Sorry for that 10 days period without fresh articles. I have been abroad for all this time. Had to solve some things. But, since today, we continue our tutorials. Today I would like to introduce you with new collection of websites with impressive design. I think that it should give you some new ideas for you and your projects.

Conclusion

Hope that our new collection of new contact form designs has been interesting to you. Good luck!

Script Tutorials » Script Tutorials | Web Developer Tutorials | HTML5 and CSS3 Tutorials

Musical drop down menu

Final result

Step 1. HTML

Step 2. CSS

Step 3. HTML5 JavaScript

Conclusion

Related Articles

Bottom Menu Builder Part 2

Step 1. HTML

Step 2. CSS

css/bmenu.css

Step 3. JS

js/main.js

Step 4. PHP

links.php

index.php

preview.php

Conclusion

Related Articles

Bottom Menu Builder (HTML5)

Step 1. HTML

index.html

Step 2. CSS

css/main.css

Step 3. JS

js/main.js

Conclusion

Related Articles

CSS3 Form Design – Vintage

Final Result

Step 1. HTML

index.html

Step 2. CSS

css/forms.css

Conclusion

Related Articles

Infographic: HTML5 and Game Development

Related Articles

Google Maps API v3 Practical Implementation

Step 1. SQL

Step 2. HTML

templates/login_form.html

Google Maps API v3 Practical Implementation

Log In

Join

templates/logout_form.html

Hello {name}

Your status:

templates/main_page.html

Main Map

Online Members Block

Last Members

templates/profile_page.html

Name: {name}

First name: {fname}

Last name: {lname}

About: {about}

Date Reg: {datereg}

Online Members Block

Last Members

templates/profile_map.html

templates/setpos_page.html

Please confirm your position

Step 3. CSS

css/main.css

Step 4. PHP

classes/CLogin.php

classes/CMySQL.php

classes/CProfiles.php

Another profile with same email already exist

index.php

profile.php

setpos.php

Step 5. Javascript

js/update.js

Conclusion

Related Articles

Powerful Chat System – Lesson 8

Step 1. SQL