Smooth Scroll to div Sticky header

Smooth Scroll to div

    var hash = "#block-block-33";
    jQuery('html, body').animate({
        scrollTop: jQuery(hash).offset().top-300
       }, 800, function(){

         // Add hash (#) to URL when done scrolling (default click behavior)
         //window.location.hash = hash;
         var a=jQuery(hash).offset().top-190;

         //jQuery('.search-icon').text(a);

        window.scrollTo(0,a);
    });

Post image without form using ajax

<!DOCTYPE html>
<html>
   <head>
      <script src="jquery.min.js"></script>
   </head>
   <body>
      <form method="post" action="upload.php" enctype="multipart/form-data">
         <input type="file" name="fileToUpload" id="fileToUpload" >
         <p class="upload-it">Upload this</p>
         <input type="submit" name="upload" value="Go" >
      </form>
      <?php
         $target_dir = "uploads/";
         $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
         $uploadOk = 1;
         $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
         // Check if image file is a actual image or fake image
         if(isset($_POST["upload"])) {
             $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
             if($check !== false) {
                 if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
                     echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
                 } else {
                     echo "Sorry, there was an error uploading your file.";
                 }
                 echo "File is an image - " . $check["mime"] . ".";
                 $uploadOk = 1;
             } else {
                 echo "File is not an image.";
                 $uploadOk = 0;
             }
         }
         ?>
      <script>
         $(function(){
             $(document).on("click", ".upload-it", function() {
                 var file_data = $("#fileToUpload").prop("files")[0];  
                 var form_data = new FormData();                 
                 form_data.append("fileToUpload", file_data);    
                 form_data.append("upload", "upload");           
                 $.ajax({
                             url: "upload.php",
                             dataType: 'script',
                             cache: false,
                             contentType: false,
                             processData: false,
                             data: form_data,                    
                             type: 'post'
                    })
             })
         })
        
      </script>
   </body>
</html>

How to print using jquery

Simply just add print.js Library and configure as

JQuery:

    jQuery(".print-button a").on('click', function() {
                  
        jQuery(this).parent().find('.maincontainertoprint').print({

            globalStyles : true,
            mediaPrint : true,
            stylesheet : 'yourstyle.css',
            iframe : false,
            noPrintSelector : ".button, .printbtn",
            deferred: jQuery.Deferred().done(function() { console.log('Printing done', arguments); })
        });
    });


Html:

<div class="maincontainer">
    <div class="print-button">
        <a href="javascript:void(0)" class="">Print</a>
    </div>
    <div class="maincontainertoprint">
        <table>
            <tr>
                <th>S.No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Bharat</td>
                <td>bharat@gmail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ravi</td>
                <td>ravi@gmail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ajay</td>
                <td>ajay@gmail.com</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Gagan</td>
                <td>gagam@gmail.com</td>
            </tr>
        </table>
    </div>
</div>

Library

How to hide date picker on button click

How to hide date picker on button click

#ui-datepicker-div is parent div in which calendar is shown
<input type="button" id="edit-field-date-value-value-datepicker-popup-1" value="close" onclick="return dtPickerClose()" />

function dtPickerClose(){
    jQuery('#ui-datepicker-div').hide();
    jQuery("#edit-field-date-value-value-datepicker-popup-1").attr("class","");
}

this also work in drupal

Add Active position or class on menu on scroll

add Active position or class on scroll

Html :

<div class="title-list-nav">
    <ul>
        <li><a href="#test"></a></li>
        <li><a href="#test1"></a></li>
        <li><a href="#test2"></a></li>
        <li><a href="#test3"></a></li>
    </ul>
</div>

<div id="test">Hi<br><br><br><br><br><br><br></div>
<div id="test1">Hello<br><br><br><br><br><br><br></div>
<div id="test2">You<br><br><br><br><br><br><br></div>
<div id="test3">There?<br><br><br><br><br><br><br></div>


JQuery :

jQuery(window).scroll(function() {
     var cur_pos = jQuery(this).scrollTop();
    jQuery(".title-list-nav ul li").each(function(){

        var ele_top = jQuery(jQuery(this).find("a").attr("href")).offset().top-jQuery("#header").height();

        var ele_bot = jQuery(jQuery(this).find("a").attr("href")).offset().top + jQuery(jQuery(this).find("a").attr("href")).outerHeight(true)-jQuery("#header").height();
       
        if(cur_pos>=ele_top && cur_pos<=ele_bot){
            jQuery(this).addClass("active");
        }else{
            jQuery(this).removeClass("active");
        }
    });
});

