7 Popular Java Script Framework

Now day’s java script has very important role in web development. If you are working in web 2.0 then you should know about this. The core java script is very typical to handle developers as well as beginners. To solve this problem there are a lot of java script framework or libraries. These library are easy to leans and makes code structured manner. There are some MVC based javas script libraries which is more responsive and extensible. You can do with JavaScript is pretty fascinating look and feel of website when it comes to dynamic page effects and user interactivity.
Below, you will find some of the most preferable JavaScript frameworks that can improve your skills as a web developer.

jQuery

jQuery is a revolutionary JavaScript library.Jquery makes thing very easier and simple on client side. JQuery simplifies HTML document traversing, event handling, animation and AJAX interaction for quick and smooth web development.Jquery are using many famous website and brands like google, digg, Technorati etc.Jquery has rich plugins list.
Continue reading …

Posted: Tuesday, June 19th, 2012
Author: Parvez

How to create Popup box with facebox and jquery

Now in web 2.0 the UI is very important part of web development.So Java script and CSS is play very important role
in web development.Here i am discussing how to create popupbox with help of facebox and jquery.

Step1: First we will include js file and jquery file of facebox.
1
2
3
4
5
6
7
8

<a href="https://github.com/defunkt/facebox" target="_blank">Download here</a>

<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
Step2: Now create link in html to display popup.
1
2
3

<p><a href="#info" rel="facebox">Click to display</a></p>
</div>
step3: create popbox and include all the the content which is want to dislay in html file.
1
2
3
4
5
6
7

<div id="info" style="display: none;">
<p>Popup div</p>
<p>It looks great!</p>
</div>

Note: popup box id is same as href of step 2.

step 4:

Now include js code to display facebox popup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({//apply all anchor tag which has rel=facebox attribute
        loadingImage : 'src/loading.gif',
        closeImage   : 'src/closelabel.png'
      })
    })
  </script>

Result

facebox-popup

Posted: Saturday, May 19th, 2012
Author: Parvez

Auto complete suggestion Jquery,PHP with nice form

Hi friend, I hope all are good now I am describing how to create auto complete suggestion with help of jquery and php.

Step1:

first we will create HTML layout file which is contain all reference file as well as all CSS style code.

