tag:blogger.com,1999:blog-51937798995566808872024-03-06T12:38:28.023+05:30Webs TutorialWeb learning made easy!Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.comBlogger111125tag:blogger.com,1999:blog-5193779899556680887.post-39284208389457398332015-02-09T12:43:00.000+05:302015-02-09T12:43:14.448+05:30Set up SSH for Git in Windows<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">Do the following to verify your installation:</h3>
<p>Double-click the Git Bash icon to start a terminal session. Enter the following command to verify the SSH client is available:</p>
<br />
<pre class="php" name="code">$ ssh -v</pre>
<p>If you have ssh installed, go to the next step. List the contents of your ~/.ssh directory.</p>
<br />
<pre class="php" name="code">$ ls -a ~/.ssh</pre>
<p>If you have not used SSH on Bash you might see something like this:</p>
<br />
<pre class="php" name="code">rishi@rishi-PC ~
$ ls -a ~/.ssh
ls: /c/Users/rishi/.ssh: No such file or directory</pre>
<p>If you have a default identity already, you'll see two id_* files:</p>
<br />
<pre class="php" name="code">rishi@rishi-PC ~
$ ls -a ~/.ssh
. .. id_rsa id_rsa.pub</pre>
<p>Enter ssh-keygen at the command line. The command prompts you for a file to save the key in:</p>
<br />
<pre class="php" name="code">ssh-keygen
ssh-agent /bin/bash
ssh-add ~/.ssh/id_rsa
ssh-add -l</pre>
<p>In your terminal window, cat the contents of the public key file.</p>
<br />
<div class="separator" style="clear: both; text-align: left;">
<img border="0" height="312" width="542" src="https://confluence.atlassian.com/download/attachments/304578655/ssh_key.png"/>
</div>
<a href="https://confluence.atlassian.com/display/BITBUCKET/Set+up+SSH+for+Git" rel="nofollow" target="_blank">Image Source</a>
<br />
</div>
Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-33631476907935781732015-02-06T10:30:00.001+05:302015-02-06T10:30:44.629+05:30How to add hash (#) link in Drupal (7.x) menu<div dir="ltr" style="text-align: left;" trbidi="on">
Below is the code which shows how we can use the hash link, once it has been declared in our custom module.<br />
<br />
Create a module with <code>.info</code> and <code>.module</code> extensions. In your <code>.module</code> extension, use the below mention code.<br />
<pre name="code" class="php">/**
* Implements hook_menu().
*
* Defines a valid link to use when creating menu items.
*/
function MYMODULE_menu() {
$items = array();
$items['hash_link'] = array(
'page callback' => 'drupal_not_found',
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
return $items;
}
/**
* Implements hook_menu_link_alter().
*
* Flags the link to be altered at runtime.
*
* Note: Changes here would be saved back to the database.
*/
function MYMODULE_menu_link_alter(&$item, $menu) {
if ($item['link_path'] == 'hash_link') {
$item['options']['alter'] = TRUE;
}
}
/**
* Implements hook_translated_menu_link_alter().
*
* Refactors the link to go to the fragment #hash_link.
*/
function MYMODULE_translated_menu_link_alter(&$item, $map) {
if ($item['link_path'] == 'hash_link') {
$item['href'] = '';
$item['localized_options']['fragment'] = 'hash_link';
}
}
</pre>
Once you have activated your module, go to your menu where you want to add the hash link, for instance I would like to add hash link in my main menu so I will access <code>admin/structure/menu/manage/main-menu/add</code> and there I will create a menu such as "About" with <code>path</code> as "hash_link"
</div>
Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-86880405986594106772014-07-11T15:12:00.000+05:302014-11-28T22:26:25.697+05:30Difference Between Drupal And Other CMS Platforms<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgrLy6KL-um2X0aKtiPEUx5VyT8AISzuue4AOpc7g8upbQO1SvlI0dv4GU9vsK0ioah0Z2WVhwHPgTJL4USq-bWkGW5G3idxxZjj2JwETiFAarwyEN993nqP1_5UACl75tEPLopbgByWv/s1600/difference-between-drupal-and-other-cms-platforms.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Drupal And Other CMS Platforms" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgrLy6KL-um2X0aKtiPEUx5VyT8AISzuue4AOpc7g8upbQO1SvlI0dv4GU9vsK0ioah0Z2WVhwHPgTJL4USq-bWkGW5G3idxxZjj2JwETiFAarwyEN993nqP1_5UACl75tEPLopbgByWv/s1600/difference-between-drupal-and-other-cms-platforms.jpg" height="323" title="Difference Between Drupal And Other CMS Platforms" width="400" /></a></div>
</div>
Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-9604645275736506822014-06-17T17:44:00.000+05:302014-11-28T22:40:35.479+05:30How To Avoid Fieldset In Drupal Date Field<div dir="ltr" style="text-align: left;" trbidi="on">
<pre name="code" class="php">
<?php
function MYTHEME_date_combo($variables) {
return theme('form_element', $variables);
}
?>
</pre>
<br />
Here <code>'MYTHEME'</code> should be you theme name defined in you <code>.info</code> file placed inside your theme directory.</div>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-14783595975980367262014-04-11T03:48:00.000+05:302014-11-28T22:51:27.410+05:30Getting Started With Graph Database Neo4j<p><strong>What is Neo4j?</strong> Its a graph database.</p>
<p><strong>What is a graph database?</strong></p>
<blockquote style="text-align: right;" cite="http://en.wikipedia.org/wiki/Graph_database">A graph database is a database that uses graph structures with nodes, edges, and properties to represent and store data. A graph database is any storage system that provides index-free adjacency.This means that every element contains a direct pointer to its adjacent elements and no index lookups are necessary. General graph databases that can store any graph are distinct from specialized graph databases such as triplestores and network databases.<a href="http://en.wikipedia.org/wiki/Graph_database" target="blank">WikiPedia</a></blockquote>
<p><strong>Why do I use it?</strong></p>
<p>Its not a compulsion to use a graph db everytime, it depends on your projects schema and its relations. MySql gets weak in deep relations and graph db get stronger over here. Let me give you a simple example: Consider a social networking schema. I want a user from db who is a friend of my friends friend. This can be done using joins in mysql but it will take very long queries. But now if you use a graph db over here, it would be quick with a very small query. The reason to use a graph database is that the data stored by the system and the operations the system does with the data are exactly the weak spot of relational databases and are exactly the strong spot of graph databases. The system needs to store collections of objects that lack a fixed schema and are linked together by relationships. In graph db everything is represented by a node. If there are 10 users, then 10 nodes can be created. Users information can be stored in nodes property or in new nodes. Each node can be connected to other nodes and this linking is called as Relations. Now using this model its very easy to get a user who is a friend of my friends friend. Many popular websites uses graph database, facebook, linkedin, Cisco, HP, Accenture, Deutsche Telekom and many more.</p>
<p>Neo4j is a open source project developed by Neo Technology using JAVA. The developers describe Neo4j as "embedded, disk-based, fully transactional Java persistence engine that stores data structured in graphs rather than in tables". Neo4j is the most popular graph database.</p>
<p>Neo4j queries are built on Cypher language. Its really simple to learn.</p>
<p>Installation of neo4j is really simple.</p>
<ul>
<li><a href="http://www.neo4j.org/download/linux" target="blank">Linux</a></li>
<li><a href="http://www.neo4j.org/download/windows" target="blank">Windows</a></li>
</ul>
<p>So lets create a simple node in neo4j using cypher. After installation, just goto your browser at this URL http://localhost:7474/browser/ This will be the UI for executing neo4j queries.</p>
<pre name="code" class="sql">CREATE (u:USER {uid:1})</pre> Above code will create a simple node in Neo4j. Now lets see the node.
<pre name="code" class="sql">MATCH (u:USER {uid:1}) return u;</pre> Lets play around with nodes property. We will create few nodes
<pre name="code" class="sql">CREATE (u:USER {uid:1 , firstName:"Niraj", lastName:"Chauhan", gender:"Male"})</pre>
<pre name="code" class="sql">CREATE (u:USER {uid:2 , firstName:"Rishi", lastName:"Kulshreshtha", gender:"Male"})</pre>
<pre name="code" class="sql">CREATE (u:USER {uid:3 , firstName:"Leroy", lastName:"Bhavighar", gender:"Male"})</pre>
<pre name="code" class="sql">CREATE (u:USER {uid:4 , firstName:"Torrie", lastName:"Zacharia", gender:"Female"})</pre> Lets see all nodes together
<pre name="code" class="sql">MATCH (u:USER) return u;</pre>
<p>Now lets make some relation with nodes. Each relation needs a name. So I ll create a relation of friends.</p>
<pre name="code" class="sql">MATCH (u1:USER{uid:1}),(u2:USER{uid:2}) CREATE (u1)-[:ARE_FRIENDS]->(u2);</pre>
<pre name="code" class="sql">MATCH (u2:USER{uid:2}),(u3:USER{uid:3}) CREATE (u2)-[:ARE_FRIENDS]->(u3);</pre>
<pre name="code" class="sql">MATCH (u3:USER{uid:3}),(u2:USER{uid:4}) CREATE (u3)-[:ARE_FRIENDS]->(u4);</pre> So now I have made a simple relation of friends, Niraj has a friend Rishi has a friend Leroy has a friend Torrie. Lets get a user for Niraj who is female in third degree of friendship.
<pre name="code" class="sql">MATCH (niraj{firstName:"Niraj"})-[:ARE_FRIENDS*3..3]-(friend_of_friend)where friend_of_friend.gender = "Female" return friend_of_friend;</pre>
<p>So the above query is simple, I selected as "Niraj" as my start and am looking for friends friends friend who is female. This was just a basic of Neo4j. Neo4j is really strong. I have used it in many projects, but only where its essential or in simple words schema with deep relations. You can learn more about queries of neo4j here: <a href="Program Files (x86)">http://docs.neo4j.org/chunked/stable/cypher-query-lang.html</a></p>
Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-18785775219848801602014-04-10T20:50:00.000+05:302014-07-09T18:54:01.167+05:30Output user profile picture programmatically in Drupal<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: inherit;">Drupal is a wonderful platform to create complex websites in simpler way but sometimes, a simple task is too difficult to achieve in Drupal.</span><br />
<span style="font-family: inherit;">There are many pros of using Drupal in terms of other CMS available in market, such as its:</span><br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: inherit;">Extremely Flexible</span></li>
<li><b style="font-family: inherit;">Developer Friendly</b></li>
<li><span style="font-family: inherit;">Strong SEO</span></li>
<li><span style="font-family: inherit;">Capabilities
Enterprise</span></li>
<li><span style="font-family: inherit;">Friendly
Stability </span></li>
</ul>
<br />
<span style="font-family: inherit;">For instance lets take the example of user profile, if someone wants to show the user profile picture in Drupal then its a complicated task for him/her. Let me simply this for you in the below code. I've created the code in such a way if the user profile picture is not set, then it will show you the default profile pic.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Code:
</span><br />
<pre class=" language-php"><span style="font-family: inherit;"><code>
global $user;
if ($user->uid) {
$user = user_load($user->uid);
print theme(
'image_style',
array(
'style_name' => 'thumbnail',
'path' => !empty($user->picture->uri)?$user->picture->uri:variable_get('user_picture_default'),
'attributes' => array(
'class' => 'avatar'
)
)
);
}</code>
</span></pre>
<span style="font-family: inherit;">Cheers!</span><br />
<span style="font-family: inherit;">Photo Credit: <a href="http://instagram.com/p/lbHVcASMw4/" rel="_nofollow">Instagram</a></span></div>
Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-88001639392850963072013-11-07T17:18:00.000+05:302014-07-09T16:43:45.155+05:30Truncate long text with CSS<img class="alignleft" alt="Truncate Text CSS" src="http://www.webstutorial.com/wp-content/uploads/2013/11/empty-elements.gif" /><br/><p>While making websites we usually face width issues for long title text or headings. We can wrap that to next line or using some server side language we truncate it. But this can be done using CSS also.</p><br/><br/><p> </p><br/><p> </p><br/><br/>[html]<br/><style type="text/css"><br/>p {<br/> width:170px;<br/> margin:10px;<br/> font-family:Arial;<br/> font-size:14px;<br/>}<br/>p.truncate {<br/> overflow: hidden;<br/> text-overflow: ellipsis;<br/> white-space: nowrap;<br/>}<br/></style><br/><p title="I am a long text and I am wrapped to next line">I am a long text and I am wrapped to next line</p><br/><p class="truncate" title="I am a long text and I am truncated">I am a long text and I am truncated</p><br/>[/html]<br/><br/>Demo:<br/><iframe width="100%" height="300" src="http://jsfiddle.net/nirajmchauhan/tQE2V/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-38327900022203507452013-08-14T00:16:00.000+05:302014-07-09T16:43:45.142+05:30Top 10 Inane Mistakes which WordPress Users Make<img src="http://www.webstutorial.com/wp-content/uploads/2013/08/wordpress_logo1.png" alt="Wordpress" /><br/>WordPress has touched our lives and how?! This uber simple blogging and content management platform is an apple of eye for anyone looking to mark an online presence. However, often we let ourselves go blind by the simplicity and SEO benefits of this platform, and do not consider various mistakes which we might actually by doing that are affecting the performance of the site. In this write up we aim to discuss 10 top inane mistakes which bloggers make, which may actually be lethal to the holistic health of their website or blog.<br/><br/>Please read ahead to discover these mistakes, and we hope you are not the one making them. But if you are, please try to nullify the same – either on your own, with our help being right in place or by consulting a professional.<br/><br/>Top 10 Inane Mistakes which WordPress Users Make<br/><br> <strong>Still running the older version of WP?</strong><br/>We ask this with a tone of shocking incredibility. And if the answer is an affirmative, please tell us what exactly is wrong with you? Why do you hate your blog so much? There is an entire living, breathing, thriving community of WP developers who are working tirelessly to improve the CMS for you, so that you get to enjoy far superior and much improved features. Why would you decide against it? So please, just stop doing whatever you are doing and update your WP backend to the latest version. But wait, you might want to complete reading this post before you leave.<br/><br/><br> <strong>Painfully slow loading time</strong><br/>One of the biggest mistakes that every WordPress user is prone to committing is not paying due attention to the loading speed of the blog or site. Whether you are using too much of plugins, or you have just not optimized the page for better performance, please stop doing it and pay heed to the loading speed. This is more important now because Google has included the loading speed into its search engine algorithms, and you are more than certain to lose your Google rankings of you do not fix the loading speed NOW!<br/><br/><br/><strong>Please, no more “Just another WordPress blog”</strong><br/>Do yourself and all of us a favor and please use a theme which overrides the tagline that we have all grown so sick of. And if your blog does have this tagline, you should know you are just one amongst the ocean full of other users. You definitely would not want yourself or your blog to be remembered that way.<br/><br/><br/><strong>Bloating up deactivated plugins in the content folder of WP</strong><br/>You deactivat ed a plugin? Kick it out of your systems. As simple as that! Because not only do these plugins not serve any purpose to you, they also is bad for the performance of your blog or site. Hence, get over it already!<br/><br/><img alt="wp-plugins" src="http://www.webstutorial.com/wp-content/uploads/2013/08/wp-plugins.png" /><br/><br/><strong>A messed up Wp-Admin Section</strong><br/>If the admin section of your blog isn’t fine tuned, with no deactivated plugins and an updated version of each and everything, you are obviously doing the job as an admin wrong. Take a moment off and cleanse it, would you?<br/><br/><br/><strong>Blog posts of the length of the entire home page</strong><br/>So the home page of your blog looks longer than the Eiffel Tower, simply because it contains your recent blog updates in entirety? You know how backward that sounds? Unless of course if you have a specific reason behind doing it. If not, then please use the inbuilt ‘Read More’ section of WordPress to span the posts on the homepage accordingly. Besides, certain themes have the excerpts section to assist you with the same.<br/><br/><br/><strong>The white screen of death</strong><br/>As WordPress users, we all have experienced the white screen of death. Whether you have messed up your wp-config.php or there is some other complication with it, please do fix the issue ASAP. Trust us, no user will be interested in staring at your URL and a blank screen.<br/><br/><img alt="screen-of-death" src="http://www.webstutorial.com/wp-content/uploads/2013/08/screen-of-death.png" /><br/><br/><strong>Problems with database connections and gateways</strong><br/>Talking about what users are not so warmly going to react to, we come to another aspect, which surely does not rank high on the user’s popularity list anyway. It is getting a server down or installation error each time they visit your page. Thus, ensure that the database connections are right in place and there are no installation errors.<br/><br/><br/><strong>Indexing your site to private</strong><br/>It’s lethal! – One of the perks of WordPress is that it allows the users to own a site and blog simultaneously. And how users misuse this privilege is by indexing the site to private after owning a blog, thinking that blog will take care of all the SEO and site would rather enjoy an elite attention – or whatever the thought process is, we are not really discussing that. What we are pointing out at is that don’t! Don’t do this to your site and to your blog as by opting for this option, you would put the noindex tag on each of your web pages. You don’t really want the traffic to fall to a zero, do you?<br/><br/><br/><strong>Making your server information visible</strong><br/>You were wondering why your WP blog or website gets hacked ever so often? The hackers with their wonderful notorious minds obviously are going to target you, if you provide them with all the PHP information or the info about the current version of WP that you are running. To check the same, visit yoursite.com/phpinfor.php or yoursite.com/readme.html. Got the point, right? Instead opt for professional WordPress development services, and get a secured and well optimized WP blog or site.<br/>This brings us to an end of this post. We hope that we were helpful in letting you fix some of the major performance and security blunders that may have previously existed in your blog. Also, please do consider opting for professional services, should you feel stuck up with the same at any moment.<br/><br/><br/><hr /><br/><br/><strong>About Auhtor</strong> <br/><br/><em>John Pitt is a blogging junkie and also a developer working with an<br/> <a target="_blank" href="http://www.xicom.biz/offerings/wordpress-development/">Offshore WordPress Development</a><br/> company. You can often find him either thinking about his next blog posts or ganging up with his fellow WordPress Developers. For your project you may<br/> <a target="_blank" href="http://www.xicom.biz/offerings/hire-wordpress-developers/">hire WordPress developers</a><br/> and avail the expert services provided by them.</em>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-35246441697188415472013-05-01T22:23:00.000+05:302014-07-09T16:43:45.085+05:30jQuery Context Menu<p><br/> In this tutorial I am sharing my newly created jQuery Plugin, <strong>jQuery Simple Context Menu.</strong><br/></p><br/><img src="http://www.webstutorial.com/wp-content/uploads/2013/05/jquery-context-menu.jpg" alt="jQuery Simple Context Menu" class="alignleft" /><br/><p ><br/> GITHUB REPO :<br/> <a href="https://github.com/nirajmchauhan/jquery-simple-context-menu">https://github.com/nirajmchauhan/jquery-simple-context-menu</a><br/></p><br/><hr /><br/>Currently this plugin accepts two paramenters:<br/><ul><br/> <li> <strong>Custom HTML</strong> - You have to give entire HTML code with proper attributes in it wrapped inside <code>ul</code><br/> </li><br/> <li><br/> <strong>Simple HTML</strong> - You have to pass href link and the text to be shown.<br/> </li><br/></ul><br/><br/><strong>Simple HTML usage</strong><br/>Include the jquery file, you can download this from github.<br/><hr><br/>[js]<br/><br/>jQuery(function($){<br/> $(document).ready(function(){<br/> <br/> $('#Simple').simpleContextMenu({<br/> options : {<br/> 'Home' : '#',<br/> 'About Us' : '#',<br/> 'Services' : '#',<br/> 'Contact Us' : '#'<br/> }<br/> });<br/><br/> }); <br/>});<br/><br/>[/js]<br/><hr><br/><p><br/> Inside <code>options</code> you need to pass text and the link, the above code will generate a HTML in following format :<br/></p><br/>[html]<br/><ul><br/> <li><br/> <a href="#">Home</a><br/> </li><br/> <li><br/> <a href="#">About Us</a><br/> </li><br/> <li><br/> <a href="#">Services</a><br/> </li><br/> <li><br/> <a href="#">Contact Us</a><br/> </li><br/></ul><br/>[/html]<br/><hr><br/><br/><strong>Custom HTML usage</strong><br/><hr><br/>[js]<br/><br/>jQuery(function($){<br/> $(document).ready(function(){<br/><br/> $('#CustomHTML').simpleContextMenu({<br/> html: '<div class="dropdown clearfix"><ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"><li><a href="#" tabindex="-1">Action</a></li><li><a href="#" tabindex="-1">Another action</a></li><li><a href="#" tabindex="-1">Something else here</a></li><li class="divider"></li><li><a href="#" tabindex="-1">Separated link</a></li></ul></div>'<br/> });<br/><br/> }); <br/>});<br/><br/>[/js]<br/><hr><br/><p><br/> Inside <code>html</code> you need to pass entire html which will be the context menu. Above I am using bootstrap.<br/></p><br/><br/><p><br/> Both parameters cannot be used together, use only one at a time. You can have multiple context menus on a single page. Check out the demo and fork me.<br/></p>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com1tag:blogger.com,1999:blog-5193779899556680887.post-15659227657115258352013-03-25T22:33:00.000+05:302014-07-09T16:43:45.072+05:30How To Make A Chat Program In Node JS<p class="no_margin">Today we will start with NodeJS.</p><br/><img src="http://www.webstutorial.com/wp-content/uploads/2013/03/nodejs.png" alt="NodeJS" class="alignleft" /><br/><p class="no_margin">So what is NodeJS?</p><br/><p class="no_margin">In simple terms, JavaScript on server side. NodeJS uses Googles V8 engine. Its basically a javascript library which is executed on server side. Its also known as JavaScript without browser. </p><br/><p class="no_margin">When and why to use nodejs?</p><br/><p class="no_margin">Choosing a technology depends on the developer who is going to take it ahead. NodeJS is very simple, you just need to know javascript. NodeJS can be used for online gaming, chat programming, CRM management and also for blogging. There are several plugins available which make your job easy.</p><br/><br/><p class="no_margin">So today lets start with a simple chat program.</p><br/><br/><p class="no_margin"><strong>Installing NodeJS on Windows</strong></p><br/><hr/><br/><p class="no_margin">First download the latest copy of nodejs from <a href="http://nodejs.org/download/" target="_blank">here.</a> After installation open <code class="highlights">cmd</code> and just type <code>node -v</code>. This will output you the current installed version of nodejs.</p><br/><br/><p class="no_margin"><br/>Now create a folder on desktop, name it as <code class="highlights">node-chat</code>, using cmd navigate to that directory. Now inside that folder create a file <code class="highlights">package.json</code>. This file contains all the dependencies and other plugin information. Paste below code inside it:<br/></p><br/><br/>[js]<br/>{<br/> "name": "node_chat",<br/> "version": "1.0.0-4",<br/> "main": "app.js",<br/> "scripts": {<br/> "test": "echo \"Error: no test specified\" && exit 1",<br/> "start": "node app.js"<br/> },<br/> "dependencies": {<br/> "socket.io": "0.9.11",<br/> "connect": "2.7.1"<br/> },<br/> "author": "Niraj Chauhan",<br/> "license": "BSD",<br/> "subdomain": "node-chat",<br/> "engines": {<br/> "node": "0.6"<br/> }<br/>}<br/>[/js]<br/><br/><p class="no_margin">Above json is simple, it takes few parameters like name of author, filename which is going to be executed first, dependencies etc.</p><br/><p class="no_margin"><br/>Now in cmd just type <code class="highlights">npm install</code>. This will install all required dependencies which are mentioned inside the json file.<br/></p><br/><br/><p class="no_margin">After above command if you check the folder, it consists with a new folder named as <em>node_modules</em> This ensures that all the important modules are installed.</p><br/><br/><p class="no_margin">Create a file <code class="highlights">app.js</code> and paste the below code in it.</p><br/>[js]<br/>var io = require('socket.io'),<br/> connect = require('connect'),<br/> url = require('url'),<br/> sys = require('sys'),<br/> http = require('http'),<br/> fs = require('fs');<br/><br/>var port = 3000;<br/><br/><br/>var app = connect().use(connect.static('public')).listen(port);<br/>var chat_room = io.listen(app);<br/>console.log('Listening to port ' + port);<br/><br/>chat_room.sockets.on('connection', function (socket) {<br/> socket.emit('entrance', {<br/> message: 'Welcome to the chat room!'<br/> });<br/><br/> socket.on('disconnect', function () {<br/> chat_room.sockets.emit('exit', {<br/> message: 'A chatter has disconnected.'<br/> });<br/> });<br/><br/> socket.on('chat', function (data) {<br/> message = {<br/> user: data.message.user,<br/> message: data.message.message<br/> };<br/> chat_room.sockets.emit('chat', {<br/> message: message<br/> });<br/> });<br/><br/> chat_room.sockets.emit('entrance', {<br/> message: 'A new chatter is online.'<br/> });<br/>});<br/>[/js]<br/><p class="no_margin">If you have worked with server side technology like php, java etc then you ll understand the basic from above. Firstly we have included some modules which we will need. We will be using socket.io to make a flawless connection between server and client. We will also be using connect</p><br/><blockquote>Connect offers a createServer method, which returns an object that inherits an extended version of http.Server. Connect's extensions are mainly there to make it easy to plug in middleware. That's why Connect describes itself as a "middleware framework," and is often analogized to Ruby's Rack.</blockquote><br/><p class="no_margin">After including required files we listen to a port which redirects to a folder <code class="highlights">public</code> and finally we open the socket after successful connection between server and client.</p><br/><p class="no_margin">Using opened socket variable, we define different methods inside the connection function.</p><br/><br/><ul><br/> <li><em>entrance</em>: Used when a socket connection established between server and client </li><br/> <li><em>disconnect</em>: Used when a client breaks the connection</li><br/> <li><em>chat</em>: Used to transfer messages between different clients via server.</li><br/></ul><br/><br/><p class="no_margin">So now lets create a foder and name it to public. This folder will contain all the UI html and css files. Here I ll be using twitter bootstrap.</p><br/><br/><p class="no_margin">So by now your folder structure should be something like this: </p><br/><br/><pre><br/>node-chat/<br/>|--node_modules/<br/>|--public/<br/>|----css/<br/>|----img/<br/>|----js/<br/>|----index.html<br/>|--app.js<br/>|--package.json<br/></pre><br/><br/><br/><p class="no_margin">Inside your index.html file paste the below code</p><br/>[js]<br/><script src="js/jquery-1.7.2.min.js"></script><br/><script src="http://localhost:3000/socket.io/socket.io.js"></script><br/><script type="text/javascript" charset="utf-8"><br/> var socket = io.connect('ws://localhost:3000/');<br/> var user = {<br/> name: ''<br/> }<br/> jQuery(document).ready(function() {<br/><br/> jQuery('#chat_box').keypress(function(event) {<br/> if (event.which == 13) {<br/> socket.emit('chat', {<br/> message: {<br/> user: user.name,<br/> message: jQuery('#chat_box').val()<br/> }<br/> });<br/> jQuery('#chat_box').val('');<br/> }<br/> });<br/><br/> });<br/><br/> function startChat() {<br/> user.name = $('#username').val();<br/><br/> var log_chat_message = function(message, type) {<br/><br/> if (type == 'chat') {<br/> var li = jQuery('<li />').html('<span>' + message.user + '</span>: ' + message.message);<br/> } else {<br/> var li = jQuery('<li />').html('<span>' + message + '</span>');<br/> }<br/><br/><br/> jQuery('#chat_log').append(li);<br/> };<br/><br/> if (user.name != '') {<br/> $('#loginDiv').fadeOut();<br/> $('#chat').fadeIn();<br/><br/> socket.on('chat', function(data) {<br/> log_chat_message(data.message, 'chat');<br/> });<br/><br/> socket.on('entrance', function(data) {<br/> log_chat_message(data.message, 'system');<br/> });<br/><br/> socket.on('exit', function(data) {<br/> log_chat_message(data.message, 'system');<br/> });<br/><br/> } else {<br/> alert('Please enter your username');<br/> }<br/> }<br/></script><br/>[/js]<br/><br/><p class="no_margin"><br/>Above code is simple jquery, which contains some functions for chatting, login, printing message etc. So quickly I ll explain you the important part of chat.<br/></p><br/><br/><p class="no_margin"><br/>When user opens the page, we call the socket file, this file is installed inside modules using the json file. Then first we open a socket connection between server and user. This triggers the app.js file and entire connection is established. Then by using the functions of connection which is declared inside app.js file(chat, entrance, exit) we call those functions from here. Each function passes and takes some message. Using <code class="highlights">chat</code> we take message from user who typed, passed it to server, server takes that message and throws to all user within the socket connection.<br/></p><br/><br/><p class="no_margin">To execute this chat, just run this command in cmd within the directory where app.js file exists <code class="highlights">node app.js</code>, then in browser navigate to http://localhost:3000/ </p><br/><p class="no_margin">You can check the working demo and download the files. I have just covered the important flow of the code and how nodejs and sockets can be helpful. This chat works in almost all browsers and devices, this is the plus point of using sockets via nodejs</p>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-43397153142484705112012-12-15T01:04:00.000+05:302014-07-09T16:43:45.015+05:30Website content management system – what is it all about?<p style="text-align: left;">CMS or the Content management system, in simple words can be explained as PC<br/>software that helps you to amend, alter, make public and maintain the contents from<br/>the central interface end. Initially CMS was designed with the purpose of simplifying<br/>the complex task of writing codes of various versions and to ease up the development<br/>process more flexible and handy. This type of software helps to manage system that<br/>controls and manages the complete content with the help of a workflow procedure<br/>including a collaborative environment.</p><br/><p style="text-align: left;"><img class="aligncenter" title="CMS" src="http://www.webstutorial.com/wp-content/uploads/2012/12/cms.jpg" alt="CMS" /></p><br/><p style="text-align: left;">CMS helps to centralize data edit, publish and modify at the single back end interface.<br/>This web CMS technique is best used to be in charge of active set of web materials that<br/>are made available online such as websites, media files and document.</p><br/><p style="text-align: left;"><strong>Different types of CMS</strong></p><br/><p style="text-align: left;">We have three major types of Content Management System (CMS) namely, online<br/>processing, offline processing and hybrid systems. These processes are being used<br/>in the implementation procedure to describe the deployment pattern for Web CMS via<br/>presentation templates that provide a structural content pattern for your web page.</p><br/><p style="text-align: left;"><strong>Online processing system</strong> is all about implementing templates requisite condition.<br/>Usually a web page HTML is being generated during a visitor’s entry or when the<br/>page is being pulled off from web cache. It is known that most of the open source web<br/>content management system has the capability to support add-ons that offers the<br/>required support including blogs, forums, web stores, etc. It’s being referred to as add-<br/>ons, widgets, modules, or extensions with open source of paid license model.</p><br/><p style="text-align: left;"><strong>Offline processing system</strong> is something that is also termed as static site generators.<br/>Pre-process all the content by implementing the right templates ahead of issuing to<br/>generate your web pages. As pre-processing system does not call for server to make<br/>use of the templates at the right time, they subsist as design-time tools.</p><br/><p style="text-align: left;"><strong>Hybrid systems</strong><br/>There are systems where both online and offline techniques are being implemented.<br/>Some systems write their exec codes to move on with dynamic HTML condition where<br/>CMS is not deployed on all servers. While the other types of Hydrid systems are either<br/>offline or online base on the functionality.</p>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-56271573535884523592012-11-20T22:26:00.000+05:302014-07-09T16:43:44.989+05:30jQuery Form Validation PluginIf you are developing websites then you will come across Form validation. I too and I was using <a href="http://docs.jquery.com/Plugins/Validation" target="_blank" rel="nofollow">jQuery Validation plugin.</a> This is an awesome plugin but really buggy in IE7/8 browser with different jQuery versions. Its not stable and the developer of this plugin is not looking after the bugs. I reported several times but no response. So finally I decided to make my own validation plugin.<br/><br/><strong><u><i>Before I start further let me tell you that currently this plugin only validates INPUT types with number, email and blank value fields. Its still in beta or under development mode.</i></u></strong><br/><br/><p style="">GITHUB REPO : <a href="https://github.com/nirajmchauhan/jQuery-form-validation">https://github.com/nirajmchauhan/jQuery-form-validation</a></p><br/><br/><hr /><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/11/form.png" alt="Form-Validation" title="Form-Validation" class="aligncenter" /><br/><hr /><br/><br/>I ll explain you the usage of this plugin by a simple form example<br/><br/><hr /><br/>HTML:<br/><hr /><br/><br/>[html]<br/><section><br/><form method="post" class="form-horizontal" id="loginForm" onsubmit="return false;"><br/><div class="control-group"><br/><label class="control-label" for="inputEmail">Email</label><br/><div class="controls"><br/><input type="text" id="inputEmail" name="user" placeholder="Email" class="required email"><br/></div><br/></div><br/><div class="control-group"><br/><label class="control-label" for="inputPassword">Password</label><br/><div class="controls"><br/><input type="password" id="inputPassword" name="password" class="required" placeholder="Password"><br/></div><br/></div><br/><div class="control-group"><br/><div class="controls"><br/><label class="checkbox"><br/><input type="checkbox"> Remember me<br/></label><br/><button id="submit" type="submit" class="btn" onclick="javascript:ajaxThrow('#loginForm','#response');">Sign in</button><br/><br/><br/> <br/></div><br/></div><br/><div class="alert alert-info" id="response"></div><br/></form><br/></section><br/>[/html]<br/><br/><hr /><br/><br/>To make a field mandatory, you need to add a class <code>required</code>.<br/>Currently on input types will be accepted so to make if mandatory, use the following attributes : <br/><br/><table class="post-table"><br/><tr><br/> <th>class</th><br/> <th>Output</th><br/></tr><br/><tr><br/> <td><code>class="required email"</code></td><br/> <td>This will check for blank field and whether the value is EMAIL ID</td><br/></tr><br/><tr><br/> <td><code>class="required number"</code></td><br/> <td>This will check for blank field and whether the value is a NUMBER</td><br/></tr><br/><tr><br/> <td><code>class="required"</code></td><br/> <td>This field will check for blank values</td><br/></tr><br/></table><br/><br/>So now the final is the jQuery:<br/><br/><hr /><br/>JS:<br/><hr /><br/>[js]<br/>jQuery(function($) {<br/> $(document).ready(function() {<br/><br/> $('#submit').click(function() {<br/> val = $('#loginForm :input').validateForm();<br/> if (val) {<br/> var qstring = $('#loginForm').serialize();<br/> $('#response').fadeIn().html('Form Validated successfully with following fields<br>' + qstring);<br/> }<br/> });<br/><br/> });<br/>});<br/>[/js]<br/><hr /><br/><br/><br/>To validate the form, you ll just need to add a line : <br/><code>val = $('#loginForm :input').validateForm();</code><br/><br/>This will return a boolean value. And will also add a class <i>error</i> to the respective input field.<br/><br/>Check this in action here : <br/><br/><hr /><br/><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nirajmchauhan/y2UcT/22/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/><hr />Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com2tag:blogger.com,1999:blog-5193779899556680887.post-33649162363898449122012-10-04T17:57:00.000+05:302014-07-09T16:43:44.932+05:30iPhone 5 Will Cost You at Least $1,800You might have heard that<br/><br/>Buy an iPhone 5 From $199<br/>Buy online and get free shipping.<br/>Or visit your favorite Apple Retail Store.<br/><h2>Here's the Info-graphic which shows that iPhone 5 Can Cost You at Least $1,800!</h2><br/><img class="aligncenter" title="iPhone 5 Infographic" src="http://8.mshcdn.com/wp-content/uploads/2012/10/iphone5-true-cost.jpeg" alt="iPhone 5 Infographic" width="800" height="4252" />Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-22349897162756092512012-08-27T20:15:00.000+05:302014-07-09T16:43:44.909+05:30JQuery Treeview List<strong>JQuery Treeview List</strong> - Creates a nice expanding and collapsing tree view control using <strong>jQuery</strong>.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/08/treeview.png" alt="JQuery Treeview List" title="JQuery Treeview List" class="aligncenter" /><br/><br/>Tree view Displays a hierarchical collection of labeled items, each represented by a TreeNode. This you'll normally see in windows or MAC folder navigation.<br/><br/>Today I am making it in <strong>JQuery </strong>for <code>ul</code>, <code>li</code> list.<br/><br/><hr /><br/>Basic HTML Markup<br/><hr /><br/>[html]<br/><ul><br/> <li><a>First Level</a><br/> <ul><br/> <li><a>Second Level</a></li><br/> <li><a>Second Level</a></li><br/> <li><a>Second Level</a></li><br/> </ul><br/> </li><br/> <li><a>First Level</a><br/> <ul><br/> <li><a>Second Level</a><br/> <ul><br/> <li><a>Third Level</a></li><br/> <li><a>Third Level</a></li><br/> <li><a>Third Level</a><br/> <ul><br/> <li><a>Fourth Level</a></li><br/> <li><a>Fourth Level</a></li><br/> <li><a>Fourth Level</a><br/> <ul><br/> <li><a>Fifth Level</a></li><br/> <li><a>Fifth Level</a></li><br/> <li><a>Fifth Level</a></li><br/> </ul><br/> </li><br/> </ul><br/> </li><br/> </ul><br/> </li><br/> <li><a>Second Level</a></li><br/> </ul><br/> </li><br/> <li><a>First Level</a><br/> <ul><br/> <li><a>Second Level</a></li><br/> <li><a>Second Level</a></li><br/> </ul><br/> </li><br/></ul><br/>[/html]<br/><br/>We just created a normal list formation in hierarchical way.<br/><br/><hr /><br/>Now lets add some styling - CSS<br/><hr /><br/>[css]<br/>.tree {<br/> -moz-border-bottom-colors: none;<br/> -moz-border-image: none;<br/> -moz-border-left-colors: none;<br/> -moz-border-right-colors: none;<br/> -moz-border-top-colors: none;<br/> background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;<br/> border-color: #BFC0C2 #BFC0C2 #B6B7BA;<br/> border-radius: 3px 3px 3px 3px;<br/> border-style: solid;<br/> border-width: 1px;<br/> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17), 0 -2px 0 rgba(0, 0, 0, 0.08) inset;<br/> display: inline-block;<br/> margin: 0 0 50px;<br/> min-width: 300px;<br/> padding: 10px 15px 15px;<br/>}<br/>.tree ul {<br/> list-style: none outside none;<br/>}<br/>.tree li a {<br/> line-height: 25px;<br/>}<br/>.tree > ul > li > a {<br/> color: #3B4C56;<br/> display: block;<br/> font-weight: normal;<br/> position: relative;<br/> text-decoration: none;<br/>}<br/>.tree li.parent > a {<br/> padding: 0 0 0 28px;<br/>}<br/>.tree li.parent > a:before {<br/> background-image: url("../images/plus_minus_icons.png");<br/> background-position: 25px center;<br/> content: "";<br/> display: block;<br/> height: 21px;<br/> left: 0;<br/> position: absolute;<br/> top: 2px;<br/> vertical-align: middle;<br/> width: 23px;<br/>}<br/>.tree ul li.active > a:before {<br/> background-position: 0 center;<br/>}<br/>.tree ul li ul {<br/> border-left: 1px solid #D9DADB;<br/> display: none;<br/> margin: 0 0 0 12px;<br/> overflow: hidden;<br/> padding: 0 0 0 25px;<br/>}<br/>.tree ul li ul li {<br/> position: relative;<br/>}<br/>.tree ul li ul li:before {<br/> border-bottom: 1px dashed #E2E2E3;<br/> content: "";<br/> left: -20px;<br/> position: absolute;<br/> top: 12px;<br/> width: 15px;<br/>}<br/>[/css]<br/><br/><br/>In css we are making tree nodes usinf <code>:before</code><br/><br/>Last we will add jquery functionality to toggle the list on click events.<br/><br/><hr /><br/>JQuery<br/><hr /><br/>[js]<br/>$('.tree li').each(function(){<br/> if($(this).children('ul').length > 0){<br/> $(this).addClass('parent'); <br/> }<br/>});<br/><br/>$('.tree li.parent > a').click(function(){<br/> $(this).parent().toggleClass('active');<br/> $(this).parent().children('ul').slideToggle('fast');<br/>});<br/>[/js]<br/><br/>Here first we search for all parent nodes and if found then we are adding a class named as <code>.parent</code><br/><br/>Then on click of any parent elements, we just add a class <code>.active</code> and slide the <code>li</code>'s in it.<br/><br/>This can be used to show the navigation of the website.Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com2tag:blogger.com,1999:blog-5193779899556680887.post-27982377922758112812012-08-23T01:13:00.000+05:302014-07-09T16:43:44.853+05:30Collection of Special iPhone Meta TagsI am not an iPhone developer nor a user but just found some special meta tags for developing iPhone webapps and iPhone prove websites. Hope this helps you.<br/> <br/><strong>Disable horizontal scrolling</strong><br/><hr /><br/>[html]<br/><meta name="viewport" content="width=device-width, user-scalable=no" /><br/>[/html]<br/><hr /><br/> <br/><strong>When bookmarked the website runs in fullscreen, like a normal App.</strong><br/><hr /><br/>[html]<br/><meta name="apple-mobile-web-app-capable" content="yes" /><br/>[/html]<br/><hr /><br/> <br/><strong>When bookmarked as fullscreen, set the color of the status bar</strong><br/><hr /><br/>[html]<br/><meta name="apple-mobile-web-app-status-bar-style" content="black"><br/>[/html]<br/><hr /><br/> <br/><strong>When bookmarked, add an 57x57 Icon and the iPhone will add the shiny effect itself.</strong><br/><hr /><br/>[html]<br/><link rel="apple-touch-icon" href="icon.png" /> <br/>[/html]<br/><hr /><br/> <br/><strong>Prefer non glossy Icon or made the gloss yourself? Precomposed stops from adding the gloss on bookmarks</strong><br/><hr /><br/>[html]<br/><link rel="apple-touch-icon-precomposed" href="icon" /><br/>[/html]<br/><hr /><br/> <br/><strong>Remove auto-recognition of Phone numbers</strong><br/><hr /><br/>[html]<br/><meta name="format-detection" content="telephone=no"><br/>[/html]<br/><hr /><br/> <br/><strong>Forces the iPhone to use a number pad</strong><br/><hr /><br/>[html]<br/><input type="number"><br/>[/html]<br/><hr /><br/> <br/><strong>Guess what? A phone number keypad</strong><br/><hr /><br/>[html]<br/><input type="tel"><br/>[/html]<br/><hr /><br/> <br/><strong>Keyboard optimized for typing urls.</strong><br/><hr /><br/>[html]<br/><input type="url"><br/>[/html]<br/><hr /><br/> <br/><br/><a href="http://forrst.com/people/robert" target="_blank" style="font-weight:bold; font-style:italic;">Credits : Robert</a>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-47510747774212325542012-08-16T20:33:00.000+05:302014-07-09T16:43:44.805+05:30Forrst Invites Giveaway | CLOSEDForrst.com A website for designers and also for developers. Here you will find a great resource of Web Development. Its a community where a developer and designers improve thier craft. Its just a invite based website so that only real people enter it.<br/><br/><img class="aligncenter" title="Forrst" src="http://www.webstutorial.com/wp-content/uploads/2012/08/forrst.jpg" alt="Forrst" /><br/><br/>So you want it???? Then<br/><ul><br/> <li>Comment your latest or best work below with your actual <strong>EMAIL ID</strong><em>(Design or Development or both - <strong>Mandatory</strong>)</em></li><br/> <li>Share this post on twitter and other social sites(<strong>Advantage</strong>)</li><br/></ul><br/>And just wait for results. I have total 2 invites so hurry up!!!<br/><br/>Results will be announced on <strong>22 Aug 2012</strong><br/><br/> <br/><br/><hr /><br/><br/><em><strong>We have selected two winners. TRAVIS and SUMON SELEEM Congratulations and welcome to forrst</strong></em>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com6tag:blogger.com,1999:blog-5193779899556680887.post-13750617667548244872012-08-08T03:16:00.000+05:302014-07-09T16:43:44.749+05:30Wordpress Bloginfo ShortcodeA small snippet for Wordpress Bloginfo. This will help you to add images directly without giving the entire path. Its a shortcode snippet<br/><br/>[php]<br/>function get_bloginfo_shortcode( $atts ) {<br/> extract(shortcode_atts(array(<br/> 'info' => '',<br/> ), $atts));<br/> return get_bloginfo($info);<br/>}<br/>add_shortcode('bloginfo', 'get_bloginfo_shortcode');<br/>[/php]<br/><br/>Usage : <br/><br/>[html]<br/><img src="[bloginfo info='template_url']/images/logo.jpg" alt="[bloginfo info='name'] logo" /><br/>[/html]<br/><br/>Now you can easily call your images without giving actual path.<br/><br/><strong><em>Credits Forrst</em></strong>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-66462123304189824122012-08-02T22:58:00.000+05:302014-07-09T16:43:44.729+05:30CSS3 Visiting Card 3D TransformMy friend <a title="Visiting Card Design" href="http://www.freebiesgallery.com/double-sided-business-card-template/" target="_blank">Asif</a> made a nice design on visiting card, so I decided to convert that into a <strong>3D flipping Visiting Card</strong><br/><br/><img class="aligncenter" title="CSS3 Visiting Card" src="http://www.webstutorial.com/wp-content/uploads/2012/08/card.png" alt="CSS3 Visiting Card" /><br/><br/>To rotate a <code>div</code> with 3D transform :-<br/><ul><br/> <li><code>transform-style: preserve-3d;</code></li><br/> <li><code>perspective: 800px;</code></li><br/> <li><code>transform: rotateY(180deg);</code></li><br/> <li><code>backface-visibility: hidden;</code></li><br/></ul><br/>After setting the above CSS a div will transform.<br/><br/><hr /><br/><br/><strong>Final Product</strong><br/><br/><img class="aligncenter" title="Visiting Card Front-Back" src="http://www.webstutorial.com/wp-content/uploads/2012/08/front-back.png" alt="Visiting Card Front-Back" /><br/><br/><a href="http://www.webstutorial.com/wp-content/uploads/2012/08/back-front1.png"><img class="aligncenter" title="Visiting Card Back-Front" src="http://www.webstutorial.com/wp-content/uploads/2012/08/back-front1.png" alt="Visiting Card Back-Front" /></a><br/><br/><hr /><br/><br/>So lets start<br/><br/><hr /><br/><br/>[html]<br/><div id="card"><br/> <div class="front"><br/> <div class="strips"><br/> <p class="strip red"></p><br/> <p class="strip orange"></p><br/> <p class="strip green"></p><br/> <p class="strip blue"></p><br/> <p class="strip lOrange"></p><br/> </div><br/> <div class="businessName"><br/> Webs Tutorial<br/> </div><br/> </div><br/> <div class="back"><br/> <div class="strips"><br/> <p class="strip red"><span>www.webstutorial.com</span></p><br/> <p class="strip orange"><span>Mumbai, India</span></p><br/> <p class="strip green"></p><br/> <p class="strip blue"><span>PHP, HTML5, CSS3</span></p><br/> <p class="strip lOrange"><span>niraj@webstutorial.com</span></p><br/> </div><br/> <div class="myName"><br/> <p>Niraj Chauhan</p><br/> Developer<br/> </div><br/> </div><br/></div><br/>[/html]<br/><br/><hr /><br/><br/>Above we made a parent <code>div</code> and inside that two <code>divs</code>, one will be the front side and another will be the backside. When we <code>:hover</code> on the front facing div, it rotates in Y axis. As we have set the transform style to <code>preserve-3d</code> it will maintain its view and the transform will be displayed in 3D.<br/><br/><hr /><br/><br/>[css]<br/>@font-face {<br/> font-family: roboto;<br/> src: url('../Roboto-Regular.ttf');<br/>}<br/><br/>* {<br/> font-family: roboto !important;<br/>}<br/><br/>.container {<br/> position: relative;<br/>}<br/><br/>#card {<br/> position: absolute;<br/> z-index: 11;<br/> -webkit-perspective: 800px;<br/><br/> -webkit-transform-style: preserve-3d;<br/> -moz-transform-style: preserve-3d;<br/> -ms-transform-style: preserve-3d;<br/> transform-style: preserve-3d;<br/> left: 30%;<br/>}<br/><br/>#card .front,#card .back {<br/> background: #000;<br/> width: 480px;<br/> height: 205px;<br/> display: block;<br/> position: absolute;<br/> color: #fff;<br/> border-radius: 8px;<br/><br/> -webkit-transition: -webkit-transform 1s ease-in-out;<br/> -moz-transition: -moz-transform 1s ease-in-out;<br/> -o-transition: -o-transform 1s ease-in-out;<br/> -ms-transition: -ms-transform 1s ease-in-out;<br/> transition: transform 1s ease-in-out;<br/>}<br/><br/>#card .front {<br/> -webkit-transform: rotateY(0deg);<br/> -moz-transform: rotateY(0deg);<br/> -o-transform: rotateY(0deg);<br/> -ms-transform: rotateY(0deg);<br/> transform: rotateY(0deg);<br/> -webkit-backface-visibility: hidden;<br/> -moz-backface-visibility: hidden;<br/> z-index: 13;<br/>}<br/><br/>#card:hover .front {<br/> -webkit-transform: rotateY(180deg);<br/> -moz-transform: rotateY(180deg);<br/> -o-transform: rotateY(180deg);<br/> -ms-transform: rotateY(180deg);<br/> transform: rotateY(180deg);<br/>}<br/><br/>#card .back {<br/> -webkit-transform: rotateY(-180deg);<br/> -moz-transform: rotateY(-180deg);<br/> -o-transform: rotateY(-180deg);<br/> -ms-transform: rotateY(-180deg);<br/> transform: rotateY(-180deg);<br/> -webkit-backface-visibility: hidden;<br/> -moz-backface-visibility: hidden;<br/> z-index: 12;<br/> background: #000;<br/>}<br/><br/>#card:hover .back {<br/> -webkit-transform: rotateY(0deg);<br/> -moz-transform: rotateY(0deg);<br/> -o-transform: rotateY(0deg);<br/> -ms-transform: rotateY(0deg);<br/> transform: rotateY(0deg);<br/> z-index: 14;<br/>}<br/><br/>/* Front Strips */<br/>.strips {<br/> clear: both;<br/> margin: 0 auto;<br/> position: relative;<br/> width: 125px;<br/>}<br/><br/>.strip {<br/> float: left;<br/> height: 140px;<br/> margin-right: 12px;<br/> position: relative;<br/> width: 12px;<br/> font-family: roboto;<br/>}<br/><br/>.red {<br/> background: #b70000;<br/> color: #b70000;<br/> border: 1px solid #890000;<br/> border-top: 0px;<br/>}<br/><br/>.orange {<br/> background: #f25d07;<br/> color: #f25d07;<br/> border: 1px solid #b64605;<br/> border-top: 0px;<br/>}<br/><br/>.green {<br/> background: #a69e33;<br/> color: #a69e33;<br/> border: 1px solid #837726;<br/> border-top: 0px;<br/>}<br/><br/>.blue {<br/> background: #0092b2;<br/> color: #0092b2;<br/> border: 1px solid #006e86;<br/> border-top: 0px;<br/>}<br/><br/>.lOrange {<br/> background: #ee913f;<br/> color: #ee913f;<br/> margin: 0 !important;<br/> border: 1px solid #b36d2f;<br/> border-top: 0px;<br/>}<br/><br/>.businessName {<br/> clear: both;<br/> font-family: roboto;<br/> font-size: 22px;<br/> padding: 5px 0 0;<br/> text-align: center;<br/>}<br/><br/>/* Back strips */<br/>.back .red {<br/> height: 70px;<br/>}<br/><br/>.back .orange {<br/> height: 100px;<br/>}<br/><br/>.back .green {<br/> height: 140px;<br/>}<br/><br/>.back .blue {<br/> height: 100px;<br/>}<br/><br/>.back .lOrange {<br/> height: 70px;<br/>}<br/><br/>.strip span {<br/> position: absolute;<br/> font-size: 15px;<br/>}<br/><br/>.red span {<br/> left: -162px;<br/> top: 50px;<br/>}<br/><br/>.orange span {<br/> left: -102px;<br/> top: 80px;<br/> width: 100px;<br/>}<br/><br/>.green span {<br/> left: 0;<br/>}<br/><br/>.blue span {<br/> left: 20px;<br/> top: 80px;<br/> width: 140px;<br/>}<br/><br/>.lOrange span {<br/> left: 18px;<br/> top: 50px;<br/>}<br/><br/>.myName {<br/> clear: both;<br/> color: #999999;<br/> font-family: roboto;<br/> font-size: 20px;<br/> padding: 0;<br/> text-align: center;<br/>}<br/><br/>.myName p {<br/> color: #a69e33;<br/>}<br/><br/>#designedBy {<br/> border-radius: 5px 0 0 0;<br/> bottom: 0;<br/> color: #FFFFFF;<br/> min-height: 10px !important;<br/> padding: 10px;<br/> position: fixed;<br/> right: 0;<br/>}<br/>[/css]<br/><br/><hr /><br/><br/>Now in CSS we set the <code>backface-visibility: hidden;</code>. With this property the backside of the card will be hidden. When we hover on the front face of the card with the help of css transition we flip the card and now the backside of the card will be visible.<br/><br/>When we move away over mouse from the card it turns back to its original position.This way a 3D flip can be done using CSS3.<br/><br/><em><strong>Now the latest Firefox also supports the 3D Transform. Previously it was only working on <code>webkit</code> browsers</strong></em>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com1tag:blogger.com,1999:blog-5193779899556680887.post-9340621594348452722012-07-25T01:16:00.000+05:302014-07-09T16:43:44.672+05:30AJAX Contact Form With ValidationToday I am going to share a simple tutorial on <strong>How to make a AJAX contact form with validation</strong>.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/jquery-ajax.jpg" alt="JQUERY-AJAX" title="JQUERY-AJAX" class="aligncenter" /><br/><br/><br/><blockquote><br/><b>What is AJAX?</b><br/>AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.<br/></blockquote><br/><br/>The flow of the form is : <br/><br/><br/><a href="http://www.webstutorial.com/wp-content/uploads/2012/07/process-diagram.png"><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/process-diagram-300x219.png" alt="AJAX Process Diagram" title="AJAX Process Diagram" class="alignnone" /></a><br/><br/>So here I am using twitter bootstrap, so files which we need are :-<br/> <ul><br/> <li><em>data.php</em> - (here we will write our PHP code)</li><br/> <li><em>script.js</em> - (here we will write our <strong>ajax jquery</strong> code)</li><br/> <li><em>validate.js</em> - (<strong>jquery</strong>validation plugin)</li><br/> <li><em>index.php</em> and <em>style.css</em></li><br/> </ul><br/> <br/>So the fields of our form will be Name, Email, Number, City, Area, Message, Submit<br/><br/>Here our city and area will also be using <strong>AJAX </strong>i.e. on city change area will also be changed.<br/><br/><b>index.php</b><br/><hr /><br/>[html]<br/><?php require_once('data.php'); ?><br/><div class="hero-unit"><br/> <h2>Contact Us</h2><br/> <br/> <form id="contactUs" name="contactUs" onsubmit="return false;"><br/> <br/> <br/> <table cellspacing="5" cellpadding="5"><br/> <tr><br/> <td><label for="name">Name:</label></td><br/> <td><input type="text" value="" name="name" id="name" class="required name"/></td><br/> </tr><br/> <tr><br/> <td><label for="email">Email:</label></td><br/> <td><input type="text" value="" name="email" id="email" class="required email"/></td><br/> </tr><br/> <tr><br/> <td><label for="number">Contact Number:</label></td><br/> <td><input type="text" value="" name="number" id="number" class="required number" minlength="8"/></td><br/> </tr><br/> <tr><br/> <td><label for="city">City:</label></td><br/> <td><br/> <select id="city" name="city" onchange="javascript:changeArea('#city', '#area');"><br/> <option value="Any">Any</option><br/> <?php echo getCities();?><br/> </select><br/> </td><br/> </tr><br/> <tr><br/> <td><label for="area">Area:</label></td><br/> <td><select id="area" name="area" disabled="disabled"></select></td><br/> </tr><br/> <tr><br/> <td><label for="message">Message:</label></td><br/> <td><textarea id="message" name="message" class="required"></textarea></td><br/> </tr><br/> <tr><br/> <td colspan="2" align="center"><br/> <input type="hidden" name="contactFormSubmit" value="Yes" /><br/> <input type="submit" value="Submit" class="btn" onclick="javascript:formSubmit('#contactUs','#responseText');"/><br/> </td><br/> </tr><br/> <tr><br/> <td colspan="2" align="center"><br/> <div id="responseText"></div><br/> </td><br/> </tr><br/> <br/> </form><br/> </div><br/>[/html]<br/><hr /><br/><br/>Here we just made a simple html structure of form inside a table.<br/><br/>To make a field mandatory, just add <code>class="required"</code> to input.<br/><br/>If you want to validate it with only email or number then add <code>class="required email"</code> or <code>class="required number"</code><br/><br/>If I add a attribute <code>minlength="8"</code> to the number field then that field should contain at least 8 digits of number.<br/><br/><b>data.php</b><br/><hr /><br/>[php]<br/><?php<br/>$cities = array('1'=>'Mumbai',<br/> '2'=>'Chennai',<br/> '3'=>'Noida',<br/> '4'=>'Bangalore');<br/><br/>$areas = array( 'Airoli' => '1',<br/> 'Andheri' => '1',<br/> 'Bandra' => '1',<br/> 'Bhandup' => '1',<br/> 'Bhayandar' => '1',<br/> 'Boisar' => '1',<br/> 'Borivali' => '1',<br/> 'Chembur' => '1',<br/> 'Gopalapuram' => '2',<br/> 'Mount Road' => '2',<br/> 'Noida Expressway' => '3',<br/> 'Sector 1' => '3',<br/> ' Sector 128' => '3',<br/> 'Sector 129' => '3',<br/> 'Yamuna Expressway' => '3',<br/> 'Anekal ' => '4',<br/> 'Banashankari ' => '4',<br/> 'Banasvadi ' => '4',<br/> 'Banaswadi ' => '4',<br/> 'Begur ' => '4',<br/> 'Bellary Road ' => '4',<br/> 'Dobespet ' => '4',<br/> 'Electronics City' => '4');<br/><br/> <br/>if(isset($_REQUEST['cityID']) && $_REQUEST['cityID'] != 'Any'){<br/><br/> getAreas($_REQUEST['cityID']);<br/><br/>}<br/><br/>if(isset($_REQUEST['contactFormSubmit'])){<br/> if(!isValidEmail($_REQUEST['email'])){<br/> echo 'Enter a valid email ID';<br/> }elseif(!is_mobileNumber($_REQUEST['number'])){<br/> echo 'Enter a valid number';<br/> }elseif($_REQUEST['name'] == '' || $_REQUEST['message'] == ''){<br/> echo 'Enter valid name or message';<br/> }else{<br/> ?><br/> <p><b>Thank you for contacting us, your given information : </b></p><br/> <table cellspacing="5" cellpadding="5" border="1"><br/> <tr><br/> <td>Name:</td><br/> <td><?php echo $_REQUEST['name']?></td><br/> </tr><br/> <tr><br/> <td>Email:</td><br/> <td><?php echo $_REQUEST['email']?></td><br/> </tr><br/> <tr><br/> <td>Contact Number:</td><br/> <td><?php echo $_REQUEST['number']?></td><br/> </tr><br/> <tr><br/> <td>City:</td><br/> <td><?php echo $_REQUEST['city']?></td><br/> </tr><br/> <br/> <?php if(isset($_REQUEST['area'])) : ?><br/> <tr><br/> <td>Area:</td><br/> <td><?php echo $_REQUEST['area']?></td><br/> </tr><br/> <?php endif; ?><br/> <br/> <tr><br/> <td>Message:</td><br/> <td><?php echo $_REQUEST['message']?></td><br/> </tr><br/> </table><br/> <?php<br/> }<br/>}<br/><br/><br/> <br/>function getCities(){<br/> global $cities;<br/> foreach($cities as $Idx => $city){<br/> <br/> echo '<option value="'.$Idx.'">'.$city.'</option>';<br/> <br/> }<br/>}<br/> <br/>function getAreas($cityID = ''){<br/> global $areas;<br/> foreach($areas as $area => $Idx){<br/> <br/> if($Idx == $cityID){<br/> <br/> echo '<option value="'.$Idx.'">'.$area.'</option>';<br/> <br/> }<br/> <br/> }<br/>}<br/><br/>function isValidEmail($email){<br/> return eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email);<br/>}<br/><br/>function is_mobileNumber($mobile) {<br/> $regex1 = '123456789';<br/> $regex2 = '1234567890';<br/> $regex3 = '0123456789';<br/><br/> if(preg_match('/^([0-9])\1*$/', $mobile)){<br/> return false;<br/> }elseif($mobile == $regex1){<br/> return false;<br/> }elseif($mobile == $regex2){<br/> return false;<br/> }elseif($mobile == $regex3){<br/> return false;<br/> }elseif(preg_match("/[^0-9]/", $mobile)){<br/> return false;<br/> }else{<br/> return true;<br/> }<br/>}<br/>?><br/>[/php]<br/><hr /><br/><br/>PHP code is simple, I am making an array of cities and area, made 2 functions to get areas and cities and getting the parameters from URL and passing it to functions.<br/><br/>Now the <strong>ajax </strong>function : <br/><br/><b>script.js</b><br/><hr /><br/>[js]<br/>function changeArea(cityBox, areaBox) {<br/> jQuery(function($) {<br/> <br/> $(areaBox).attr('disabled','disabled');<br/> <br/> $(areaBox).addClass('loading');<br/> $.ajax({ //Starting the AJAX<br/> url : 'data.php', //File to be called or pass the data<br/> data : { //Extra paramters<br/> "cityID" : $(cityBox+' option:selected').attr('value')<br/> },<br/> success : function(data) { // The result from data.php file comes as data<br/> window.setTimeout(function(){<br/> $(areaBox).removeAttr('disabled');<br/> <br/> $(areaBox).removeClass('loading');<br/> <br/> $(areaBox).html('');<br/> <br/> $(areaBox).html(data);<br/> <br/> }, 2000);<br/> }<br/> });<br/> });<br/>}<br/>[/js]<br/><hr /><br/><br/>The above function is is taking two parameters, the <code>select</code> id of City and area. Then I am saving the value of city in a variable, and inside ajax I am passing the value of city to data.php file.<br/><br/>Inside data.php I wrote a function to return areas according to the city ID. Inside success function I am inserting entire result into the area <code>select</code> box.<br/><br/>Simlarly I am going to make another function which will validate the form and if no error then ajax is called and mail is sent.<br/><br/><b>script.js</b><br/><hr /><br/>[js]<br/>/* Submission of form */<br/><br/>function formSubmit(formID, displayMssgID) {<br/> jQuery(function($) {<br/> <br/> var qstring = $(formID).serialize();<br/> <br/> var val = $(formID).validate().form();<br/> if (val) {<br/> $(displayMssgID).html('Registering your Request ... Please Wait ...');<br/> $.ajax( {<br/> url : "data.php",<br/> data : qstring,<br/> success : function(data) {<br/><br/> $(displayMssgID).html('');<br/> $(displayMssgID).html(data); <br/> window.setTimeout(function() {<br/> <br/> $(displayMssgID).fadeOut();<br/> <br/> }, 6000);<br/> <br/> }<br/> });<br/> }<br/> });<br/>}<br/>[/js]<br/><hr /><br/><br/>This function takes two parameters, ID of the form and result message div. First I am serializing the form, which will take all the form data and store it in a variable. Then I am validating it, if validation is true then our AJAX is called and entire form data is passed to data.php file.<br/><br/>This is return will give some output which I am showing it in <code>id="responseText"</code><br/><br/>This is a simple way to make AJAX forms, there might be many other tutorials on other websites but I find this very simple. This way you can make any AJAX form. Try out the demo.<br/><br/><br/><br/><i><strong>Thanks to <a href="http://forrst.com/people/jakiestfu" target="_blank">Jacob</a> for server validation tip.</strong></i>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com6tag:blogger.com,1999:blog-5193779899556680887.post-68489547293144133632012-07-18T17:12:00.000+05:302014-07-09T16:43:44.633+05:30JQuery Allow Only NumbersFor a frontend developer when it is asked to do something unique that person will think of <strong>JQuery </strong>first. Today a simple <strong>jquery code</strong> to allow only <strong>numbers </strong>to a text-box. Below code will allow following <strong>key events</strong> :<br/><br/><ul><br/> <li>Backspace</li><br/> <li>Delete</li><br/> <li>Tab</li><br/> <li>Escape</li><br/> <li>Enter</li><br/> <li>Ctrl+A</li><br/> <li>Home</li><br/> <li>end</li><br/> <li>left</li><br/> <li>right</li><br/></ul><br/><br/>Just add a class to textbox <code>.onlyNumbers</code> and paste the following jquery code :<br/><br/><hr /><br/>[js]<br/>$(document).ready(function() {<br/><br/> $(".onlyNumbers").keydown(function(event) {<br/><br/> if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)) {<br/> return;<br/> }<br/> else {<br/><br/> if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {<br/> event.preventDefault();<br/> }<br/> }<br/> });<br/><br/>});<br/>[/js]<br/><hr /><br/><br/>You can also apply this to <code>textarea</code>.<br/><br/>Demo:<br/><br/><hr /><br/><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nirajmchauhan/XHuDc/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/><hr />Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com5tag:blogger.com,1999:blog-5193779899556680887.post-54634825092100175952012-07-11T02:20:00.000+05:302014-07-09T16:43:44.580+05:30Simple JQuery Tabs<strong>JQuery tabs</strong>. Whenever I start any new project tabs is something which I have to use, so instead of using any external js library I created a small function.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/tabs.jpg" alt="JQuery Tabs" title="JQuery Tabs" class="alignnone" /><br/><br/><hr /><br/>[html]<br/><div id="tabs"><br/> <div class="divTabs"> <!-- divTabs class is important, this will be passed in function --><br/> <div id="tab_menu_1" class="tab selected first">PHP</div><br/> <div id="tab_menu_2" class="tab last">JQUERY</div><br/> </div><br/> <div class="divTabs-container"><br/> <div id="divTabs_tab_content_1" class="tabcontent" style="display:block;">Content 1</div><br/> <div id="divTabs_tab_content_2" class="tabcontent">Content 2</div><br/> </div><br/></div><br/>[/html]<br/><hr /><br/><br/>First we are creating a <code>div</code> with a class name, this class name is really important. This class name will be passed in entire tabs, just check the class naming of the <code>div</code> in the above html. It is prefixed with other classes.<br/><br/>CSS is simple just make the <code>.tabcontent{display:none;}</code><br/><br/>Now time for js function<br/><br/><hr /><br/>[js]<br/>function generateTabs(element) {<br/> jQuery(function($) {<br/> $("."+element+" .tab[id^=tab_menu]").click(function() {<br/> var currentDiv=$(this);<br/> $("."+element+" .tab[id^=tab_menu]").removeClass("selected");<br/> currentDiv.addClass("selected");<br/> var index=currentDiv.attr("id").split("tab_menu_")[1];<br/> $("."+element+"-container .tabcontent").css('display','none');<br/> $("."+element+"-container #"+element+"_tab_content_"+index).fadeIn();<br/> });<br/> });<br/>}<br/>[/js]<br/><hr /><br/><br/>Now call this function by passing the classname.<br/><code>generateTabs('divTabs');</code><br/><br/>Check the demo below<br/><br/><hr /><br/><br/><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nirajmchauhan/VXkyN/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com1tag:blogger.com,1999:blog-5193779899556680887.post-2151863794535575972012-07-03T18:09:00.000+05:302014-07-09T16:43:39.654+05:30HTML5 Air Hockey Game Using CanvasAir Hockey, my first HTML5 game<br/><br/>In this tutorial you will be learning the importance of <strong><code>canvas</code></strong> tag.<br/><br/><blockquote><br/>The <strong>canvas </strong>element is part of <a href="http://www.webstutorial.com/html5-css3-admin-panel-dashboard-template/html-5" title="HTML5 CSS3 Admin Panel | Dashboard Template" target="_blank">HTML5</a> and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.<br/></blockquote><br/><br/><em><b>Working : </b> A puck(ball) will be freely moving in the table, we just need to stop it from touching the horizontal sides of table by using two mallets.</em><br/><br/>Let's break our <a href="http://www.webstutorial.com/how-to-make-a-game-in-html-5-how-to-build-a-game-with-html5/html-5" title="How To Make A GAME In HTML 5 | How To Build A Game With HTML 5" target="_blank">game</a> into pieces, which will help us to code easily. We will be using following javascripts<br/><ul><br/> <li><strong>jquery.hotkeys.js</strong> - <a href="https://github.com/tzuryby/jquery.hotkeys" target="_blank">Helps for keyboard events</a></li><br/> <li><strong>key_status.js</strong> - Helps to call required event for our game</li><br/> <li><strong>util.js</strong> - Helps to define the mallet position</li><br/> <li><strong>game.js</strong> - Our main file which will contain the game functionality</li><br/></ul><br/> <br/>First we will make the <strong>canvas </strong>in our HTML document.<br/><br/><hr /><br/>[html]<br/><canvas id="canvas" width="480" height="320" tabindex="1"></canvas><br/>[/html]<br/><hr /><br/><br/>Now javascript - game.js<br/><hr /><br/>[js]<br/>var canvasElement = document.getElementById("canvas");<br/>var canvas = canvasElement.getContext("2d");<br/><br/>var canvas_width = canvasElement.width;<br/>var canvas_height =canvasElement.height;<br/>var botX = 2;<br/>var botY = 2;<br/>var mx = 2;<br/>var my = 4;<br/>var points = 0;<br/><br/>var init = {};<br/>var FPS = {};<br/><br/>FPS.set = 30;<br/>[/js]<br/><hr /><br/><br/>Above, first we created a <strong>canvas</strong> in our HTML document, and then in game.js we are initializing it, storing its height and width in a variable, declaring some more constant variables.<br/><br/>Let's make our players(mallets) and our ball(puck).<br/><br/><hr /><br/>[js]<br/>var player = {<br/> color: "#000",<br/> x: 220,<br/> y: 310,<br/> width: 50,<br/> height: 10,<br/> draw: function() {<br/> canvas.fillStyle = this.color;<br/> canvas.fillRect(this.x, this.y, this.width, this.height);<br/> }<br/>};<br/><br/>var player2 = {<br/> color: "#000",<br/> x: 220,<br/> y: 0,<br/> width: 50,<br/> height: 10,<br/> draw: function() {<br/> canvas.fillStyle = this.color;<br/> canvas.fillRect(this.x, this.y, this.width, this.height);<br/> }<br/>};<br/><br/>var ball = {<br/> x : 2,<br/> y : 2,<br/> r : 5,<br/> draw: function() {<br/> canvas.beginPath();<br/> canvas.arc(this.x, this.y, this.r, 0, Math.PI*2, true);<br/> canvas.fill();<br/> }<br/><br/>};<br/>[/js]<br/><hr /><br/><br/>We are defining player1 and player2 and setting its height, width, default position and finally giving it a shape.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/stable-300x203.png" alt="HTML5 Air hockey" title="HTML5 Air hockey" class="alignnone" /><br/><br/>At this stage if you run the code then you will just find a blank canvas element with no players and no ball. Because we just created the players and ball, we have not set them to do something in canvas. So let's do that now.<br/><br/><br/><hr /><br/>[js]<br/><br/>init.interval = setInterval(function(){<br/> update();<br/> draw();<br/>}, 1000/FPS.set);<br/><br/><br/>function update() {<br/> if (keydown.left) {<br/> player.x -= 5;<br/> player2.x -= 5;<br/> }<br/><br/> if (keydown.right) {<br/> player.x += 5;<br/> player2.x += 5;<br/> }<br/> <br/> player.x = player.x.clamp(0, canvas_width - player.width);<br/> <br/> player2.x = player.x.clamp(0, canvas_width - player.width);<br/> <br/>}<br/><br/>function draw() {<br/> canvas.clearRect(0, 0, canvas_width, canvas_height);<br/> player.draw();<br/> player2.draw();<br/> ball.draw();<br/> <br/>}<br/>[/js]<br/><hr /><br/><br/>Now if you run the file then you'll find that in our canvas a ball and two players will present. If you try to press left and right arrow players will move left/right.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/ready-state-300x202.png" alt="HTML5 Air hockey" title="HTML5 Air hockey" class="alignnone" /><br/><br/>In our <code>init()</code> function we call two functions <code>draw()</code> and <code>update()</code> in interval. Update function is used to check any movements or changes in our canvas and it sets the value of players and ball. Draw function will take those values and draw it on canvas.<br/><br/>So if suppose you pressed left arrow once, the update function will take the X position of the player, it will update the new position in the player parameters.<br/><br/>Then the draw function will take the new value from player's parameters and then it will update the canvas, so it appears that the player is actually moving.<br/><br/>And also we are limiting our players to go outside the <strong>canvas</strong>. We use clamp function to check whether the player has touched the boundaries of the canvas.<br/><br/>Now let's move the ball.<br/><br/><hr /><br/>[js]<br/>function draw() {<br/> canvas.clearRect(0, 0, canvas_width, canvas_height);<br/> player.draw();<br/> player2.draw();<br/> ball.draw();<br/> <br/> if (ball.x + mx > canvas_width || ball.x + mx < 0){<br/> mx = -mx;<br/> }<br/> if (ball.y + my > canvas_height || ball.y + my < 0){<br/> my = -my;<br/> }<br/> <br/> ball.x += mx;<br/> ball.y += my;<br/> <br/>}<br/><br/>[/js]<br/><hr /><br/><br/>We updated our draw function. Here we use if-else conditions to check the position of the ball. If its touching the boundary then throw it back. mx and my are the variables which helps the ball to give X, Y position. And with its help we change the X, Y co-ordinates of the ball every time.<br/><br/>Now if you run the code, the ball will be moving.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/play-300x201.png" alt="HTML5 Air hockey" title="HTML5 Air hockey" class="alignnone" /><br/><br/>But it won't be reacting with the players. Now we will update our draw function one more time to check whether our ball is colliding with player1 or player2.<br/><br/><hr /><br/>[js]<br/><br/>function collides(a, b) {<br/> if(a.y == b.y || a.y <= b.height){<br/> if(a.x >= b.x && a.x <= b.x+b.width){<br/> return true;<br/> }else{<br/> return false;<br/> }<br/> }<br/> <br/>}<br/><br/>function draw() {<br/> canvas.clearRect(0, 0, canvas_width, canvas_height);<br/> player.draw();<br/> player2.draw();<br/> ball.draw();<br/> <br/> if (collides(ball, player)) {<br/> <br/> my = -my;<br/> <br/> }else if (collides(ball, player2)) {<br/> <br/> my = +my;<br/> <br/> }else<br/> {<br/> if (ball.x + mx > canvas_width || ball.x + mx < 0){<br/> mx = -mx;<br/> }<br/> if (ball.y + my > canvas_height || ball.y + my < 0){<br/> my = -my;<br/> }<br/> <br/> <br/> }<br/> <br/> ball.x += mx;<br/> ball.y += my;<br/> <br/>}<br/><br/><br/>[/js]<br/><hr /><br/><br/>As you can see we have created one more function collides(), which takes two parameters. In our draw function we are checking whether ball and player1, ball and player2 are colliding with each other. In our collides() function we are checking position of ball and players. If it returns true, then we change the mx and my value.<br/><br/>Now try running the game again, when the ball hits the players it will return back.<br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/collide-300x202.png" alt="HTML5 Air hockey" title="HTML5 Air hockey" class="alignnone" /><br/><br/>Last we will code the game over section. If the ball touched the horizontal boundary of canvas then we end our game.<br/><br/><hr /><br/>[js]<br/>function gameOver(){<br/> canvas.fillStyle = '#000';<br/> canvas.font = '18px verdana';<br/> canvas.textBaseline = 'top';<br/> canvas.fillText('Game Over, refresh the page to restart game', 50, 150);<br/> <br/> clearInterval(init.interval);<br/> <br/> $('#level').removeAttr('disabled');<br/>}<br/><br/>if (ball.y + my > canvas_height || ball.y + my < 0){<br/> my = -my;<br/> gameOver();<br/>}<br/>[/js]<br/><hr /><br/><br/>We call gameover() function in our draw function. With help of clearInterval() function we stop the game.<br/><br/><br/><img src="http://www.webstutorial.com/wp-content/uploads/2012/07/gameover-300x210.png" alt="HTML5 Air hockey" title="HTML5 Air hockey" class="alignnone" /><br/><br/><br/>So this was the basic game, it can't be completely called Air Hockey but after creating it I found that word to be the best. Still there are many bugs. I just started learning HTML5 and this was my first attempt on a game. You can download this from <strong><a href="https://github.com/nirajmchauhan/air-hockey-html5" title="GitHub" target="_blank">github</a></strong>, suggestions are always welcomed and fork me if you liked it.Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com2tag:blogger.com,1999:blog-5193779899556680887.post-54616581816187340132012-07-03T04:25:00.000+05:302014-07-09T16:43:39.711+05:30JQuery Slide Left Right | JQuery Toggle Left RightRecently I completed a project where I had to show a panel to the left side using <strong><a href="http://www.webstutorial.com/category/jquery" title="JQuery" target="_blank">JQuery</a></strong>, on mouse hover it comes out and on mouse leave it goes back. Its seems to be easy but to maintain the functionality is not that easy.<br/><br/>Here's a small snippet on how to do it.<br/><br/><strong>HTML</strong><br/><hr /><br/>[html]<br/><div id="sidePanel"><br/> <div id="panelContent"><br/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe> <br/> </div><br/> <div id="panelHandle"><br/> <p>Facebook</p><br/> </div><br/><br/></div><br/>[/html]<br/><hr /><br/><br/><br/><strong>JQuery</strong><br/><hr /><br/>[js]<br/>jQuery(function($) {<br/> $(document).ready(function() {<br/> $('#panelHandle').hover(function() {<br/> $('#sidePanel').stop(true, false).animate({<br/> 'left': '0px'<br/> }, 900);<br/> }, function() {<br/> jQuery.noConflict();<br/> });<br/><br/> jQuery('#sidePanel').hover(function() {<br/> // Do nothing<br/> }, function() {<br/><br/> jQuery.noConflict();<br/> jQuery('#sidePanel').animate({<br/> left: '-201px'<br/> }, 800);<br/><br/> });<br/> });<br/>});<br/>[/js]<br/><hr /><br/><br/><strong>Demo : </strong><br/><br/><hr /><br/><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nirajmchauhan/GPdFk/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/><hr />Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com14tag:blogger.com,1999:blog-5193779899556680887.post-60259466256408197942012-06-27T04:04:00.000+05:302014-07-09T16:43:39.642+05:30How to create a module in Drupal 7.x<p><strong>What is a module in Drupal?</strong><br/>A module is nothing but a collection of functions that links into Drupal, providing all the additional functionality/behaviour for your Drupal installation or your Drupal site. After reading this tutorial, you will be able to create a basic block module and use it as a template for more advanced modules.</p><br/><p><strong>Things to be remember before we start:</strong><br/>This tutorial will not necessarily prepare you to write modules for public release it will only give you a step by step integration reagarding "How to create a module!". It does not cover caching, nor does it elaborate on permissions or security issues but you can simply use this tutorial as your starting point and extend your skills with other resources.</p><br/><p><strong>Our tutorial assumes you have:</strong></p><br/><ul><br/><li>Basic PHP knowledge, including syntax and the concept of PHP objects</li><br/><li>Basic understanding of database tables, fields, records and SQL statements</li><br/><li>A working Drupal 7 installation</li><br/><li>Drupal administration access</li><br/><li>Webserver access</li><br/></ul><br/><p>Our tutorial does not assume you have any knowledge about the inner workings of a Drupal module.</p><br/><h2>Getting started</h2><br/><p>In this tutorial we'll create a module that lists links to content such as blog entries or forum discussions that were created recently (within the last week). This page in the tutorial describes how to create the initial module file and directory.</p><br/><h3><strong>Name your module</strong></h3><br/><p>The first step in creating a module is to choose a "short name" for it. This short name will be used in all file and function names in your module, so it must start with a letter, and it must contain only lower-case letters and underscores. For this example, we'll choose "current_posts" as the short name. Important note: Be sure you follow these guidelines and do not use upper case letters in your module's short name, since it is used for both the module's file name and as a function prefix. When you implement Drupal "hooks" (see later portions of tutorial), Drupal will only recognize your hook implementation functions if they have the same function name prefix as the name of the module file.</p><br/><p>It's also important to make sure your module does not have the same short name as any theme you will be using on the site.</p><br/><h3>Create a folder and a module file</h3><br/><p>Given that our choice of short name is "current_posts" :</p><br/><ol><br/><li><strong>Start the module by creating a folder in your Drupal installation at the path:</strong><br/><ul><br/><li><code>sites/all/modules/custom/current_posts</code></li><br/></ul><br/></li><br/><li><strong>Create the PHP file for the module :</strong><br/><ul><br/><li>Save it as <code>current_posts.module</code> in the directory <code>sites/all/modules/custom/current_posts</code></li><br/><li><em>As of Drupal 6.x, <code>sites/all/modules</code> is the preferred place for non-core modules (and <code>sites/all/themes</code> for non-core themes), because this places all site-specific files in the sites directory. This allows you to more easily update the core files and modules without erasing your customizations. Alternatively, if you have a multi-site Drupal installation and this module is for only one specific site, you can put it in <code>sites/your-site-folder/modules</code>.</em></li><br/></ul><br/></li><br/><li><strong>Add an opening PHP tag to the module :</strong><br/><ul><br/><li><br/><div><code><?php</code></div><br/></li><br/><li><em>Module files begin with the opening PHP tag. Do not place the CVS ID tag in your module. It is no longer needed with drupal.org's conversion to Git. If the coder module gives you error messages about it, then that module has not yet been updated to drupal.org's Git conventions.</em></li><br/></ul><br/></li><br/></ol><br/><p>The module is not operational yet: it hasn't been activated. We'll activate the module later in the tutorial.</p><br/><h3>Coding standards</h3><br/><p>As per the Coding standards, omit the closing <code>?></code> tag. Including the closing tag may cause strange runtime issues on certain server setups. (Note that the examples in documentation will show the closing tag for formatting reasons only and you should not include it in your real code.)</p><br/><h2>Telling Drupal about your module</h2><br/><p>All modules must have a 'modulename.info' file, which contains meta information about the module.</p><br/><p>The general format is:</p><br/><div>[php]name = Module Name<br /><br/> description = A description of what your module does.<br /><br/> core = 7.x[/php]</p><br/></div><br/><p>For our module, we will replace 'Module Name' in the example above with the name of our module, 'Current Posts'. Without this file, the module <strong>will not show up in the module listing</strong>. Here is our specific example:</p><br/><div>[php]name = Current Posts<br /><br/> description = A block module that lists links to recent posts.<br /><br/> core = 7.x[/php]</p><br/></div><br/><p>Add the source above to a file named <code>current_posts.info</code> and save it into the module's directory at <code>sites/all/modules/current_posts</code>.</p><br/><p>Note: If you copy and paste this code block, ensure that the description data does not contain a line break (turn off word-wrap on your text-editor to be sure). Otherwise, the .info file will not parse correctly.</p><br/><h3>.Info File Details</h3><br/><p>The details of what to put in a .info file can be found on the Writing .info files page.</p><br/><h2>Comments in Drupal modules</h2><br/><p>It's always a good idea to document how your module works in comments. Drupal uses Doxygen to draw documentation from source code, so contrib modules on drupal.org follow strict comment guidelines. See <a href="http://drupal.org/node/1354" rel="nofollow">Doxygen and comment formatting conventions</a> for more details. Following these guidelines is beneficial to anyone looking at your code even if it's not strictly necessary for your situation.</p><br/><p><strong>Your first comment:</strong></p><br/><div>[php]&lt;?php<br /><br/>/**<br /><br/> * @file<br /><br/> * A block module that displays recent blog and forum posts.<br /><br/> */<br /><br/>?&gt;[/php]</p><br/></div><br/><p>@file signifies that this comment pertains to the entire file. The doc block begins with a slash and two asterisks (/**) and ends with one asterisk and a slash (*/). Following Drupal guidelines, we will introduce each function in the module with such a comment.</p><br/><h2>Implementing your first hook</h2><br/><p>Hooks are fundamental to Drupal modules. They allow you to integrate your module into the actions of Drupal core.</p><br/><p>[php]&lt;?php<br /><br/>&lt;div&gt;<br /><br/>&lt;pre&gt;function current_posts_help($path, $arg) {</p><br/><p>}<br /><br/>?&gt;[/php]</p><br/><p> </p><br/><p>[php]&lt;?php<br /><br/>/**<br /><br/> * Implements hook_help.<br /><br/> *<br /><br/> * Displays help and module information.<br /><br/> *<br /><br/> * @param path<br /><br/> * Which path of the site we're using to display help<br /><br/> * @param arg<br /><br/> * Array that holds the current path as returned from arg() function<br /><br/> */<br /><br/>function current_posts_help($path, $arg) {<br /><br/>switch ($path) {<br /><br/>case &quot;admin/help#current_posts&quot;:<br /><br/>return '&lt;p&gt;'. t(&quot;Displays links to nodes created on this date&quot;) .'&lt;/p&gt;';<br /><br/>break;<br /><br/>}<br /><br/>}<br /><br/>?&gt;[/php]</p><br/><p>(Note the closing <code>?></code> should not appear in your code.)</p><br/><h2>Declaring the block</h2><br/><p>To use this hook to define our block, go to your <code>current_posts.module</code> file and create the function <code>current_posts_block_info()</code> as follows:</p><br/><div>[php]&lt;?php<br /><br/>/**<br /><br/> * Implements hook_block_info().<br /><br/> */<br /><br/>function current_posts_block_info() {<br /><br/>$blocks['current_posts'] = array(<br /><br/>'info' =&gt; t('Current posts'), //The name that will appear in the block list.<br /><br/>'cache' =&gt; DRUPAL_CACHE_PER_ROLE, //Default<br /><br/>);<br /><br/>return $blocks;<br /><br/>}<br /><br/>?&gt;[/php]</p><br/></div><br/><p>(Remember not to include the closing <code>?></code> in your code.)</p><br/><h2>Retrieving data</h2><br/><p>The function begins with getting the time numbers. Here's the first part:</p><br/><div>[php]&lt;?php<br /><br/>/**<br /><br/> * Custom content function.<br /><br/> *<br /><br/> * Set beginning and end dates, retrieve posts from database<br /><br/> * saved in that time period.<br /><br/> *<br /><br/> * @return<br /><br/> * A result set of the targeted posts.<br /><br/> */<br /><br/>function current_posts_contents(){<br /><br/>//Get today's date.<br /><br/>$today = getdate();<br /><br/>//Calculate the date a week ago.<br /><br/>$start_time = mktime(0, 0, 0,$today['mon'],($today['mday'] - 7), $today['year']);<br /><br/>//Get all posts from one week ago to the present.<br /><br/>$end_time = time();<br /><br/>?&gt;[/php]</p><br/></div><br/><div><br/><p>Next we use Drupal's Database API to retrieve our list of current nodes. This is the second part of the custom function:</p><br/><div>[php]&lt;?php<br /><br/>//Use Database API to retrieve current posts.<br /><br/>$query = db_select('node', 'n')<br /><br/>-&gt;fields('n', array('nid', 'title', 'created'))<br /><br/>-&gt;condition('status', 1) //Published.<br /><br/>-&gt;condition('created', array($start_time, $end_time), 'BETWEEN')<br /><br/>-&gt;orderBy('created', 'DESC') //Most recent first.<br /><br/>-&gt;execute();<br /><br/>return $query;<br /><br/>}<br /><br/>?&gt;[/php]</p><br/><ol><br/><li>We build the query using the <code>db_select</code> method, which takes a table name ('node') and alias ('n') as arguments.</li><br/><li>The <code>fields</code> method uses the table assigned the alias 'n' to select the fields listed in the array in the second argument.</li><br/><li>The <code>condition</code> method takes three arguments. The first is the field, the second the value, the third the operator. If no operator is specified, as in 'status' above, <code>=</code> is assumed.</li><br/><li>The <code>orderBy</code> method sorts according to the field in the first argument, in the order specified by the second argument.</li><br/><li>The <code>execute</code> method compiles and runs the query and returns a result set/statement object.</li><br/></ol><br/><p>Here's the complete function:</p><br/><div>[php]&lt;?php<br /><br/>/**<br /><br/> * Custom content function.<br /><br/> *<br /><br/> * Set beginning and end dates, retrieve posts from database<br /><br/> * saved in that time period.<br /><br/> *<br /><br/> * @return<br /><br/> * A result set of the targeted posts.<br /><br/> */<br /><br/>function current_posts_contents(){<br /><br/>//Get today's date.<br /><br/>$today = getdate();<br /><br/>//Calculate the date a week ago.<br /><br/>$start_time = mktime(0, 0, 0,$today['mon'],($today['mday'] - 7), $today['year']);<br /><br/>//Get all posts from one week ago to the present.<br /><br/>$end_time = time();</p><br/><p>//Use Database API to retrieve current posts.<br /><br/>$query = db_select('node', 'n')<br /><br/>-&gt;fields('n', array('nid', 'title', 'created'))<br /><br/>-&gt;condition('status', 1) //Published.<br /><br/>-&gt;condition('created', array($start_time, $end_time), 'BETWEEN')<br /><br/>-&gt;orderBy('created', 'DESC') //Most recent first.<br /><br/>-&gt;execute();<br /><br/>return $query;<br /><br/>}<br /><br/>?&gt;[/php]</p><br/></div><br/><p>(Remember not to include the closing <code>?></code> in your code.)</p><br/><h2>Generating block content</h2><br/><h3>Access check</h3><br/><p>Here's the first part of the code:</p><br/><div>[php]&lt;?php<br /><br/>function current_posts_block_view($delta = '') {<br /><br/>switch($delta){<br /><br/>case 'current_posts':<br /><br/>$block['subject'] = t('Current posts');<br /><br/>if(user_access('access content')){<br /><br/>//Retrieve and process data here.<br /><br/>}<br /><br/>?&gt;[/php]</p><br/></div><br/></div><br/><div></div><br/><div><br/><h3>Coding the data as links</h3><br/><p>Here's the next bit of code:</p><br/><div>[php]&lt;?php<br /><br/>//Use our custom function to retrieve data.<br /><br/>$result = current_posts_contents();<br /><br/>//Array to contain items for the block to render.<br /><br/>$items = array();<br /><br/>//Iterate over the resultset and format as links.<br /><br/>foreach ($result as $node){<br /><br/>$items[] = array(<br /><br/>'data' =&gt; l($node-&gt;title, 'node/' . $node-&gt;nid),<br /><br/>);<br /><br/>}<br /><br/>?&gt;[/php]</p><br/></div><br/></div><br/><div></div><br/><div><br/><h3>Theming the data</h3><br/><p>Here's the last section of code for <code>current_posts_block_view</code>:</p><br/><div>[php]&lt;?php</p><br/><p>if (empty($items)) { //No content in the last week.<br /><br/>$block['content'] = t('No posts available.');<br /><br/>} else {<br /><br/>//Pass data through theme function.<br /><br/>$block['content'] = theme('item_list', array(<br /><br/>'items' =&gt; $items));<br /><br/>}<br /><br/>}<br /><br/>}<br /><br/>return $block;<br /><br/>}<br /><br/>?&gt;[/php]</p><br/></div><br/></div><br/></div><br/><h2>The Final Steps</h2><br/><p><strong>Testing and troubleshooting the module</strong></p><br/><p>It's time to enable and fully test your module!</p><br/><h3>Enable the module</h3><br/><p>Go to <em>Modules</em>, or <code>http://example.com/admin/modules</code>, and scroll down to the bottom of the list in the 'Other' category. You should see the module 'Current posts.' Click the checkbox to enable <em>Current posts</em>, and save your configuration. Now you should see a link to <em>Help</em> beside the module name. Click it to see the help text you entered in <code>current_posts_help</code>.</p><br/><h3>Enable the block</h3><br/><p>Next, navigate to <em>Structure > Blocks</em>, or <code>http://example.com/admin/structure/block</code>. Scroll down to the bottom of the list. Among the disabled blocks, you should find the name, 'Current posts'. Set its location for one of the page regions and save. Navigate to another page like your homepage to see your block. Congratulations! You have written a working module.</p><br/><h3>Troubleshooting</h3><br/><p>If you get a "white screen" or a PHP error when you enable this module, it probably means you have a syntax error in your <code>.module</code> file. Be sure all your punctuation is correct, semi-colons, commas, etc. all in the right places, and that you have all the hook names and module short names spelled correctly. (In the case of a white screen, you may be able to find out what the PHP error was by looking in your Apache error log. Or you can try changing PHP's error reporting level.)</p><br/><p>If you cannot find and fix the syntax error, nothing on your site will display, because Drupal will try to load your module on every page request. The easiest way to get your site working again is to delete the module's folder or move it out of the site, in which case Drupal will figure out that it shouldn't load this module after all, and your site should work again.</p><br/><h3>Clear caches</h3><br/><p>Drupal caches a lot of data, and if you are not seeing changes appear, that could be why. In this phase of the module, the caches shouldn't be an issue, but they will be as we proceed. To get all the troubleshooting instructions in one place, we'll give you the instructions here that you'll need later.</p><br/><p>To clear the caches, go to <em>Configuration > Performance</em> or <code>http://example.com/admin/config/development/performance</code>, and click the <em>Clear all caches</em>button.</p>Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com0tag:blogger.com,1999:blog-5193779899556680887.post-50935380734642996972012-06-18T01:03:00.000+05:302014-07-09T16:43:39.585+05:30CSS3 UI Buttons SetI just saw the amazing art work by <a href="http://www.alessioatzeni.com/about/" target="_blank">Alessio Atzeni</a> for creating <a href="http://www.alessioatzeni.com/blog/simple-button-ui-psd/" target="_blank">UI Buttons Design</a>. I just converted the PSD to <strong><a href="http://www.webstutorial.com/tag/html5" title="HTML5">HTML5 </a></strong>and <strong><a href="http://www.webstutorial.com/tag/css3" title="CSS3">CSS3</a></strong>, so lets start with it. This tut will be having two set of buttons blue and black.<br/><br/>Each button has three states: normal, hover and active.<br/><br/><a href="http://www.webstutorial.com/wp-content/uploads/2012/06/button-UI-Wp.jpg"><img src="http://www.webstutorial.com/wp-content/uploads/2012/06/button-UI-Wp-300x205.jpg" alt="CSS3-UI-BUTTONS" title="button-UI-Wp" class="alignnone" /></a><br/><br/>The css selectors will be <a href="http://www.webstutorial.com/css3-image-hover-effects/css3" title="CSS3 Image Hover Effects With Caption">:hover</a> and :active.<br/><br/>I will be using Foundation-Icons font for getting the icon image instead of using an image.<br/><br/><hr /><br/><strong>Blue Set</strong><br/><hr /><br/><br/><a href="http://www.webstutorial.com/wp-content/uploads/2012/06/blue-set.png"><img src="http://www.webstutorial.com/wp-content/uploads/2012/06/blue-set-300x126.png" alt="CSS3-UI-BUTTONS" title="blue-set" class="alignnone" /></a><br/><br/>HTML :<br/>[html]<br/><a class="blue">a</a><br/>[/html]<br/><br/><br/>CSS:<br/>[css]<br/>.blue{<br/> background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> <br/> -webkit-transition:all 0.1s linear;<br/> -moz-transition:all 0.1s linear;<br/> -o-transition:all 0.1s linear;<br/> -ms-transition:all 0.1s linear;<br/> transition:all 0.1s linear;<br/> <br/> background-color: #5683b1;<br/> /*font-family:icons;*/<br/> border-top:1px solid #8bbfd7;<br/> border-radius: 50% 50% 50% 50%;<br/> font-size: 15px;<br/> font-weight: bold;<br/> color:#24272a;<br/> text-shadow:0 1px 0 #5a92ba;<br/> box-shadow: 0 5px 6px #1C1F22;<br/> cursor: default;<br/> text-align: center;<br/> width: 33px;<br/> height: 33px;<br/> float: left;<br/> margin: 10px;<br/> font-family:icons;<br/>}<br/><br/>.blue:hover{<br/> background-color: #5f94bc;<br/>}<br/><br/>.blue:active{<br/> background-color: #3a6a9b;<br/> box-shadow: 0 0 3px #323638 inset;<br/> border: 1px solid #3c4246;<br/>}<br/>[/css]<br/><br/><hr /><br/><strong>Black Set</strong><br/><hr /><br/><br/><a href="http://www.webstutorial.com/wp-content/uploads/2012/06/black-set.png"><img src="http://www.webstutorial.com/wp-content/uploads/2012/06/black-set-300x154.png" alt="CSS3-UI-BUTTONS" title="black-set" class="alignnone" /></a><br/><br/>HTML:<br/>[html]<br/><p class="blackMask"><br/> <a class="black">a</a><br/></p><br/>[/html]<br/><br/>CSS:<br/>[css]<br/>.black{<br/> background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> -webkit-transition:all 0.1s linear;<br/> -moz-transition:all 0.1s linear;<br/> -o-transition:all 0.1s linear;<br/> -ms-transition:all 0.1s linear;<br/> transition:all 0.1s linear;<br/><br/> <br/> background-color: #464d53;<br/> /*font-family:icons;*/<br/> border-top:1px solid #626c74;<br/> border-radius: 50% 50% 50% 50%;<br/> font-size: 15px;<br/> font-weight: bold;<br/> color:#191919;<br/> text-shadow:0 1px 0 #485258;<br/> box-shadow: 0 3px 6px #1f2225;<br/> cursor: default;<br/> text-align: center;<br/> width: 33px;<br/> height: 33px;<br/> float: left;<br/> margin: 7px;<br/> font-family:icons;<br/>}<br/><br/>.black:hover{<br/> background-color: #4b575f;<br/> color:#00b7fb;<br/> text-shadow:0 0 5px #39748c;<br/>}<br/><br/>.black:active{<br/> background-color: #2f383d;<br/> box-shadow: 0 0 3px #323638 inset;<br/> border: 1px solid #20292e;<br/> color:#191919;<br/> text-shadow:0 1px 0 #485258;<br/>}<br/><br/>.blackMask{<br/> background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));<br/> background-color:#30363a;<br/> border-radius: 50% 50% 50% 50%;<br/> float: left;<br/> width:47px;<br/> position: relative;<br/> height:47px;<br/> margin: 10px;<br/> border-top:1px solid #3c4247;<br/> border-bottom:1px solid #4a5155;<br/>}<br/><br/>.black:before {<br/> background: none repeat scroll 0 0 transparent;<br/> border-bottom: 1px solid #4F555A;<br/> border-radius: 50% 50% 50% 50%;<br/> border-top: 1px solid #373C40;<br/> content: "";<br/> height: 50px;<br/> left: -2px;<br/> position: absolute;<br/> top: -3px;<br/> width: 50px;<br/>}<br/>[/css]<br/><br/><br/>These buttons can be used widely and advantages of using it, no images, fully flexible and customizable and it can be applied to any container <code>a</code>, <code>button</code>, <code>span</code>, <code>p</code> etc.<br/><br/>Thanks to Alessio, for creating the buttons Design.Anonymoushttp://www.blogger.com/profile/16460936708896649632noreply@blogger.com1