PHP Coding Tips And Help: Javascript/Jquery Tips/Help

Showing posts with label Javascript/Jquery Tips/Help. Show all posts

Friday, 24 June 2016

SHOW PHP UTC DATE TIME TO USER SPECIFIC LOCAL TIME

Thursday, 21 April 2016

Google Places: Limit Autocomplete Results to Cities Only

If you ever used Google Places API, you’re probably familiar with types option,
which allows you to restrict auto-complete results in different ways.
I had a requirement to show only cities in UK.

If you want to all the cities than you can try below code.

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var options = {
language: 'en-GB',
types: ['(cities)'],
//componentRestrictions: { country: "uk" }
};
new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
.pac-icon {width: 0;background-image: none;}
</style>
</head>
<body>
<label for="searchTextField">Please insert an address:</label>
<input id="searchTextField" type="text" size="50">
</body>
</html>

Sunday, 15 November 2015

Steps To Add Google Translate Widget (Multi-lingual) (PHP WEB SITE)

1. Login in to your Gmail account.
2. Than click on open the following link "https://translate.google.com/manager/website/add";
3. Add your domain url to following "Website URL" => "What is the URL of your website?" input box.
4. Select the Google Translate widget (Plugin Settings) for your website.
5. Click the "Get Code" button.
6. Copy the generated js code (Paste this code onto your website) and place in your header file where you want to display this widget on web site.
7. save your file.

8. Refresh your page.. if you have followed all the above steps correctly than you are able to see the google translate widget.

Thanks Cheers... :)

Friday, 20 March 2015

Showing a CSS Based Loading Animation While Your Site Loads

Here is the example.

<!DOCTYPE html>
<html class="loading">
 <head>
  <meta charset="utf-8">
  <title>Loading Example</title>
  <style>
   html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
   }
   html, body { min-height: 100%; }
   html.loading {
    background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
    -webkit-transition: background-color 0;
    transition: background-color 0;
   }
   body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
   }
   html.loading body {
    opacity: 0;
    -webkit-transition: opacity 0;
    transition: opacity 0;
   }
   button {
    background: #00A3FF;
    color: white;
    padding: 0.2em 0.5em;
    font-size: 1.5em;
   }
  </style>
  <script>
   var html = document.getElementsByTagName('html')[0];
   var removeLoading = function() {
    // In a production application you would remove the loading class when your
    // application is initialized and ready to go.  Here we just artificially wait
    // 3 seconds before removing the class.
    setTimeout(function() {
     html.className = html.className.replace(/loading/, '');
    }, 3000);
   };
   removeLoading();
  </script>
 </head>
 <body>
  <!-- AVERT YER EYES.  This button is a hack to demo this.  Do not use onclick attributes. -->
  <button onclick="html.className = 'loading'; removeLoading();">Reload</button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>

  <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
 </body>
</html>

For any query contact me or see the ref.site http://tjvantoll.com/2013/04/24/showing-a-css-based-loading-animation-while-your-site-loads/

Thanks "TJ VanToll" for this nice and simple code.

Tuesday, 24 February 2015

Open multiple window on page load with JavaScript

Friday, 30 January 2015

Chain select drop down And Table Row

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title> Chain select drop down And Table Row Added By Sanjay Singh Rao</title>

