Real Code Stuff

For smart Primates & ROBOTS (oh and ALIENS ).

Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Wednesday, January 11, 2017

$(...).flexslider is not a function jquery flexslider not working

, No comments

Are you facing JavaScript flexslider error "$(...).flexslider is not a function" or jquery flexslider not working?


If jquery flexslider is not working or showing error in console ""$(...).flexslider is not a function". 

If you do not want to see this error "$(...).flexslider is not a function" then use one instance of jquery.js file and keep in mind do not use defer or async keyword in below 3 files:

1- jquery.js

2- jquery.flexslider-min.js

3- jquery.prettyPhoto.js --> *if you are also using this file.



Share:
Fore more, continue here...

Sunday, May 31, 2015

How to use jquery dataTables

, , No comments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
 <script src="jquery.js"></script>
 <script src="jquery.dataTables.min.js"></script>

</head>

<body>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>A111111111111</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>B1111111111111</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>C1111111</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>D111111111111</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>E11111111111</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>F111111111111</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>G1111111111111</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>H11111111111</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>I22222222222222222</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>J11111111111111</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>K1111111111111</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>L111111111111</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>M1111111111111</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
        </tr>
        <tr>
            <td>N11111111111111</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>O1111111111111</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>P11111111111111</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Q1111111111111111</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
        </tr>
        <tr>
            <td>R111111111111111</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
        </tr>
        <tr>
            <td>S11111111111111</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>T11111111111111</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>U1111111111111</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
        </tr>
        <tr>
            <td>V1111111111111</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
        </tr>
        <tr>
            <td>W1111111111111</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>X11111111111111</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
        </tr>
        <tr>
            <td>Y111111111111111</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Z1111111111111</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
        </tr>
        <tr>
            <td>A222222222222</td>
            <td>Regional Director</td>
            <td>Singapore</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$357,650</td>
        </tr>
        <tr>
            <td>A33333333333333</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
        </tr>
        <tr>
            <td>A44444444444444</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$850,000</td>
        </tr>
        <tr>
            <td>A5555555555555</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$163,000</td>
        </tr>
        <tr>
            <td>A6666666666666666</td>
            <td>Integration Specialist</td>
            <td>Sidney</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$95,400</td>
        </tr>
        <tr>
            <td>A777777777777</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$114,500</td>
        </tr>
        <tr>
            <td>A888888888888888</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
        </tr>
        <tr>
            <td>A99999999999999999</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
        </tr>
        <tr>
            <td>A100000000000000000</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
        </tr>
        <tr>
            <td>A121212121212121111</td>
            <td>Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$85,675</td>
        </tr>
        <tr>
            <td>AAAAAAAAAAAAAAAA</td>
            <td>Office Manager</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$164,500</td>
        </tr>
        <tr>
            <td>BBBBBBBBBBBBBBBB</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
        </tr>
        <tr>
            <td>CCCCCCCCCCCCCC</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
        </tr>
        <tr>
            <td>DDDDDDDDDDDDDDDD</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
        </tr>
        <tr>
            <td>EEEEEEEEEEEEEEE</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
        </tr>
        <tr>
            <td>FFFFFFFFFFFFFFFFFF</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
        </tr>
        <tr>
            <td>GGGGGGGGGGGGGGGGGGG</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>HHHHHHHHHHHHH Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
        </tr>
        <tr>
            <td>IIIIIIIIIIIIII Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>JJJJJJJJJJJJJJJ Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
        </tr>
        <tr>
            <td>KKKKKKKKKKKKKKKKK Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
        </tr>
        <tr>
            <td>LLLLLLLLLLLLLLL Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
        </tr>
        <tr>
            <td>MMMMMMMMMMMMMMM Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>NNNNNNNNNNNNNNNN Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>OOOOOOOOOOOOO Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>PPPPPPPPPPPPP Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>QQQQQQQQQQQQ Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>RRRRRRRRRRRR Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>SSSSSSSSSSSSSSSS Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>TTTTTTTTTTTTTTTT Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>UUUUUUUUUU Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
 
$('#example').dataTable({
          "bPaginate": true,
          "bLengthChange": true,
          "bFilter": true,
          "bSort": true,
          "bInfo": true,
          "bAutoWidth": true
        });


} );


</script>
</body>
</html>
Share:
Fore more, continue here...

Tuesday, May 05, 2015

How to load JavaScript file async in Magento

, , No comments

Problem:

By async loading JavaScript it will boost up your site, so how to load JavaScript file async in Magento.  In Magento there are two methods to load JavaScript .
1- By addItem
2-By addJs

