.

.
Designing
Showing posts with label Designing. Show all posts
Showing posts with label Designing. Show all posts
How to Create Random Numbers & Characters

How to Create Random Numbers & Characters

03:03 Add Comment
The function which generates the random string can be called from any event handler - the example below uses a button.

 
<script language="javascript" type="text/javascript">
function randomString() {
 var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
 var string_length = 8;
 var randomstring = '';
 for (var i=0; i<string_length; i++) {
  var rnum = Math.floor(Math.random() * chars.length);
  randomstring += chars.substring(rnum,rnum+1);
 }
 document.randform.randomfield.value = randomstring;
}
</script>



Variables to set:


    

  1. chars - The random string will be created from these characters.
    2. 

  2. string_length - The length of the random string.
    3. 
















Step 2



Use the following code for your text field and button:


<form name="randform">
<input type="button" value="Create Random String" onClick="randomString();">&nbsp;
<input type="text" name="randomfield" value="">
</form>
How To pass more than two variable in ajax

How To pass more than two variable in ajax

05:25 Add Comment
function getdiscountvalue(str)
{

var xmlhttp;
var cost =  document.getElementById("cost").value;
var url2 ='ajaxoffer.php?id='+str+'&cost='+cost;
//alert(url2);
if (str.length==0)
  {
  document.getElementById("disvalue").value="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("disvalue").value=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url2,true);
xmlhttp.send();
}

Find Geolocation on Google Map using Javascript

01:26 Add Comment
find geolocation using javascript. in this tutorial you can see your location on google map using geolocation in javascript.
Just check out below code:

GeolocationwithGoogleMap.html
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  }

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

How to add multiple recaptcha on same page

00:57 Add Comment
When you create any website. You add lots of forms such as registration, login, contact us etc.
But you got unwanted data through this forms. This is known as spam.

CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content.

There are many types of captcha. Google is also providing a captcha named Recaptcha. This is one of the best captcha now days.

It's free and easily customization. You can get api and documentfrom https://developers.google.com/recaptcha/ .  Here i am not providing any tutorial for this. I am assuming that you have already read above link tutorial.

How to add multiple recaptcha on same page - 1

How to add multiple recaptcha on same page - 2

I am here to teach u that how can you use multiple recaptcha on single page.
In general, there is no way to add multiple recaptcha. You can do this by some javascript tricks.

Follow these steps:

Step 1:
Generate Api for recaptcha from https://developers.google.com/recaptcha.
Step 2:
Add code before </head>

<script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins.min.js" charset="utf-8"></script>

 <script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins-adds.min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

<script type="text/javascript">
  var recapexist = false;$(document).ready(function() {  
// Create our reCaptcha as needed 

$('#contactform').find('*').focus(function(){  

if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#myrecap').animate({'height':'130px'},'fast'); 
} 
else if(recapexist == 'rate'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#rate-response').fadeOut('fast',function(){$(this).html("");}); $('#myraterecap').animate({'height':'1px'},'fast');  
$('#myrecap').animate({'height':'130px'},'fast'); } }); 


$('#rateform').find('*').focus(function(){  
if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#myraterecap').animate({'height':'130px'},'fast'); } 
else if(recapexist == 'contact'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :) Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#contact-response').fadeOut('fast',function(){$(this).html("");}); $('#myrecap').animate({'height':'1px'},'fast');  
$('#myraterecap').animate({'height':'130px'},'fast'); } }); });

</script>
Step 3:

Add following code where you want to add form

<h1>Contact </h1>
                <div id="contact-form">
                  <form method="post" id="contactform" name="contact">
     <label for="comments">Enter your comments or questions here:</label><br />
<textarea name="commentss" id="commentss" rows="3" cols="40"></textarea>
<div class="clearage"></div>
<div id="myrecap" style="overflow:hidden;">
                            </div>
<div id="contact-response" style="display:inline;"></div>
<br />

                         
<input type="submit" name="submit" value="Submit" />
</form>
                    </div>

<h1>Rate</h1>

<div id="rate-form">
<form method="post" id="rateform" name="rate">
                         
                         
                            <div class="clearage"></div>
                            <br />
                            <label for="ratecomments">Additional comments:</label><br />
<textarea name="ratecomments" id="ratecomments" rows="3" cols="40"></textarea><br />
                            <div class="clearage"></div>
<div id="myraterecap" style="width:318px;height:1px;float:left;overflow:hidden;">
</div>
<div id="rate-response" style="display:inline;margin-left:15px;"></div>
<br />