$( document ).ready(function() {

$("#selectadult").val(0);

$( "#chkavl" ).click(function() {

var adcout=$("#selectadult").val();

var cdcout=$("#selectchild").val();

if($(".appendRow").length > 0){

$('#myTable tr.appendRow').remove();

}

var tblHtml = '';

var k=1;

if(adcout > 0){

for(i=0;i<adcout;i++){

tblHtml += '<tr class="appendRow"><td width="5%" height="30"> '+ k +'</td><td width="5%" height="30">Adult</td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="adultName[]" value="" id="adultName'+ k +'"></td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="adultAge[]" value="" id="adultAge'+ k +'"></td>';

tblHtml += '<td width="15%" height="30"><select name="adultGender[]"><option value="Male">Male</option><option value="Female">Female</option></select></td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="adultIdProof[]" value="" id="adultIdProof'+ k +'"></td>';

k++;

}

if(cdcout > 0){

for(i=0;i<cdcout;i++){

tblHtml += '<tr class="appendRow"><td width="5%" height="30"> '+ k +'</td><td width="5%" height="30">Child</td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="childName[]" value="" id="childName'+ k +'"></td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="childAge[]" value="" id="childAge'+ k +'"></td>';

tblHtml += '<td width="15%" height="30"><select name="childGender[]"><option value="Male">Male</option><option value="Female">Female</option></select></td>';

tblHtml += '<td width="15%" height="30"><input type="text" name="childIdProof[]" value="" id="childIdProof'+ k +'"></td>';

k++;

}

if(tblHtml.length > 0){

$('#myTable').append(tblHtml);

}

});

</script>

function setOptions(chosen) {

var selbox = document.myform.opttwo;

selbox.options.length = 0;

if (chosen == " ") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

}

if (chosen == "1") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

selbox.options[selbox.options.length] = new Option('3','3');

selbox.options[selbox.options.length] = new Option('4','4');

selbox.options[selbox.options.length] = new Option('5','5');

selbox.options[selbox.options.length] = new Option('6','6');

selbox.options[selbox.options.length] = new Option('7','7');

}

if (chosen == "2") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

selbox.options[selbox.options.length] = new Option('3','3');

selbox.options[selbox.options.length] = new Option('4','4');

selbox.options[selbox.options.length] = new Option('5','5');

selbox.options[selbox.options.length] = new Option('6','6');

}

if (chosen == "3") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

selbox.options[selbox.options.length] = new Option('3','3');

selbox.options[selbox.options.length] = new Option('4','4');

selbox.options[selbox.options.length] = new Option('5','5');

}

if (chosen == "4") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

selbox.options[selbox.options.length] = new Option('3','3');

selbox.options[selbox.options.length] = new Option('4','4');

}

if (chosen == "5") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

selbox.options[selbox.options.length] = new Option('3','3');

}

if (chosen == "6") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

selbox.options[selbox.options.length] = new Option('2','2');

}

if (chosen == "7") {

selbox.options[selbox.options.length] = new Option('Please Select Child','0');

selbox.options[selbox.options.length] = new Option('1','1');

}

</script>

.select{

font-family:tahoma;

font-size:11px;

color:#000000;

font-weight:normal;

width:215px;

}

</style>

</head>

<body>

<option value="0">Please Select Adult</option>

</select>

</td>

<option value="0" selected="selected">Please Select Child</option>

</select></td>

</tr>

</tbody></table>

<td width="15%" height="30"> Gender</td>

<td width="30%" height="30"> ID Proof Number<span>*</span></td>

</tr>

</tbody></table>

</div>

</form>

</div>

</body></html>

Monday, 11 August 2014

Window.location.href () and Window.open () methods in JavaScript

window.location.href is not a method, it's a property that will tell you the current URL location of the browser. Setting the property to something different will redirect the page.

window.open() is a method that you can pass a URL to that you want to open in a new window. For
example:
window.location.href example:

window.location.href = 'phplessonstips.blogspot.in'; //Will take you to phplessonstips blog.

window.open() example:

window.open('phplessonstips.blogspot.in'); //This will open phplessonstips.blogspot.in in a new window.

Friday, 15 November 2013

How to Add Stylesheet File to Iframe "head' tag

Wednesday, 8 May 2013

Event Based calendar with Javascript

<html>
    <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js"></script>
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css">