Solution:

By using async option in <params>async</params> script tag you can load it.

Example:

Open your local.xml file it will be in the "app\design\frontend\default\YOUR-THEME-NAME\layout" folder.

1- By addItem
<action method="addItem">
    <type>skin_js</type>
    <name>js/jquery.mousewheel.min.js</name>
   <params>async</params>
</action>


2-By addJs
<action method="addJs">
     <script>scriptaculous/effects.js</script>
     <params>async</params>
</action>




Share:
Fore more, continue here...

Sunday, April 19, 2015

jquery ui dialog box show previous page before show new page's contents

, , No comments

Problem:

If you used jquery ui dialog box to show any dynamic page's contents then I am sure you have faced this problem. when you click first time it will work fine but the second time on click it will show previous page's contents and after  delay of 2 to 3 seconds it will show the contents of the url which you have supplied. this is the bug in jquery ui dialog box.
Consider below code:

<link rel="stylesheet" type="text/css" media="all" href="jquery-ui.css">

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<a href="#" onclick="show_full(1);>View</a>

<script>
function show_full(q_id) {
    var url="show_q_a.php?serial="+new Date().getTime()+"&q_id="+q_id;                   
    $( "#dialog" ).dialog( {
                                autoOpen: false,
                                modal: true,
                                height: 550,
                                width:1000,
                                title: "Question and Answer"
    });
    $("#dialog").load(url);
    $( "#dialog" ).dialog( "open" );
</script>

Solution:

Use <div> and <iframe > tag to prevent the show previous  page problem. see below correct code as a example.

Example:

function show_full(q_id) {
    var url="show_q_a.php?serial="+new Date().getTime()+"&q_id="+q_id;   
    var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + url+ '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 550,
                   width: 1231,
                   title: "Question and Answer"
               });
    $dialog.dialog('open');
}
Share:
Fore more, continue here...

Friday, April 17, 2015

jquery ui datepicker automatically delete text from input field

, , , No comments

Problem:

Did you worked with jquery ui date picker? when assigned a default value to text filed, jquery ui datepicker will automatically delete text from that textbox field. So how to stop it?

Solution:

It seems the bug in jquery ui datepicker which is automatically delete text from input field. to overcome this problem you need to write 22 lines of code as example below:

Example:

// assume that the $edit_diesel_date is already filled with date value.
// write this code very bootom of your page.
function dook() {  $("#diesel_date").val("<?php echo $edit_diesel_date;?>");     }
setTimeout("dook();", 500);
Share:
Fore more, continue here...

Wednesday, March 25, 2015

Email Blaster

, , , , , , , , , , , , , , , , No comments
Email Blaster
*Features
- Send unlimited emails.
- Send test email, so you can see your email format and looks.
- Show real time progress in counting sent emails.
- Show progress in percentage(%)
- Send email both format Text and HTML format.
- Alternate Solution of Cron Job(Less feature).
- Alternate Solution of SQL Agent Job(Less feature).
- Solution of Script Timeout.






















































Share:
Fore more, continue here...

Tuesday, March 17, 2015

Lazy load image

, , No comments
If your site is loading slow then then main causes could be heavy images. So if you remove those images then your site load fast. but if those images are the main features of your product or web site then you will not remove those images. So what will you do?
Load those images one by one on demand then it will make difference when loading site.
So the solution is lazy load image will help you to load your site fast.

To implement lazy load image you need to download jquery.js and jquery.lazy.js from jquery site

I have made three methods to load image lazy, Use one method from below 3 methods:
// Method 1
    jQuery(document).ready(    function() { jQuery("img.lazy").lazy(    {
                                                                    effect: "fadeIn",
                                                                    effectTime: 1500 ,
                                                                    enableThrottle: true,
                                                                    throttle: 250
                                                                    }
                                                                );
                                       }
                          );

// Method 2
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });

//Method 3
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });


 Use in HTML as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript" src="jquery.lazy.js"></script>
  <script>
    jQuery(document).ready(    function() { jQuery("img.lazy").lazy(    {
                                                                    effect: "fadeIn",
                                                                    effectTime: 1500 ,
                                                                    enableThrottle: true,
                                                                    throttle: 250
                                                                    }
                                                                );
                                       }
                          );
    // alternative 1
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
    // alternative 2
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
  </script>
</head>
<body>
<img class="lazy" data-src="1.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="2.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="3.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="4.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="5.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /><img class="lazy" data-src="23.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="24.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="25.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />

