Create simple tooltip html css

Preview

HTML

<span class="tooltipans" data-tooltip='All your leads will be saved to your Customers tab with a "My Sticky Elements" tag so you can easily find them'>?</span>

CSS

<style>
.tooltipans{
    position: relative;
    background: rgba(0,0,0,0.7);
    padding: 2px 7px;
    border-radius: 100%;
    font-size: 12px;
    cursor: help;
    color: #FFF;
}
.tooltipans::before, .tooltipans::after{
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: allease0.3s;
}
.tooltipans::before{
    content: "";
    border-width: 10px 8px 08px;
    border-style: solid;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    top: -10px;
    margin-left: -8px;
}
.tooltipans::after{
    content: attr(data-tooltip);
    background: rgba(0,0,0,0.7);
    top: -10px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #fff;
    padding: 14px;
}
.tooltipans:hover::before, .tooltipans:hover::after{
    opacity: 1;
}
</style>

Create simple popup using HTML CSS

HTML

<div class="main-chaty-popup-bg"></div>
<div class="main-chaty-popup">
      <div class="main-chaty-box">
              <h4>Chaty is currently off</h4>
              <div class="popup-content">
                       <div class="popup-content-wrapper"> Chaty is currently turned off, would you like to save and show it on your site? </div>
              </div>
              <div class="popup-content-footer">
                      <button type="button" class="btn btn-primary">Yes, Show it on my site</button>
                      <button type="button" class="btn btn-default">Just save and keep it off</button>
              </div>
              <div class="modul-close-btn">
                       <a href="#"> X </a>
              </div>
        </div>
 </div>

CSS