jQuery Post With and Without Json Response

1.    jQuery Post Method Without json Response


var post_data = 'operation=add&name=Rahul&email=rahul@gmail.com';
jQuery.post('/admin/ajax/do.php', post_data, function(response){
    if(response.msg=="success"){
        alert("Insert Successfully");
    }else{
        alert("Error Occured");
    }
});

2.    jQuery Post Method With json Response


var post_data = 'operation=add&name=Rahul&email=rahul@gmail.com';
jQuery.post('/admin/ajax/do.php', post_data, function(response){
    if(response.msg=="success"){
        alert("Insert Successfully");
    }else{
        alert("Error Occured");
    }
},'json');

How to hide Carousel Left and Right arrow on First and last slide

Simply just add the following script

    Script

    $('#carousel-example-generic').on('slid', '', function() {
        var $this = $(this);
        $this.children('.carousel-control').show();

        if($('.carousel-inner .item:first').hasClass('active')) {
            $this.children('.left').addClass("hideElement");
            $this.children('.left.carousel-control').hide();
        } else{
            $this.children('.left').removeClass("hideElement");
            }
       
         if($('.carousel-inner .item:last').hasClass('active')) {
            $this.children('.right.carousel-control').hide();
            $this.children('.right').addClass("hideElement");
        }else{
            $this.children('.right').removeClass("hideElement");
        }
    });

   
    Add "hideElement" class on left parent element
   
    Html
       
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
         <!-- Indicators -->
         <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
            <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
            <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
         </ol>
         <!-- Wrapper for slides -->
       
         <div class="carousel-inner" role="listbox">
            <div class="item active">
               <div class="slide-content" id="slide-1">
                  <p class="slide-content-left-1">Someone liked your profile. Now it's your turn.</p>
                  <p class="right-main">Review these profiles and check which you like.</p>
                  <p class="slide-content-left-2">When you both like each other, you'll get a match notification.</p>
               </div>
            </div>
            <div class="item">
               <div class="slide-content" id="slide-2">
                  <p class="slide-2-contetnt-1">To like the user, push here on the check mark.</p>
                  <p class="slide-2-contetnt-2">Or skip the profile by pushing the X mark, to see the next profile.</p>
               </div>
            </div>
            <div class="item">
               <div class="slide-content" id="slide-3">
                  <p>It's your turn now. Like as many as you want.</p>
               </div>
            </div>
         </div>
       
         <!-- Controls -->
         <a class="left carousel-control hideElement" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="sr-only">Previous</span>
         </a>
         <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="sr-only">Next</span>
         </a>
      </div>
   
   
    Css
   
    .hideElement {display:none !important;}
             

How to show a div content in popup in facnybox

We assume that you already have added the fancybox js and css in your project

<html>

<div id="add_photo_notify_wrap">
    <div class="fancy_add_photo_notify_wrap">
        <div class="fancycontent">
            <p>This is my content sectioin.</p>
        </div>
        <div class="fancybtn">
            <a href="javascript:void(0)" class="btn add_photo_now">Add my photo now</a>
            <a href="javascript:void(0)" class="skip-it-now" onclick="$.fancybox.close();">Keep reviewing photos. I'll add my photo later.</a>
        </div>
    </div>
</div>

</html>

<script>

jQuery.fancybox({
  content: jQuery('#add_photo_notify_wrap').html(),
  modal: true,
  beforeShow: function(){
        jQuery(".fancybox-wrap").addClass('fancy_photo_notify');
    },
});

</script>

In this div id#add_photo_notify_wrap inner content will show in pop

and line jQuery(".fancybox-wrap").addClass('fancy_photo_notify'); will add class "fancy_photo_notify" to our popup

How to close Fancybox on anchor or button click

How to close Fancybox on anchor or button click

Nothing special to achieve this just siply write the fancybox close script inline with your tag just like

<a href="javascript:void(0)" onclick="$.fancybox.close();">Close</a>

or

<button onclick="$.fancybox.close();">Close</button>