...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....


<img class="lazy" data-src="26.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="27.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="28.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="29.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="30.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="31.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="32.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /></body>
</html>
Share:
Fore more, continue here...

Friday, March 13, 2015

Load javascript file dynamic

, No comments
How to Load javascript file dynamic by button click.

1) First create a javascript file "my_script.js" with below contents:

"my_script.js"
function ss(){
      alert("aa");  
}

2) Create a test.html file with below contents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function my_dynamic_js(js_file_name) {
var head = document.getElementsByTagName("head")[0];
var sscript = document.createElement("script");
sscript.type = "text/javascript";
sscript.src = js_file_name;
head.appendChild(sscript);
}
</script>
</head>
<body>
<input type="button" value="load" onClick="my_dynamic_js('my_script.js')">
<input type="button" value="show" onClick="ss()">
</body>
</html>

3) now open test.html file and click on "load" button then after click on "show" button
Share:
Fore more, continue here...

bottom to top scroll in html

No comments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#back-to-top {
     position: fixed;
     bottom: 30px;
     top: 350px;
}
#back-to-top img{
    cursor:pointer;
}
</style>
<script language="javascript" src="jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
<h1>Back To Top</h1>
<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p><p>fsdfsdfsdf</p>
<div style="height:1000px"></div>
<span id="back-to-top"><img id="bus" src='bus.gif'/></span>
</body>
<script type="text/javascript">
        $(document).ready(function () {
            $("#back-to-top").hide();
            $(window).scroll(function () {
                if ($(window).scrollTop() > 200) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
              $('#back-to-top img').click(function () { 
               var body = $("body, html");
               body.animate({scrollTop :0}, '1500',function(){ });
            });
        });
    </script>
</html>
Share:
Fore more, continue here...

jQuery Up Button

No comments
jQuery Up Button
<!-- Load jQuery -->
      <script type="text/javascript" src="jquery-1.6.3.min.js"></script>
<!-- jQuery Up Button -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){$("#back-top").hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>2000){
 $('#back-top').fadeIn();}else{$('#back-top').fadeOut();}});$('#back-top a').click(function(){$('body,html').animate({scrollTop:0},800);return false;});});});
//]]></script>

<p id="back-top" style="display: block; border-radius: 15px 15px 15px 15px;
    display: block;
    height: 108px;
    margin-bottom: 7px;
    transition: all 1s ease 0s;
    width: 108px;"><a href="#top"><span></span> Back to top </a>
          
         </p>
       
         <p>fhjdsfhdsfjdsfhjdsfhdsfdsfds</p>
         <p>fhjdsfhdsfjdsfhjdsfhdsfdsfds</p>
         <p>fhjdsfhdsfjdsfhjdsfhdsfdsfds</p>
         <p>fhjdsfhdsfjdsfhjdsfhdsfdsfds</p>
         <p>fhjdsfhdsfjdsfhjdsfhdsfdsfds</p>
Share:
Fore more, continue here...

Google transliteration english to hindi

No comments
Google transliteration English to Hindi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
            packages: "transliteration"
          });
function onLoad() {
    var options = {
        sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
    };
    // Create an instance on TransliterationControl with the required options.
    var control =new google.elements.transliteration.TransliterationControl(options);
    // Enable transliteration in the textbox with id 'transliterateTextarea'.
        control.makeTransliteratable(['firstName']);
        control.makeTransliteratable(['lastName']);
      }
      google.setOnLoadCallback(onLoad);
      </script>
</head>
<body>
<input type="text" autocomplete="OFF" class="tb4" id="firstName" name="firstName">
<input type="text" autocomplete="OFF" class="tb4" id="lastName" name="lastName">
</body>
</html>
Share:
Fore more, continue here...

Latitude Longitude in JavaScript by city

, No comments
How to find Latitude and Longitude in JavaScript by city name?
You can easily implement in any framework like Codeigniter, Laravel, CakePHP or any other Framework.

Use below code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function getLatLong() {
    var geocoder = new google.maps.Geocoder();
    var address = "New Delhi";//document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       latitude = results[0].geometry.location.lat();
       longitude = results[0].geometry.location.lng();
       //alert(results[0].geometry.location.lat());
       //alert(results[0].geometry.location.lng());
       $("#locInfo").html("latitude="+latitude+" longitude="+longitude);
      }  else {
      }
    });
}
getLatLong();
</script>
<div id="locInfo" ></div>
Share:
Fore more, continue here...

Gauge chart in Google Chart