<style type="text/css">
    .main-chaty-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;z-index: 111;}
    .main-chaty-popup {margin:0;width: 100%;text-align: center;z-index: 1;}
    .main-chaty-box {margin: auto; padding: 0px; width: 660px; height: 170px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; bottom: 0;z-index: 999;}
    .main-chaty-box h4 {background: #FCFCFC; margin: 0;padding: 10px 0 10px 10px;font-size: 22px;color: #626262;line-height: 22px;text-align: left;border-bottom: 1px solid #e5e5e5;}
    .modul-close-btn {position: absolute; right: 18px; top: 20px; transform: translate(50%, -50%); background: linear-gradient(0deg, #333, #333), linear-gradient(153.18deg, #6371DB 7.07%, #FF89C4 90.47%); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center;justify-content: center;padding: 0; border: 0; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer;}
    .popup-content-footer{position: absolute;bottom: 0; width: 100%; padding: 10px 0;border-top: 1px solid #e5e5e5;}
    .popup-content-footer .btn-primary{background:#00C67C;border: none;padding: 10px;color: #FFF;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;margin-right: 15px;}   
    .popup-content-footer .btn-default{background:#F7F7F7;border: none;padding: 10px;color: #655d5d;cursor: pointer;box-shadow: 1px 1px 2px 1px #000;border-radius: 5px;}
   .popup-content-wrapper{margin-top: 25px;}
 </style>

Simple zoom effect with mouse hover with HTML, CSS and JS

Preview

HTML

<div class="gallery-placeholder">
    <div class="fotorama__stage__frame fotorama__active">
        <img class="fotorama__img" src="<?php echo 'https://kansagra/jaydip/jaydip.jpg'; ?>" >
    </div>
</div>
<div class="gallery-popup fixed-full-popup-model">
    <div class="gallery-zoom-img">
        <div class="gallery-main-img" style=""></div>
    </div>
</div>

CSS

<style>
.gallery-popup {
    cursor: url(../images/zoom-out.svg),pointer;
}
body .gallery-placeholder .fotorama__stage__frame.fotorama__active .fotorama__img {
    cursor: url(../images/zoom-in.svg),pointer;
}
.gallery-popup .gallery-zoom-img .gallery-main-img {
    width: 100%;
    height: 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.fixed-full-popup-model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

JS

<script type="text/javascript">
$(document).ready(function(){
$('body .gallery-placeholder').on('click', '.fotorama__stage__frame.fotorama__active .fotorama__img',function(){
var $this = $(this);
var img = $this.attr('src');
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "url(" + img + ")")
$(".gallery-popup").fadeIn();
$("body").css("overflow", "hidden");
});
$(".gallery-popup").on("mousemove",".gallery-main-img",function(e){
var pixelToMove=100;
var height=$(this).innerHeight();
var newValueY=(e.clientY / height)*pixelToMove;
$(this).css('background-position',0+' '+newValueY+'%');
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
    $(".gallery-popup").fadeOut();
    $("body").css("overflow-y", "inherit");
}
});
$(".gallery-popup .gallery-main-img").click(function(){
$(".gallery-popup").fadeOut();
$("body").css("overflow-y", "inherit");
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "");
});
});
</script> 

How to open simple HTML CSS popup

HTML

<div class="main-roomle-popup-bg"></div>
<div class="main-roomle-popup">
     <div class="main-roomle-box">
        <h4>Popup heading</h4>
        <p>You can put message here.</p>
        <div class="modul-close-btn"><a href="#"><img src="close.png"/></a></div>
     </div>
</div>

CSS

<style type="text/css">
body {margin: 0;padding: 0;width: 100%;} .main-roomle-popup-bg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000; opacity: 0.5;} .main-roomle-popup {margin:0;width: 100%;text-align: center;z-index: 1;} .main-roomle-box {margin: auto;padding: 20px;width: 360px;height: 130px;background: #000;position: absolute;top: 0;right: 0;left: 0;bottom: 0;} .main-roomle-box h4 {margin: 0;padding: 0 0 40px 0;font-size: 22px;color: #fff;line-height: 22px;} .main-roomle-box p {margin: 0;padding: 0;font-size: 18px;color: #fff;} .modul-close-btn {margin: 0;padding: 0;width: 30px;height: 30px;position: absolute;right: -10px;top: -10px;}
</style>

How to set wait/process bar/blur div using css html

Html

Add following code in you html

<div class="wait"></div>

Css

Add following code in you css

.wait{
 background: #fff url("../img/waiting.gif") no-repeat scroll center center;
 bottom: 0;
 left: 0;
 opacity: 0.5;
 position: fixed;
 right: 0;
 top: 0;
 z-index: 1;
}

Create next previous button script in jQuery, HTML

HEAD

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
    .eventslider{height: 368px;overflow: hidden;}
</style>
<script type="text/javascript">
    $jq = jQuery.noConflict();
    $jq(function () {
        var $step = 2;
        $jq('.eventslider .event_detail_container').hide();
        for (i = 0; i < $step; i++) {
            $jq('.eventslider .event_detail_container').eq(i).show();
        }
        $jq('.previousvents').hide();
        $jq('.nextevents').click(function () {
            var length = $jq('.eventslider .event_detail_container').length;
            var $this = $jq(this);
            var $nextvalue = $this.attr('rel');
            if ($nextvalue < length) {
                $jq('.eventslider .event_detail_container').hide();
                var newnext = $nextvalue;
                for (i = $nextvalue; i < Number($nextvalue) + $step; i++) {
                    $jq('.eventslider .event_detail_container').eq(i).show();
                    newnext = i;
                }
                newnext = Number(newnext) + 1
                if (newnext < length) {
                    $this.attr('rel', newnext);
                    $jq('.previousvents').attr('rel', newnext);
                    $jq('.previousvents').show();
                } else {
                    $jq('.previousvents').show();
                    $jq('.previousvents').attr('rel', newnext);
                    $this.hide();
                }
            }
        });
        $jq('.previousvents').click(function () {
            var $this = $jq(this);
            var $previousvalue = $this.attr('rel');
            $previousvalue = $previousvalue - (Number($step) + 1);
            $jq('.eventslider .event_detail_container').hide();
            var newprevious = 0;
            for (i = $previousvalue; i > Number($previousvalue) - $step; i--) {
                $jq('.eventslider .event_detail_container').eq(i).show();
                newprevious = i;
            }
            newprevious = Number(newprevious) + Number($step);
            if (newprevious <= $step) {
                $this.hide();
                $jq('.nextevents').show();
                $jq('.nextevents').attr('rel', newprevious);
            } else {
                $this.attr('rel', newprevious);
                $jq('.nextevents').attr('rel', newprevious);
                $jq('.nextevents').show();
            }
        });
    });
</script>

Body

<div>
    <a href="javascript:void(0)" class="previousvents" rel="0">Previous</a>
    <div class="eventslider">
        <div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0 top">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 3</span>
                <h2><a itemprop="url" href="/test-event-3">Test Event 3</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-06" itemprop="startDate">October 06,  2016.</span><span content="2016-10-06" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event  z</span>
                <h2><a itemprop="url" href="/test-event-z">Test Event  z</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-07" itemprop="startDate">October 07,  2016.</span><span content="2016-10-07" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Eventtt</span>
                <h2><a itemprop="url" href="/test-eventtt">Test Eventtt</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-27" itemprop="startDate">October 27,  2016.</span><span content="2016-10-27" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Evebt  sss</span>
                <h2><a itemprop="url" href="/test-evebt-sss">Test Evebt  sss</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-11-03" itemprop="startDate">November 03,  2016.</span><span content="2016-11-03" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event 22633</span>
                <h2><a itemprop="url" href="/test-event-2">test event 22633</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-08-12" itemprop="startDate">August 12,  2016.</span><span content="2016-08-12" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 4</span>
                <h2><a itemprop="url" href="/test-event-4">Test Event 4</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 9999</span>
                <h2><a itemprop="url" href="/test-event-9999">Test Event 9999</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event</span>
                <h2><a itemprop="url" href="/test-event">test event</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 00011</span>
                <h2><a itemprop="url" href="/test-event-00011">Test Event 00011</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event ZZXaaaa</span>
                <h2><a itemprop="url" href="/test-event-zzxaaaa">Test Event ZZXaaaa</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-05" itemprop="startDate">October 05,  2016.</span><span content="2016-10-05" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div>
    </div>
    <a href="javascript:void(0)" class="nextevents" rel="2">Next</a>

</div> 

How to replace string with regex in jQuery Javascript in Html with Using nodeType / node Shortcode

How to replace string with regex in jQuery Javascript in Html with Using nodeType / node

Text

[jems-countdown token="4" data-id="20136582"]

Script

jQuery(document).ready(function(){
   
    $('body *').contents().each(function() {
        if(this.nodeType == 3) {
            var u = this.nodeValue;
            var reg = /\[(jems-countdown.*)\]/g;
            $(this).replaceWith(u.replace(reg,'<div class="metcounter" $1>kanasagra</div>'));
        }
    });
  });

JQuery serialize() function with $.ajax() post for bigger HTML forms

JQuery provides a very useful function jQuery.serialize() which encodes a set of form elements as a string for submission, and is very useful while we are dealing with huge HTML forms. Basically it will combine your values of form element and then you can post it on any server side scripting page.

For example, suppose you have a very long form with many fields and you want to post it with the help of $.ajax() function, you need to add just few lines of code for jquery from with ajax, no need to add id attribute to any form elements, just have to give id to form itself as follows:

<form name="frm_details" id="frm_details" method="post">
<input type="text" name="name" value="jems">
<input type="submit" name="submit" value="submit">
</form>

The above form will have all the fields like text boxes, text areas, select boxes, radios etc. having only name attribute, just as our usual html form. Now the JQuery code will be as follows:

<script>
 $(function() {
   $("#product_details").on("submit", function(event) {
      event.preventDefault();

      $.ajax({
         url: "somefile.php",
         type: "post",
         data: $(this).serialize(),
         success: function(d) {
           alert(d);
         }
      });
    });
  });
</script>