Code

From IT Wiki
Jump to: navigation, search

jQuery click function

Normal event

<script>
/* Line below for WordPress on page */
(function($) {

$(document).ready(function(){
    /* .responsive-tabs is class clicked in */
    $(".responsive-tabs").click(function(){
    /* Place code to happen on click here - sample code below */
    /* Popup alert box to test click function works */
    alert("You have clicked inside area!");
    /* Resize table in tab to fix formatting issue */
    $('.priceest').resize()
    });
});

/* Line below for WordPress on page */
})( jQuery );
</script>

Dynamic event

To trigger events on elements which are dynamically inserted in DOM.

<script>
/* Demo to trigger event 2 */
(function($) {

$(document).ready(function() {
  $(".responsive-tabs").on("click", "li", function() {
    console.log($(this).text());
   alert("You have clicked inside area!");
  });
});


})( jQuery );
</script>

PHP date

Returns number and st/sd/th. Example: "2nd"

<?php return date('dS');?>

Returns month. Example: "January"

<?php return date('F');?>

Returns year. Example: "2018"

<?php return date('Y');?>

Show/Hide table columns

< !doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>

  <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
  <script>
    $(function() {
       $('#hide').click(function() {
                $('td:nth-child(3)').hide();                
       });

    $('#show').click(function() {
                $('td:nth-child(3)').show();                
       });
    $('#toggle').click(function() {
                $('td:nth-child(3)').toggle();                
       });
    });
    </script>
 </head>

 <body>
  <table class="abc">
   <tr>
  <td>Heading 1</td>
  <td>Heading 2</td>
  <td>Heading 3</td>
  <td>Heading 4</td>
   </tr>
   <tr>
  <td>Value 1</td>
  <td>Value 2</td>
  <td>Value 3</td>
  <td>Value 4</td>
   </tr>
   <tr>
  <td>Value 1</td>
  <td>Value 2</td>
  <td>Value 3</td>
  <td>Value 4</td>
   </tr>
  </table>

  <input id="hide" type="button" value="Hide 3rd Column"/> <input id="show" type="button" value="Show 3rd Column"/> <input id="toggle" type="button" value="Toggle 3rd Column"/>
 </body>
</html>