, , , No comments
How to implement Google Gauge chart. The most important things is that how to change it's needle alternate with some interval. I have made the code that will change Gauge Google Chart's needle alternate interval.


Gauge chart in Google Chart











EXAMPLE - 1
--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
How to use Gauge chart and how to change needle frequently interval.
if this code is now show the chart then remove above two lines of <!DOCTYPE tag and <html tag and use listed below tags:
1- <html>  2- <head>
-->
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
    var gauge;
    var gaugeData;
    var gaugeOptions;
    function drawGauge() {
      gaugeData = google.visualization.arrayToDataTable([['Engine', 'Torpedo'], [120, 80]]);
      gauge = new google.visualization.Gauge(document.getElementById('gauge'));
      gaugeOptions = {
          min: 0,
          max: 280,
          yellowFrom: 200,
          yellowTo: 250,
          redFrom: 250,
          redTo: 280,
          minorTicks: 5
      };
      gauge.draw(gaugeData, gaugeOptions);
    }
      function changeTemp(dir) {
        //gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
      //gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
      gaugeData.setValue(0, 0, Math.floor((Math.random()*100)+1));
      gaugeData.setValue(0, 1, Math.floor((Math.random()*100)+1));
      gauge.draw(gaugeData, gaugeOptions);
    }
      setInterval("changeTemp(1);",1000);
    google.setOnLoadCallback(drawGauge);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="gauge" style="width: 300px; height: 300px;"></div>
  </body>

</html>



EXAMPLE - 2

--------------------
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
    
      function drawChart() {
      setInterval("docharts();",4000);
      }

 function docharts(){
var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', Math.floor((Math.random()*100)+1) ],
          ['CPU', Math.floor((Math.random()*100)+1) ],
          ['Network', Math.floor((Math.random()*100)+1)]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5,
 animation:{
        duration: 5000
      }
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
 }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>

</html>
Share:
Fore more, continue here...

Php json and jquery

, , , No comments
How to use PHP, JSON and JQUERY

It is very simple to use PHP, JSON and JQUERY. for this you needed to create two files.
One file is "index.html", second file is "util.php" and this file the class file "DBClient.php" that will responsible for mysql database connection and return result according the sql query.
index.html file call the util.php using jquery ajax metod. and util.php is calling the DBClient.php and create it's object and return the result. the result will parse in index.html and parse it.




index.html

<input type="button" class="button" value="get value" id="btn1" />
<script language="javascript" type="text/javascript">
$("#btn1").click(function() {
    $.ajax({
    type: 'POST',
    url: 'util.php',
    data: { para1: 'city' },
    dataType: 'json',
    success: function (data) {   
        $.each(data.class_info, function(idx, obj) {
            alert(obj.city_name+"===="+obj.city_id);
        });
    }
});  
});
</script>

// you can also use below code,but then you will use different jquery code as below:
 //print  json_encode($rows);
// $.each(data, function(idx, obj) {
//           alert(obj.city_name+"===="+obj.city_id);
//        });util.php

<?php
include_once("DBClient.php");

if(isset($_POST['para1'])) {
$num_rows =0;
$db=new DBClient();
// the "city" table holding the columns "city_id" and "city_name"
$rs_qlist=$db->exeQueryi("select *from city");
$rows = array();
while($r = mysqli_fetch_assoc($rs_qlist)) {
    $rows[] = $r;
}
print ' { "class_info" : ' . json_encode($rows) . ' } ';
}
?>

// you can also use below code,but then you will use different jquery code as below:
 //print  json_encode($rows);
// $.each(data, function(idx, obj) {
//           alert(obj.city_name+"===="+obj.city_id);
//        });


DBClient.php
<?php
//error_reporting(E_ALL ^ E_DEPRECATED);
class DBClient {
var $host,$db,$user,$pass;
var $mysqli,$isDBConnect;
function __construct() {
    $this->host = "localhost";
    $this->db = "mydb";
    $this->user = "root";
    $this->pass = "pass";
    try {
          $this->mysqli = new mysqli($this->host, $this->user, $this->pass,$this->db );
        if ($this->mysqli->connect_error) {
            die('Error : ('. $this->mysqli->connect_errno .') '. $this->mysqli->connect_error);
        }
    } catch(Exception $ee) {
        $this->link=false;
           $this->isDBConnect=false;
    }
}

public function exeQueryi($query) {
    try {
        $result = $this->mysqli->query($query);
        return $result;
    } catch(Exception $ee) {
        return (FALSE);
    }
}

public function autocommit_false() {
    $this->mysqli->autocommit(FALSE);  
}

public function commit() {
    $this->mysqli->commit();  
}

public function rollback() {
    $this->mysqli->rollback();
}
public function close() {
    $this->mysqli->close();
}
}
?>
Share:
Fore more, continue here...