<div class="submit"><input type="submit" name="submit" value="Submit" /></div>
</form>
                     
                    </div>

Step 4:

That's it. Run this program. You will see two forms such as contact and rate. When you fill contact form, a recaptcha will appear under contact form. When you try to fill rate form, a recaptcha appear under rate form.
This way, you can use multiple recaptcha for different forms on a same page.
                  

Facebook scrooling and loading pagination

10:24 Add Comment



ADD THIS SCRIPT OR CS ORJS FILE AND AJAX JQUERY FILE
<link rel="stylesheet" type="text/css" href="<?php JURI::root()?>css/fb-pagination.css" />


fb-pagination.css
  copy & paste this css & include it


.loading-bar {



 padding: 10px 20px;



 display: block;



 text-align: center;



 box-shadow: inset 0px -45px 30px -40px rgba(0, 0, 0, 0.05);



 border-radius: 5px;



 margin: 20px 0;



 font-size: 2em;



 font-family: "museo-sans", sans-serif;



 border: 1px solid #ddd;



 margin-right: 1px;



 font-weight: bold;



 cursor: pointer;



 position: relative;



}








.loading-bar:hover {



 box-shadow: inset 0px 45px 30px -40px rgba(0, 0, 0, 0.05);



}


















#travel {



 padding: 10px;



 background: rgba(0,0,0,0.6);



 border-bottom: 2px solid rgba(0,0,0,0.2);



 font-variant: normal;



 text-decoration: none;



}








#travel a {



 font-family: 'Georgia', serif;



 text-decoration: none;



 border-bottom: 1px solid #f9f9f9;



 color: #f9f9f9;



 font-size: 1.5em;



}


AND ADD THIS SCRIPT & copy paste this code in js file





<script>



(function($) {








 $.fn.scrollPagination = function(options) {



  



  var settings = {



   nop     : 10, // The number of posts per scroll to be loaded



   offset  : 0, // Initial offset, begins at 0 in this case



   error   : 'No More Memories!', // When the user reaches the end this is the message that is



                               // displayed. You can change this if you want.



   delay   : 500, // When you scroll down the posts will load after a delayed amount of time.



                  // This is mainly for usability concerns. You can alter this as you see fit



   scroll  : true // The main bit, if set to false posts will not load as the user scrolls.



                  // but will still load if the user clicks.



  }



  



  // Extend the options so they work with the plugin



  if(options) {



   $.extend(settings, options);



  }



  



  // For each so that we keep chainability.



  return this.each(function() {  



   



   // Some variables



   $this = $(this);



   $settings = settings;



   var offset = $settings.offset;



   var busy = false; // Checks if the scroll action is happening



                     // so we don't run it multiple times



   



   // Custom messages based on settings



   if($settings.scroll == true) $initmessage = 'Scroll for more or click here';



   else $initmessage = 'Click for more';



   



   // Append custom messages and extra UI



   $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');



   



   function getData() {



    



    // Post data to ajax.php(ajax or file name where data get)



    $.post('<?php JURI::root();?>index.php?option=com_listloved&task=ajaxpagination.pagination&lid=<?php echo $_REQUEST['lid'];?>&year=<?php echo $_REQUEST['year'];?>', {



      



     action        : 'scrollpagination',



        number        : $settings.nop,



        offset        : offset,



       



    }, function(data) {



      



     // Change loading bar content (it may have been altered)



     $this.find('.loading-bar').html($initmessage);



      



     // If there is no data returned, there are no more posts to be shown. Show error



     if(data == "") {



      $this.find('.loading-bar').html($settings.error); 



     }



     else {



      



      // Offset increases



         offset = offset+$settings.nop;



        



      // Append the data to the content div



         $this.find('.content').append(data);



      



      // No longer busy! 



      busy = false;



     } 



      



    });



     



   } 



   



   getData(); // Run function initially



   



   // If scrolling is enabled



   if($settings.scroll == true) {



    // .. and the user is scrolling



    $(window).scroll(function() {



     



     // Check the user is at the bottom of the element



     if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {



      



      // Now we are working, so busy is true



      busy = true;



      



      // Tell the user we're loading posts



      $this.find('.loading-bar').html('Loading Memories');



      



      // Run the function to fetch the data inside a delay



      // This is useful if you have content in a footer you



      // want the user to see.



      setTimeout(function() {



       



       getData();



       



      }, $settings.delay);



       



     } 



    });



   }



   



   // Also content can be loaded by clicking the loading bar/



   $this.find('.loading-bar').click(function() {



   



    if(busy == false) {



     busy = true;



     getData();



    }



   



   });



   



  });



 }








})(jQuery);