<script type="text/javascript" charset="utf-8">
    $(function()
            {
                $('.date-pick').datePicker()
                $('#start-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#end-date').dpSetStartDate(d.addDays(1).asString());
                        }
                    }
                );
                $('#end-date').bind(
                    'dpClosed',
                    function(e, selectedDates)
                    {
                        var d = selectedDates[0];
                        if (d) {
                            d = new Date(d);
                            $('#start-date').dpSetEndDate(d.addDays(-1).asString());
                        }
                    }
                );
            });
</script>
    </head>
    <body>
        <ol>
                        <li><label for="start-date">Start date:</label>
            <input name="start-date" id="start-date" class="date-pick" /></li>
                        <li><label for="end-date">End date:</label>
            <input name="end-date" id="end-date" class="date-pick" /></li>
        </ol>
    </body>
</html>

Thursday, 25 April 2013

Create dynamic tab menu based on display alphabatic range

/* Create dynamic tab menu based on display alphabatic range Save below code as dynamictabmanu.php and put it along with images*/

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function()
        {
             $("ul#brandstab li:first").addClass("activebox");
             $("div#divcontentbox div:first").css("display","block");
            $('ul#brandstab li a').click(function()
            {
                      $("ul#brandstab li").removeClass("activebox");
                      $(this).parent().addClass("activebox");
                $(".abi_htab_content").css("display","none");
                 var divid =   $(this).attr("rel");
                $(divid).css("display","block");
            });
        });
        </script>
        <style type="text/css">
        #divcontentbox .abi_htab_content{display:none;}
        #brandstab{height: 46px; margin: 0; padding: 0;}
        #brandstab li.activebox, #brandstab li:hover {background: none repeat scroll 0 0 #F0F0F0; bottom: -1px;    position: relative;}
        #brandstab li{border-radius: 6px 6px 0 0; cursor: pointer; float: left; list-style: none outside none; margin-right: 1px; padding: 0 10px;}
        #brandstab li a{color: #CCCCCC;   display: block;    line-height: 9px;    text-decoration: none;}
        #brandstab li.activebox a h3, #brandstab li a h3:hover {color:#000;}
        #divcontentbox { background: none repeat scroll 0 0 #F0F0F0;padding: 10px;}
        div.datablock{float:left; margin:15px;}
        </style>
<?php
$display_range = 'A-H,I-Z'; // change this as per need for example create three tab set range like this 'A-H,I-P,Q-Z'
$resexplode = explode(',',$display_range);
$mainarray = array(
                        "0"=>array("id"=>1,"title"=>"AR","img"=>"ar.jpg","w"=>100,"h"=>100),
                        "1"=>array("id"=>10,"title"=>"CR","img"=>"cr.jpg","w"=>100,"h"=>100),
                        "2"=>array("id"=>20,"title"=>"HR","img"=>"hr.jpg","w"=>100,"h"=>100),
                        "3"=>array("id"=>25,"title"=>"HK","img"=>"hk.jpg","w"=>100,"h"=>100),
                        "4"=>array("id"=>30,"title"=>"KP","img"=>"kp.jpg","w"=>100,"h"=>100),
                        "5"=>array("id"=>40,"title"=>"SR","img"=>"sr.jpg","w"=>100,"h"=>100),
                        "6"=>array("id"=>50,"title"=>"SK","img"=>"sk.jpg","w"=>100,"h"=>100),
                        "7"=>array("id"=>55,"title"=>"VJ","img"=>"vj.jpg","w"=>100,"h"=>100),
                        "8"=>array("id"=>58,"title"=>"ZQ","img"=>"zq.jpg","w"=>100,"h"=>100),
                );

    $recAH = array();
      $brandcollection = array();
      $data = array();
      for($k=0;$k<count($resexplode);$k++)
      {
          $charsetLetter = explode('-',$resexplode[$k]);
          if(count($charsetLetter) == 2)
          {
              $datastr = $charsetLetter[0]."2".$charsetLetter[1];
              $recAH = range($charsetLetter[0], $charsetLetter[1]);
              for($i=0;$i<count($mainarray);$i++)
              {
                    $brandname = trim($mainarray[$i]['title']);
                    $char = ucfirst(substr($brandname, 0,1));
                    if(in_array($char,$recAH)){
                      $mainarray[$i]['class'] = $charsetLetter[0]."2".$charsetLetter[1];
                      $data[] =   $mainarray[$i];
                    }
              }
              array_filter($data);
              $brandcollection[$k]= $data;
              unset($data);
          }
      }
        echo '<ul class="abi_htabs" id="brandstab">';
         for($k=0;$k<count($resexplode);$k++){ echo '<li><a rel="#'.$resexplode[$k].'"><h3>'.$resexplode[$k].'</h3></a></li>';}
        echo '</ul>';
         echo '<div class="abi_htab_container" id="divcontentbox">';
         for($k=0;$k<count($resexplode);$k++)
        {
            echo '<div id="'.$resexplode[$k].'" class="abi_htab_content">';
            for($i=0;$i<count($brandcollection[$k]);$i++)
            {
                echo '<div class="datablock"><div class="title">'.$brandcollection[$k][$i]['title'].'</div>';
                echo '<div class="img"><img src="'.$brandcollection[$k][$i]['img'].'" width="'.$brandcollection[$k][$i]['w'].'" height="'.$brandcollection[$k][$i]['h'].'"></div>';
                echo '</div>';
            }
            echo '<br style="clear:both;">';
            echo '</div>';
        }
         echo '</div>';
