Archive for February 2012

jQuery fun #1: Number puzzle   Leave a comment

jQuery is popular for the effects they produce. May be most web developers use the download and manipulate method to create the desired effect. Designers on the other hand are scared of terms like programming, coding, logic etc. In most cases it’s the ignorance of these people that blocks the creation of original code. From scratch designs are good when you go for tailoring your needs.

As usual to learn this we need to try it. The following will surely inspire you in getting interested for writing original codes.

Puzzle.html


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //Puzzlw logic
  var pCells = $('.pCell');
  var Cur16 = [3, 3];
  pCells.bind('click', function(){
	  var x = parseInt($(this).attr('id')) - 1;
	  var now = [Math.floor(x/4), x % 4];

	  if(!cmpArrays(Cur16, now)){
		  var lCell = [now[0], now[1]];
		  lCell[0]++;
		  if(cmpArrays(Cur16, lCell) || 
				  cmpArrays(Cur16, [now[0] - 1, now[1]]) || 
				  cmpArrays(Cur16, [now[0], now[1]+1]) || 
				  cmpArrays(Cur16, [now[0], now[1]-1])){
			  pCells[Cur16[0]*4 + Cur16[1]].src = pCells[now[0]*4+now[1]].src;
			  pCells[now[0]*4+now[1]].src = "/no/16.png";

		  	  Cur16 = now;
		  }
	  }
	});
  function cmpArrays(a, b) {
	   if (a == b) {
	       return true;
	   }   
	   for (key in a) {
	     if (a[key] != b[key]) {
	         return false;
	     }
	   }
	   return true;
	}
  //puzzle end
</script>
</head>
<body>
<table width="100%" height="100%">>
<tr><td align="center" height="600px" valign="middle">
<table>
	<tr>
	<td><img class="pCell" id="1" src="/no/1.png" /></td>
	<td><img class="pCell" id="2" src="/no/2.png" /></td>
	<td><img class="pCell" id="3" src="/no/3.png" /></td>
	<td><img class="pCell" id="4" src="/no/4.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="5" src="/no/5.png" /></td>
	<td><img class="pCell" id="6" src="/no/6.png" /></td>
	<td><img class="pCell" id="7" src="/no/7.png" /></td>
	<td><img class="pCell" id="8" src="/no/8.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="9" src="/no/9.png" /></td>
	<td><img class="pCell" id="10" src="/no/10.png" /></td>
	<td><img class="pCell" id="11" src="/no/11.png" /></td>
	<td><img class="pCell" id="12" src="/no/12.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="13" src="/no/13.png" /></td>
	<td><img class="pCell" id="14" src="/no/14.png" /></td>
	<td><img class="pCell" id="15" src="/no/15.png" /></td>
	<td><img class="pCell" id="16" src="/no/16.png" /></td>
	</tr>
</table>
</td></tr>
</table>
</body>
</html>

Next step? Write the shuffle code for this

Posted February 25, 2012 by jsusmer in Lesson, mind waves

_SESSION fun #1: Visit History   Leave a comment

Practically SESSIONS have infinite serious uses. But, being serious is one part, being ‘interesting’ is more serious than that. Usually people won’t agree to include thee types of weird sections in their pages, since your browser will always decolorize the visited links! I thought it might get user attraction and they will pay attention to see their progress in finishing up reading web site contents. Anyway this is fun and those who have just started understanding SESSIONS; this will be a good part to play with … hopes they are also not in the lat minute to production!

The code does this:

  •  Tracks the current and past posts
  • Displays a list in the last visited order

Funny part, it will never show if you ever been here before, simply removes the current page from visited pages list, so visited will never know that they have been her once!

single.php


<?php
// Place this in the single.php

 get_header();
$visited_pages = $_SESSION['vpages'];
 $last_visited_page = $_SESSION['lpage'];

 while ( have_posts() ) : the_post();
   $the_title = get_the_title();
	echo "<h1>".$the_title."</h1>";
	echo "<h2>".get_the_excerpt()."</h2>";
	the_content();

	 if($last_visited_page != $the_title){
    	  if($visited_pages):
     	    $already_pages = explode("~", $visited_pages);
     	    $visited_pages = $last_visited_page;
     	    foreach ($already_pages as $item){
        	    if($the_title != $item && $last_visited_page != $item) :
        	      $visited_pages .= "~".$item;
        	    endif;
    	    }
    	 else:
    	   $visited_pages = $last_visited_page;
    	 endif;
endwhile;	 }
$_SESSION['vpages']= $visited_pages;
$_SESSION['lpage'] = $last_visited_page;

if($visited_pages)
  echo "<BR>Visited Pages:<ol> ". preg_replace("/([^~]+)~*/", "<li>$1</li>",$visited_pages) . "</ol>";

get_footer();
?>

Like always I think if you like this one, try to build one pie chart that shows how many posts are read and how many are left! You can use the Google Chart API to build the graph.

Posted February 4, 2012 by jsusmer in Lesson, mind waves

Tagged with ,