</script>

ADD THIS SCRIPT IN PHP FILEWHERE USE


<script>








$(document).ready(function() {








 $('#content').scrollPagination({








  nop     : 10, // The number of posts per scroll to be loaded



  offset  : 0, // Initial offset, begins at 0 in this case



  error   : 'No More Memories!', // When the user reaches the end this is the message that is



                              // displayed. You can change this if you want.



  delay   : 500, // When you scroll down the posts will load after a delayed amount of time.



                 // This is mainly for usability concerns. You can alter this as you see fit



  scroll  : true // The main bit, if set to false posts will not load as the user scrolls.



                 // but will still load if the user clicks.



  



 });



 



});








</script>
// this id where data or rows fetch or show


<div id="content">



 



 








</div>


NOW ajaxpagination.php or which file where using qury or fetch data
it is in joomla but using this way
this is using function but we can use any way joomla


public function pagination()



 {



  



  $app = JFactory::getApplication();



  $model = $this->getModel('listloved');



   $offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();// it comes by scrolling by default



   $postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();;// it comes by scrolling by default



  



  








  $user = JFactory::getUser();



  $loggeduserid=$user->id;



  $lid = base64_decode($_REQUEST['lid']);



  $lovedone=$model->getsingleLovedone($lid);



  $row = $lovedone[0];



  $memoriesdetails=$model->getmemories($lid,$postnumbers,$offset);



  //echo $memoriesdetails;



  //$rows = $model->getCemetryByOthers($arr);



  //print_r($rows);



        // Now update the loaded data to the database via a function in the model



  //$num = count($rows);



  foreach( $memoriesdetails as $memory){?>



  <div class="panel">



<div class="img"><img src="<?php echo JURI::root()?>images/user_photos/<?php echo $memory->image;?>" width="40" height="40" alt="" /></div>








<?php if($memory->userid == $loggeduserid)



{



?>








<a href="<?php echo JURI::base().'index.php?option=com_listloved&layout=flowerwall&lid='.base64_encode($memory->lid).'&year='.$memory->year.'&memid='.$memory->mem_id;?>"><img src="images/delete.png" alt="" border="0" /></a>



<?php }?>



<!--<a href="#"><img src="images/delete.png" alt="" border="0" /></a>-->



<div class="left">



<a href="<?php echo JURI::root();?>index.php?option=com_listloved&layout=senderinfo&id=<?php echo base64_encode($memory->userid);?>" target="_blank"><?php echo $memory->name;?></a> Added Memory To <a href="<?php echo JURI::root();?>index.php?option=com_listloved&layout=lovedone&lid=<?php echo base64_encode($row->lid);?>" target="_blank""><?php echo $row->f_name.'&nbsp;&nbsp;'.$row->l_name;?></a></div>








<div class="big">



<p><?php echo $memory->memories;?></p>



<?php if($memory->mem_image){ ?><img src="<?php echo JURI::base();?>images/memory/<?php echo $memory->mem_image;?>" alt="" width="498"  />



<?php



}



?>



</div>























</div>



<?php }



   $app->close();








  return true;



  



 



  



  }




Now where data comes from which model or by function model.php or query



public function getmemories($lid,$postnumbers,$offset)



{



 $db = JFactory::getDBO();



 $query = $db->getQuery(true);



 



 $query="SELECT * FROM #__memories as a INNER JOIN #__users as b ON a.userid = b.id WHERE a.lid = '".$lid."'  ORDER BY a.mem_id DESC LIMIT ".$postnumbers." OFFSET ".$offset;








 



 



 //return $query;



 /*$query->select('*');



     $query ->from($db->quoteName('#__memories', 'a'));



     $query ->join('INNER', $db->quoteName('#__users', 'b') . ' ON (' . $db->quoteName('a.userid') . ' = ' . $db->quoteName('b.id') . ')');



     $query ->where($db->quoteName('a.lid') ." = ".$db->quote($lid));



     $query->order($db->quoteName('a.mem_id') . ' DESC');



  $query->setLimit($postnumbers,$offset);*/







  $db->setQuery($query);



 $rows = $db->loadObjectList();



 return $rows;



}





Subscribe to: Posts (Atom)