TutorialOK.NET

FOR SALE!

KamikazeEk — Sun, 27 Nov 2011 08:07:27 +0000

Domain for sale.

Infos at: csabilazar [at] gmail [.] CoM

Modern AJAX Comment system (like on fb)

KamikazeEk — Tue, 25 Oct 2011 05:03:29 +0000

This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.

See the demo | Download the files

Downloads:

arabic_version.rar
comment.zip
- css/
- css/imgs/
- [ Download ]
  
  css/imgs/avatar.png
- [ Download ]
  
  css/imgs/content.gif
- [ Download ]
  
  css/imgs/tipsy.gif
- [ View | Download ]
  
  css/page.css
- [ View | Download ]
  
  css/tipsy.css
- js/
- [ View | Download ]
  
  js/comments.js
- [ View | Download ]
  
  js/count_down.js
- [ View | Download ]
  
  js/jquery.js
- [ View | Download ]
  
  js/tipsy.js
- php/
- [ View | Download ]
  
  php/db_connect.php
- [ View | Download ]
  
  php/functions.php
- [ View | Download ]
  
  ajax.php
- [ View | Download ]
  
  database.sql
- [ View | Download ]
  
  index.php

jQuery Dynamic Poll With Animated Colors

KamikazeEk — Tue, 25 Oct 2011 04:56:05 +0000

Demo:

Downloads:

colored_polls.zip
- lib/
- [ View | Download ]
  
  lib/awcore.polls.js
- [ View | Download ]
  
  lib/backgroundColor.js
- [ Download ]
  
  lib/loading.gif
- [ View | Download ]
  
  lib/polls.css
- [ View | Download ]
  
  db_connect.php
- [ View | Download ]
  
  functions.php
- [ View | Download ]
  
  index.php
- [ View | Download ]
  
  vote.php
- [ View | Download ]
  
  polls.sql

Simple Web-based chat

KamikazeEk — Sat, 03 Sep 2011 10:55:08 +0000

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

DOWNLOAD SOURCE VIEW THE TUTORIAL

AJAX based web chat

KamikazeEk — Sat, 03 Sep 2011 10:50:33 +0000

This tutorial will walk you through the step in order to create an AJAX driven web chat program. This will be a very simple program, but will be expanded upon in future tutorials.

You can view the results of the AJAX Driven Web Chat Tutorial here
You can download the Source for the AJAX Driven Web Chat Tutorial here

Creating the Chat Tables
We are going to create two tables for the chat program, but we will only use one for the first part of this tutorial.

The two tables are “chat” where we will in later tutorials store all of the different chat rooms, and “message” which contains the list of all messages sent to the chat system.