?>

Wednesday, 24 April 2013

POST FORM DATA USING AJAX PROCESS

// POST FORM DATA USING AJAX PROCESS
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#bunttonid').click(function()
        {
               var data = $('form#formid').serialize();
               $.post( 'processajaxdatafile.php', data,function(data){
                if(data == 'Y'){
                    // add code for return "Y" with success
                }
                else if(data == 'N'){
        // add code for return "N" with failled
                }
                return false;} );
              return false;
        });
    });

Regualer expression for validation form field

//Regular expression for validate eamil
var email_reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
var email = "sanjay@demo.com";
if (!email_reg.test(email))
{
alert('Invalid email.');$("#email").focus(); return false;
}else{
alert('valid email.');
}

//Regular expression for validate date filed with dd-mm-YY
var date_reg = /^\d{1,2}\-\d{1,2}\-\d{4}$/;
var date ='22-05-2013';
if (!date_reg.test(date))
{
alert('Invalid date.');$("#date").focus(); return false;
}else{
alert('valid date.');
}
//Regular expression for validate password with aplhanumeric charachter with min length 6

var re = /^(?=.*[A-Za-z])(?=.*[0-9])(?!.*[^A-Za-z0-9])(?!.*\s).{5,12}$/;
if ( !re.test(password) )
{
alert('wrong password');
}else{
error = false;
alert('correctpassword');
}

PHP Coding Tips And Help

Friday, 24 June 2016

SHOW PHP UTC DATE TIME TO USER SPECIFIC LOCAL TIME

Thursday, 21 April 2016

Google Places: Limit Autocomplete Results to Cities Only

Sunday, 15 November 2015

Steps To Add Google Translate Widget (Multi-lingual) (PHP WEB SITE)

Friday, 20 March 2015

Showing a CSS Based Loading Animation While Your Site Loads

Tuesday, 24 February 2015

Open multiple window on page load with JavaScript

Friday, 30 January 2015

Chain select drop down And Table Row

Chain select drop down And Table Row

Monday, 11 August 2014

Window.location.href () and Window.open () methods in JavaScript

Friday, 15 November 2013

How to Add Stylesheet File to Iframe "head' tag

Wednesday, 8 May 2013

Event Based calendar with Javascript

Thursday, 25 April 2013

Create dynamic tab menu based on display alphabatic range

Wednesday, 24 April 2013

POST FORM DATA USING AJAX PROCESS

Regualer expression for validation form field

List OF BANK PAN Numbers

Search This Blog