HTML CODE
view plaincopy to clipboardprint?
  1. <link rel=“stylesheet” type=“text/css” href=“style.css” />  
  2. <script type=“text/javascript” src=“jquery-1.2.1.pack.js”></script>  
  3. <script type=“text/javascript” src=“js/jconfirmaction.jquery.js”></script>  
  4. <script type=“text/javascript”>  
  5.       
  6.     $(document).ready(function() {  
  7.         $(‘.ask’).jConfirmAction();  
  8.     });  
  9.       
  10. </script>  
  11. <script type=“text/javascript” src=“js/jquery.min.js”></script>  
  12.   
  13. <script language=“javascript” type=“text/javascript” src=“js/niceforms.js”></script>  
  14. <link rel=“stylesheet” type=“text/css” media=“all” href=“js/niceforms-default.css” />  
  15.   
  16. <script type=“text/javascript”>  
  17.     function lookup(inputString) {  
  18.         if(inputString.length == 0) {  
  19.             // Hide the suggestion box.  
  20.             $(‘#suggestions’).hide();  
  21.         } else {  
  22.             $.post(“rpc.php”, {queryString: “”+inputString+“”}, function(data){  
  23.                 if(data.length >0) {  
  24.                     $(‘#suggestions’).show();  
  25.                     $(‘#autoSuggestionsList’).html(data);  
  26.                 }  
  27.             });  
  28.         }  
  29.     } // lookup  
  30.       
  31.     function fill(thisValue) {  
  32.         $(‘#inputString’).val(thisValue);  
  33.         setTimeout(“$(‘#suggestions’).hide();”, 200);  
  34.     }  
  35. </script>  
  36.   
  37. <style type=“text/css”>  
  38.     body {  
  39.         font-family: Helvetica;  
  40.         font-size: 11px;  
  41.         color: #000;  
  42.     }  
  43.       
  44.     h3 {  
  45.         margin: 0px;  
  46.         padding: 0px;     
  47.     }  
  48.   
  49.     .suggestionsBox {  
  50.         position: absolute;  
  51.         left: 30px;  
  52.         margin: 10px 0px 0px 0px;  
  53.         width: 200px;  
  54.         background-color: #212427;  
  55.         -moz-border-radius: 7px;  
  56.         -webkit-border-radius: 7px;  
  57.         border: 2px solid #000;   
  58.         color: #fff;  
  59.     }  
  60.       
  61.     .suggestionList {  
  62.         margin: 0px;  
  63.         padding: 0px;  
  64.     }  
  65.       
  66.     .suggestionList li {  
  67.           
  68.         margin: 0px 0px 3px 0px;  
  69.         padding: 3px;  
  70.         cursor: pointer;  
  71.     }  
  72.       
  73.     .suggestionList li:hover {  
  74.         background-color: #659CD8;  
  75.     }  
  76. </style>  
  77.   
  78.   
  79. </head>  
  80.   
  81. <body>  
  82.   
  83.   
  84.     <div>  
  85.           
  86.             <div>  
  87.                 Type your county:  
  88.                   
  89.   
  90.                 <input type=“text” size=“30″ value=“” id=“inputString” onkeyup=“lookup(this.value);” onblur=“fill();” />  
  91.             </div>  
  92.               
  93.             <div class=“suggestionsBox” id=“suggestions” style=“display: none;”>  
  94.                 <img src=“upArrow.png” style=“position: relative; top: -12px; left: 30px;z-index:8880″ alt=“upArrow” />  
  95.                 <div class=“suggestionList” id=“autoSuggestionsList”>  
  96.                     &nbsp;  
  97.                 </div>  
  98.                   
  99.             </div>  
  100.             <div>dddddddddddddddddddd<div>  
  101.             <div class=“form”>  
  102.          <form action=“” method=“post” class=“niceform”>  
  103.           
  104.                 <fieldset>  
  105.                     <dl>  
  106.                         <dt><label for=“email”>Email Address:</label></dt>  
  107.                         <dd><input type=“text” name=“” id=“” size=“54″ /></dd>  
  108.                     </dl>  
  109.                     <dl>  
  110.                         <dt><label for=“password”>Password:</label></dt>  
  111.                         <dd><input type=“text” name=“” id=“” size=“54″ /></dd>  
  112.                     </dl>  
  113.                      
  114.                      
  115.                     <dl>  
  116.                         <dt><label for=“gender”>Select categories:</label></dt>  
  117.                         <dd>  
  118.                             <select size=“1″ name=“gender” id=“”>  
  119.                                 <option value=“”>Select option 1</option>  
  120.                                 <option value=“”>Select option 2</option>  
  121.                                 <option value=“”>Select option 3</option>  
  122.                                 <option value=“”>Select option 4</option>  
  123.                                 <option value=“”>Select option 5</option>  
  124.                             </select>  
  125.                         </dd>  
  126.                     </dl>  
  127.                     <dl>  
  128.                         <dt><label for=“interests”>Select tags:</label></dt>  
  129.                         <dd>  
  130.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Web design</label>  
  131.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Business</label>  
  132.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Simple</label>  
  133.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>Clean</label>  
  134.                         </dd>  
  135.                     </dl>  
  136.                      
  137.                     <dl>  
  138.                         <dt><label for=“color”>Select type</label></dt>  
  139.                         <dd>  
  140.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Basic</label>  
  141.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Medium</label>  
  142.                             <input type=“radio” name=“type” id=“” value=“” /><label class=“check_label”>Premium</label>  
  143.                         </dd>  
  144.                     </dl>  
  145.                      
  146.                      
  147.                      
  148.                     <dl>  
  149.                         <dt><label for=“upload”>Upload a File:</label></dt>  
  150.                         <dd><input type=“file” name=“upload” id=“upload” /></dd>  
  151.                     </dl>  
  152.                      
  153.                     <dl>  
  154.                         <dt><label for=“comments”>Message:</label></dt>  
  155.                         <dd><textarea name=“comments” id=“comments” rows=“5″ cols=“36″></textarea></dd>  
  156.                     </dl>  
  157.                      
  158.                     <dl>  
  159.                         <dt><label></label></dt>  
  160.                         <dd>  
  161.                             <input type=“checkbox” name=“interests[]“ id=“” value=“” /><label class=“check_label”>I agree to the <a href=“#”>terms &amp; conditions</a></label>  
  162.                         </dd>  
  163.                     </dl>  
  164.                      
  165.                      <dl class=“submit”>  
  166.                     <input type=“submit” name=“submit” id=“submit” value=“Submit” />  
  167.                      </dl>  
  168.                       
  169.                       
  170.                      
  171.                 </fieldset>  
  172.                  
  173.          </form>  
  174.          </div>   
  175.           
  176.     </div>  

Step2:

Now we will create PHP script file, It has all Sql Query to get matching records for show auto suggestion.

PHP Code
view plaincopy to clipboardprint?
  1. <?php  
  2.       
  3.     // PHP5 Implementation - uses MySQLi.  
  4.     // mysqli(‘localhost’, ’yourUsername’, ’yourPassword’, ’yourDatabase’);  
  5. $dbLink = mysql_connect(‘localhost’, ‘root’ ,”) ;  
  6. $db = mysql_select_db(‘test’,$dbLink);  
  7.     //$db = new mysql_connect(‘localhost’, ’root’ ,”, ’test’);  
  8.       
  9.     if(!$db) {  
  10.         // Show error if we cannot connect.  
  11.         echo ‘ERROR: Could not connect to the database.’;  
  12.     } else {  
  13.         // Is there a posted query string?  
  14.         if(isset($_POST['queryString'])) {  
  15.             $queryString = mysql_real_escape_string($_POST['queryString']);  
  16.               
  17.             // Is the string length greater than 0?  
  18.               
  19.             if(strlen($queryString) >0) {  
  20.                 // Run the query: We use LIKE ’$queryString%’  
  21.                 // The percentage sign is a wild-card, in my example of countries it works like this…  
  22.                 // $queryString = ’Uni’;  
  23.                 // Returned data = ’United States, United Kindom’;  
  24.                   
  25.                 // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.  
  26.                 // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE ’$queryString%’ LIMIT 10  
  27.                   
  28.              $query = mysql_query(“SELECT value FROM countries WHERE value LIKE ’$queryString%’ LIMIT 10″);  
  29.               
  30.                 if($query) {  
  31.                     // While there are results loop through them - fetching an Object (i like PHP5 btw!).  
  32.                       
  33.                     while ($result = mysql_fetch_row($query)) {  
  34.                         // Format the results, im using <li> for the list, you can change it.  
  35.                         // The onClick function fills the textbox with the result.  
  36.                           
  37.                         // YOU MUST CHANGE: $result->value to $result->your_colum  
  38.                         echo ‘<li onClick=”fill(\”.$result[0].‘\’);”>’.$result[0].‘</li>’;  
  39.                     }  
  40.                 } else {  
  41.                     echo ‘ERROR: There was a problem with the query.’;  
  42.                 }  
  43.             } else {  
  44.                 // Dont do anything.  
  45.             } // There is a queryString.  
  46.         } else {  
  47.             echo ‘There should be no direct access to this script!’;  
  48.         }  
  49.     }  
  50. ?>  

Posted: Saturday, May 19th, 2012
Author: Parvez

Facebook type upload with jquery and smarty framework

Hi,
Friend now I will discuss about facebook type file upload functionality with jquery and smarty template engine framework.
Like when the user mouse over the image edit link will show and onout will off.

Template file Code

view plaincopy to clipboardprint?
  1. <script type=“text/javascript” src=“{$SITE_ADMIN_SITE_URL}js/jquery-ui.min.js”></script>  
  2.   
  3. <link type=“text/css” media=“screen” rel=“stylesheet” type=“text/css” href=“{$SITE_ADMIN_SITE_URL}css/jquery-ui-1.7.3.custom.css”/>  
  4.    
  5.   
  6. <div id=“mapdiv” style={if $action eq ‘map’}“display:block;”{else}“display:none;”{/if}>  
  7. <table width=“100%” cellpadding=“0″ cellspacing=“0″>  
  8. <tr><td colspan=“3″>&nbsp;</td></tr>  
  9. <tr><td colspan=“3″><h4 class=“green-text roundeddiv shadowImgae” style=“padding-left:22px;”>Map Management:</h4></td></tr>  
  10. <tr>  
  11. <td width=“10%”>&nbsp;</td><td colspan=“2″>  
  12. <div id=“mapdivdisplay” class=“roundedImage shadowImgae”>  
  13. <div id=“mapdivchange” style=“display:none;” class=“changeimg”><a id=“mapdivlink” href=“javascript:void(0);”>&nbsp;&nbsp;Click for change</a></div>  
  14. <a href=“{$UPLOAD_PATH}map/{$mapname}” rel=“facebox”><div style=“margin:5px;”><img src=“{$UPLOAD_PATH}map/{$mapname}” height=“100px” id=“mapdiciamge”/></div></a></div>  
  15.   
  16. <div id=“mapdivupload” title=“Map upload” style=“display:none;”>  
  17.  <form action=“{$SITE_ADMIN_SITE_URL}index.php?action=map&mode=add” method=“post” enctype=“multipart/form-data”>  
  18. <table><tr><td>  
  19. <label for=“file”>Filename:</label><td>  
  20. <td>  
  21. <input type=“file” name=“file” id=“file” /></td>  
  22. </tr><tr><td colspan=“2″>&nbsp;</td><td align=“right”>  
  23. <input type=“submit” name=“submit” value=“Submit” /><input type=“reset” value=“reset”/> </td>  
  24. </tr>  
  25. </table></form>  
  26. </div>  
  27. </td></tr></table>  
  28. </div>  

Javascript code
view plaincopy to clipboardprint?
  1. $(‘#mapdivdisplay’).mouseover(function() {  
  2.   $(‘#mapdivchange’).show();  
  3. });  
  4. $(“#mapdivdisplay”).mouseout(  
  5.   function () {  
  6.     $(‘#mapdivchange’).hide();  
  7.   }  
  8. );  
  9.   
  10. $(“#mapdivlink”).click(function() {  
  11.   $( “#mapdivupload” ).dialog();  
  12.   $( “#mapdivupload” ).dialog( “option”, “width”, 360 );  

Posted: Friday, May 11th, 2012
Author: Parvez

jquery difference between parent and parents

Hello friend s, Now I am discussing a topic here clarify the difference between parent() and parents().
JQuery provide two wonderful method to get parents element information of selected element.

Given the following HTML:

view plaincopy to clipboardprint?
  1. <html>  
  2. <body>  
  3. <div class=”one”>  
  4. <div class=”two”>  
  5. <p><span>Some text</span></p>  
  6. </div>  
  7. </div>  
  8. </body>  
  9. </html>  

If you want find the span parent element then you write simple code like:

$(‘span’).parent()
It will return [p] tag object.

Whereas if you call parents () method :

$(‘span’).parents()
Then you will get all above element from current selected element such as jQuery object is [p, div.two, div.one, body, html]
So main difference between parent() and parents is parent element while parents() will select all elements straight up the DOM tree.

jQuery also provide some filter method for filter search.

Like if you want find only div element then you will write code:

$(‘span’).parents().filter(‘div’)
OR
$(‘span’).parents(‘div’)
This would result in [div.two, div.one].

if you want only first div in the parent DOM then you will write:

$(‘span’).parents(‘div:eq(0)’)
Result would be ‘div.two’.

Posted: Saturday, May 5th, 2012
Author: Parvez

Header already sent php error

This Warning is shown by PHP when you use the header function to output headers or use the setcookie function to set cookies after any echo or content which is not inside PHP tag.

echo "Hello World";
header("Location: /redirect.php");
?>

Hello World !!!

?>

Solution

you can use output buffering functions to buffer your output automatically before senting any output and the output is sent as a chunk at the end.

view plaincopy to clipboardprint?
  1. <?php  
  2. ob_start(); ?>  
  3. Hello World !!!   
  4. <?php   
  5. setcookie(“name”,“value”,100);   
  6. ?>  
  7. Again !!!  
  8. <?php  
  9. ob_end_flush();  
  10. ?>