--Chat Table
DROP TABLE IF EXISTS `chat`;
CREATE TABLE `chat` (
  `chat_id` INT(11) NOT NULL AUTO_INCREMENT,
  `chat_name` VARCHAR(64) DEFAULT NULL,
  `start_time` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`chat_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;
 
--Message Table
DROP TABLE IF EXISTS `message`;
CREATE TABLE `message` (
  `message_id` INT(11) NOT NULL AUTO_INCREMENT,
  `chat_id` INT(11) NOT NULL DEFAULT '0',
  `user_id` INT(11) NOT NULL DEFAULT '0',
  `user_name` VARCHAR(64) DEFAULT NULL,
  `message` TEXT,
  `post_time` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`message_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;

These tables are just a preleminary setup and will probably change quite a bit through then upcoming parts of these tutorials.

The HTML Skeleton
The HTML is going to be pretty straight forward to start out with. Lets start with our header.

We know that we will want to add some style information, and instead of placing it in a seperate file, we will leave it in a script tag for now Later we will want to move this to an external file for caching benifits, but we can leave it here for development purposes. We will also need some JavaScript.

Once again we could move this to an external file, but we’ll leave it here for now.


	
		</a>AJAX Driven Web Chat
                 type="text/css" media="screen">
		 language="JavaScript" type="text/javascript">

Now lets add the rest of the HTML:

	
		AJAX Driven Web Chat.
		 id="p_status">Status: Normal
		Current Chitter-Chatter:
		 id="div_chat" class="chat_main">

id="frmmain" name="frmmain" onsubmit=""> type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" /> type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" /> /> type="text" id="txt_message" name="txt_message" style="width: 447px;" /> type="button" name="btn_send_chat" id="btn_send_chat" value="Send" />

We have a header, a paragraph where we can display status, a main div to be used for displaying the chat. As for

HTML controls, we have a refresh button for testing and incase the program freezes for some reason, a reset button to clear out our database, an area for the user to enter a message, and a send button.

Notice that we have one CSS class that we haven’t defined yet, and one inline CSS style. We’ll define our chat_main next.

Our one CSS class that we have for now will be.

overflow: auto;
height: 300px;
width: 500px;
background-color: #CCCCCC;
border: 1px solid #555555;

The only real item of interest here is the overflow. This will allow our div tag to behave like an IFrame. As we will see, this will work very well for FireFox, but will require some extra code for IE to behave correctly.

It is better to use div’s with overflows rather than IFrames because search engines can index them easier.

Next >>

HTML5 Powered Contact Form

KamikazeEk — Sun, 31 Jul 2011 18:44:43 +0000

In this tutorial, we are going to learn how to create a swanky HTML5 AJAX powered contact form. The form will use some of the new HTML5 input elements and attributes, and will be validated using the browser’s built-in form validation.We will use jQuery and Modernizr to help out with the older browsers, and PHP on the server side to validate the input.

Download Source Files View the tutorial

Build game in HTML5

KamikazeEk — Sun, 31 Jul 2011 18:38:20 +0000

HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed…even in the gaming world! Today, you’ll make your first game using Box2D and HTML5′s canvas tag.

Download Source Files
Demo View It Online

What is Box2D?

Box2D is an open source and popular engine that simulates 2D physics for making games and applications. Primarily written in C++, it has been converted to numerous languages by community contributors.

Learn how to build game with HTML5 step by step =>

HTML5 techniques you Must Know

KamikazeEk — Sun, 31 Jul 2011 18:28:46 +0000

1. New DOCTYPE

2. Email Inputs




    
    untitled


    
        Email:

3. Placeholders

View more & more =>

Submit forms with CTRL + ENTER

KamikazeEk — Sun, 31 Jul 2011 18:20:29 +0000

You’ve probably seen it on Twitter, Google+, or Facebook. You’ve got a text box, where you write your status/message and then click a button to submit it. But, if you’re lazy like me, you don’t like to switch to the mouse to click the button. These services help us out by allowing us to press control + enter to submit. Let’s recreate this scenario for our own projects. Of course, the reason we can’t submit on just enter is because we’ll be using a textarea, so that the user can include line breaks. Normally, the browser will just ignore the control key and add another line break when we hit control + enter, but we’ll intercept this and perform our magic.

View the tutorial

Image Resizing Made Easy with PHP

KamikazeEk — Thu, 28 Jul 2011 09:41:56 +0000

Ever wanted an all purpose, easy to use method of resizing your images in PHP? Well that’s what PHP classes are for – reusable pieces of functionality that we call to do the dirty work behind the scenes. We’re going to learn how to create our own class that will be well constructed, as well as expandable. Resizing should be easy. How easy? How about three steps!

Download Source Files

Continue to the tutorial

jQuery Image Cropping Plugin

KamikazeEk — Thu, 28 Jul 2011 09:38:50 +0000

Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library.

Download Source Files Demo View It Online

The tutorial:

Retro poster

KamikazeEk — Thu, 28 Jul 2011 08:19:12 +0000

Summer camp wallpaper

KamikazeEk — Thu, 28 Jul 2011 08:17:15 +0000

In this tutorial we will teach how to create summer wallpaper.

Letterpress text effect in photoshop & css

KamikazeEk — Thu, 28 Jul 2011 08:07:46 +0000

1. Create Your Own Letterpress/Inset/Debossed Text

2. Ps Letterpress emboss text effect

3. Creating Editable Letterpress Styled Text

4. Create a Sleek Pressed Letter Design

5. Create a Letterpress Effect with CSS Text-Shadow

6. Grooveshark design style in Fireworks

7. Create letterpressed type using only CSS

8. How to achieve the new and trendy letterpress effect with Photoshop

9. Photoshopping the LetterPress Text Effect

10. Two simple ways to create text embossing effect

11. Letterpress and Letter Bulge Effect using Photoshop and CSS

12. Quick tip: Inset shapes, lines and text

13. Easily achieve the trendy LetterPress effect with Photoshop

14. How to Create Inset Typography in Photoshop

30 cheat sheets for web designers and developers

KamikazeEk — Thu, 28 Jul 2011 07:54:36 +0000

A cheat sheet is a printable guide of a particular programming language, software or framework. A web designer spends most of his design time to move around different softwares environment and it becomes really hard to memorize the shortcuts and hot keys for each environment. Hence, cheat sheets provide great help for them. In this article, we present 30 essential cheat sheets for the most popular web based technologies.

WordPress

1. Liquidicity – WordPress help sheet

2. WP-The Loop

3. WordPress Theme Development Check List

4. Andy wibbels

jQuery

5. jQuery

6. jQuery 1.2 Cheat Sheet

PHP

7. PHP reference sheet – basics

8. GoSquared

9. PHP cheat sheet – blueshoes

10. PHP 5 Online Cheat Sheet v1.3

CSS

15. CSS Cheat Sheet (V2)

16. CSS Shorthand cheat sheet

17. CSS Shorthand Cheat Sheet

Color

18. RGB Colour codes

19. Web safe color chart

HTML

20. GoSquared

21. HTML Cheat sheet v 1

Fonts

26. Common fonts to all versions of Windows & Mac equivalents

27. Mixing typefaces

Adobe

28. Adobe Flash CS4 Keyboard Shortcuts Cheat Sheet (PC and OS X)

29. Dreamweaver CS3 Training

Mod rewrite and htaccess

30. Mod_rewrite Cheat Sheet (V2)

(via webanddesigners)

Only css dropdown menu

KamikazeEk — Sun, 24 Jul 2011 08:54:31 +0000