How to solve 100vh problem in mobile

<script>

const appHeight = () => {

    const doc = document.documentElement

    doc.style.setProperty('--app-height', `${window.innerHeight}px`)

}

window.addEventListener('resize', appHeight)

appHeight()

</script>

:root {

    --app-height: 100%;

 }

 

 html,

 body {

     padding: 0;

     margin: 0;

     overflow: hidden;

     width: 100vw;

     height: 100vh;

     height: var(--app-height);

 }

How to show popup only first visit of website

 <script>

                $(document).ready(function() {

                    var isshow = localStorage.getItem('isshow');

                    if (isshow== null) {

                        localStorage.setItem('isshow', 1);

                       // Show popup here

                        $('.popup').show();

                    }

                });

            </script>

Add class scroll up and scroll down the webpage

    <script>
        jQuery(document).ready(function(e) {
var position = jQuery(window).scrollTop();

// should start at 0
var x = jQuery("#pg-217-0").offset();
     var offt = x.top;
jQuery(window).scroll(function(e) {
    var scroll = jQuery(window).scrollTop();
   

    if(scroll < position && scroll > offt) {
        jQuery('#pg-217-0').addClass('stc');
    } else{
        
         jQuery('#pg-217-0').removeClass('stc');
    }
    position = scroll;
});
});
    </script>

How to scroll text down to up with css

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var hght = $(".scroll-up p").outerHeight();
    $(".scroll-up p").css("height",hght);
 
});
</script>


  <style type="text/css">
    .scroll-up {height: 200px; overflow: hidden; position: relative; background: none; color: orange; border: 0px solid orange;}
    .scroll-up p {position: absolute; width: 100%; /*height: 500px; */margin: 0; line-height: 25px; text-align: justified; font-size: 16px;overflow: hidden;
     /* Starting position */
     /*-moz-transform:translateY(100%);
     -webkit-transform:translateY(100%);   
     transform:translateY(100%);*/
     /* Apply animation to this element */   
     -moz-animation: scroll-up 30s linear infinite;
     -webkit-animation: scroll-up 30s linear infinite;
     animation: scroll-up 30s linear infinite;
    }

/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(200px); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(200px); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   {
 -moz-transform: translateY(200px); /* Browser bug fix */
 -webkit-transform: translateY(200px); /* Browser bug fix */
 transform: translateY(200px);        
 }
 100% {
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%);
 }
}
</style>

<div class="scroll-up">
<p>
  <i>&#34;I&#39;ve enjoyed working with you during these past year. We did some great work and had some terrific outcomes. You&#39;ve been both, a great Business Partner but even more so you and your team became wonderful friends and I am sure we will see each other soon again&#34;.</i><br/>
  <span style="font-size: 14px; font-weight: bold; line-height: 14px; text-align: left">Manfred (Manny) Sablowski, Senior Vice President, Global Sales &#38; Marketing, Medovex Corp., Apr. 2019.</span><br/>
=============================<br/>
  <i>&#34;We were pleased with fast and professional handling. Good communication.</i><br/>
  <i>We will probably come back for some more business.&#34;</i><br/>
  <span style="font-size: 14px; font-weight: bold; line-height: 14px; text-align: left">Michael Cohn, MD, CEO, G.R. Dome Medical Ltd., Apr. 2019</span><br/>
=============================<br/>
  <i>&#34;Everyone at Medovex was thoroughly impressed with MediClever&#39;s work!&#34;</i><br/>
  <span style="font-size: 14px; font-weight: bold; line-height: 14px; text-align: left">Jesse Crowne, CEO, Medovex Corp., Dec. 2018</span><br/>
=============================<br/>
  <i>&#34;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</i><br/>
  <span style="font-size: 14px; font-weight: bold; line-height: 14px; text-align: left">John Doe, CEO, Medovex Corp., Dec. 2018</span><br/>
=============================<br/>
  <i>&#34;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo </i><br/>
  <span style="font-size: 14px; font-weight: bold; line-height: 14px; text-align: left">Kurtis Crowne, CEO, Medovex Corp., Dec. 2018</span><br/>
=============================<br/>
</p>
</div>

Click doesn’t work after AJAX load – jQuery

jQuery(document).on('click', '#readmore', function(e){
    e.preventDefault();
    alert("you clicked the button");
    jQuery("#bodytext").css("display", "block");
});

jQuery load first 3 elements, click “load more” to display next 5 elements

<ul id="myList">

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li> 

</ul>
<div id="loadMore">Load more</div>

<script> 

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
}); 

</script>

New JS to show or hide load more and show less

<script>

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

</script>

How to hide a DIV when the user clicks outside of it

<script>
jQuery(document).on('click', function (e) {
    if (jQuery(e.target).closest(".sle1").length === 0 && jQuery(e.target).closest(".city-filter").length === 0) {
        jQuery(".city-filter").slideUp();
        jQuery(".sle1").removeClass("active");
    }
});
</script>