Thursday, March 12, 2015

reCAPTCHA

, , , No comments
Google has improvement it's captcha and introduced new reCAPTCHA


reCAPTCHA 















Follow below steps to implement reCAPTCHA:

1- Sign up google reCAPTCHA site:
http://www.google.com/recaptcha/intro/index.html

2- Register your site domain. after thar it will give you "site key" and "secret key"

ON CLIENT SITE:

1- Paste this line in your web page.
<script src='https://www.google.com/recaptcha/api.js'></script>

2- Paste the <div> tag as same in reCaptcha site:
<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div> 

ON SERVER SITE:

1-  Send three variable as POST method to url  
https://www.google.com/recaptcha/api/siteverify

Post variable are: secret, response, remoteip
where secret is the your Secret Key
response is recaptcha
remoteip is your remote ip address

//CHECK reCAPTCHA in PHP code
$g_r_r=$POST['g-recaptcha-response'];
if(!empty($g_r_r) && strlen($g_r_r)>0) { 
  $gurl="https://www.google.com/recaptcha/api/siteverify";
  $scrt='YOUR-SECRET KEY';
  $my_ip=$_SERVER['REMOTE_ADDR'];
  $url=$gurl."?secret=".$scrt."&response=".$g_r_r."&remoteip=".$my_ip;
  
  $c = curl_init();
  curl_setopt($c, CURLOPT_URL, $url);
  curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($c, CURLOPT_TIMEOUT, 30);
  curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16");
  $c_data = curl_exec($c);
  curl_close($c);
  $res= json_decode($c_data , true);
  if($res['success']>=1) {
    //IMPLEMENT HERE LOGIN LOGIC OR ANY OTHER LOGIC
  }
}
Share:
Fore more, continue here...

Wednesday, March 11, 2015

HOW TO REMOVE BLOGGER WORD IN BLOG

, , , No comments

Problem:

If you have a blog in blogger. then you can see "blogger" word at the bottom of page or any where in the blog. if you don't need this then how can you remove this?

Solution:

You just need copy and past listed below code at the end of blog.

Example:

<script type='text/javascript'>
function r_p() {
var r_place_s=&quot;Blogger&quot;;
var r_place_t=&quot;Galaxy Code&quot;;
var Attribution1=document.getElementById(&quot;Attribution1&quot;);
var Attribution1_html=Attribution1.innerHTML;
var regex = new RegExp( &#39;(&#39; + r_place_s + &#39;)&#39;, &#39;gi&#39; );
Attribution1.innerHTML=Attribution1_html.replace( regex, r_place_t );
}
Share:
Fore more, continue here...

Thursday, January 22, 2015

argument replace with string in javascript function dynamic

, No comments

Problem:

Some time you want to generate dynamic button or any other control which have a click event or any other event. in that event you are replacing that's function arguments with a string value and integer value. The string value which you want to replace must be covered with double quotes "...".
See the Listed below the example:

var tr='<input type="button" value="View" onclick="sh_co(snm ,sno);" />';
you want to see the above statement as below at runtime:
<input type="button" value="View" onclick="sh_co("cpu" ,1234);"/>

Here you can notice that snm replaced with "cpu" string and sno replace as a integer 1234;
when you try to replace those string double quotes value with replace function then you will get un expected result.

So how to overcome this problem?

Solution:

To solve this problem you will use code of double quotes (") in two types. I have described this in below two examples.

The code of double quotes is &quot;

Example:



Example- 1
var tr='<input type="button" value="View" onclick="sh_co(&quot;snm&quot; ,sno);" />';
tr=tr.replace(/snm/g,"cpu");
tr=tr.replace(/sno/g,1234);

Now you can get the result as below at runtime:
<input type="button" value="View" onclick="sh_co("cpu" ,1234);"/>


Example- 2
var tr='<input type="button" value="View" onclick="sh_co(snm,sno);" />';
tr=tr.replace(/snm/g,"&quot;cpu&quot;");
tr=tr.replace(/sno/g,1234);

Now you can get the result as below at runtime:
<input type="button" value="View" onclick="sh_co("cpu" ,1234);"/>


 

Share:
Fore more, continue here...

Ads Inside Post

Powered by Blogger.

Archive