Manajmnt code: jquery

How to determine the number of results in the autocomplete using jQuery

https://manajmnt-code.blogspot.com/2021/04/how-to-determine-number-of-results-in.html

This code determines the number of results of suggestions for input

 source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term);        
        response(results.slice(0, 6));
    }

6 it's its the max-number of results in suggestion list

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term);        
        response(results.slice(0, 6));
    }
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

jquery

Mami Mahfoud April 20, 2021

How to Create smart autocomplete input search from blogger api using jQuery

https://manajmnt-code.blogspot.com/2021/04/how-to-create-smart-autocomplete-input.html

In this example we will need an autocomplete code from the jquery library, and the blogger api to call article titles automatically.

This code generates suggestions based on the article titles found in a specific blog, let's me show how it's work:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <form action="/search">
 <label for="tags">Tags: </label>
  <input id="tags" type="search">
   </form>
</div>
<script id="ss"></script>
<br><br>
<script type="text/javascript">
  

  function titlePost(json) {
    var autosugg = "";
	var i;
    for (var i = 0; i < json.feed.entry.length; i++) {
           var postTitle =json.feed.entry[i].title.$t;
     autosugg += '"' + postTitle + '", ';
       }
document.getElementById("ss").innerHTML='$( function() {var availableTags = ['+autosugg+'];$( "#tags" ).autocomplete({source: function(request, response) { var results = $.ui.autocomplete.filter(availableTags, request.term); response(results.slice(0, 7)); }});} );';

  };
  
</script>
<script src="https://manajmnt-code.blogspot.com/feeds/posts/summary?max-results=999999&alt=json-in-script&callback=titlePost"></script>

Mami Mahfoud April 19, 2021

Getting height and width when resizing two divs at the same time

https://manajmnt-code.blogspot.com/2021/04/getting-height-and-width-when-resizing.html

In this code I will be share with you how to get the height and width when resizing two div at the same time

 
<!doctype html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
  <style>
   html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}


/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
 
}

#panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
    width: 50%;
 
  white-space: nowrap;
 background-color:red;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;  
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ffd400;
  min-height: 200px;
  cursor: col-resize;  
}

#panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  
  background: #3ff3;
}
  </style>

</head>
<body>
  <div>
  <span id="widthinfo1"></span><span style="float:right" id="widthinfo"></span>
   </div>
   <br>
 <div class="panel-container">

   <div id="panel-left"></div>
<div class="splitter" onmousemove="widthdevice()"></div>
<div id="panel-right"></div>
        </div> 
  
<script>
 $("#panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

 
</script>
<script>
function widthdevice() {
  

  var wid = document.getElementById("panel-right").offsetWidth;
  var hei = document.getElementById("panel-right").offsetHeight;
  var wid1 = document.getElementById("panel-left").offsetWidth;
  var hei1 = document.getElementById("panel-left").offsetHeight;
  
  var coor = "panel-right= <span >"+ wid + " x "+ hei +" (px)</span>";
  document.getElementById("widthinfo").innerHTML = coor;
  
   var coor1 = "panel-left= <span >"+ wid1 + " x "+ hei1 +" (px)</span>";
  document.getElementById("widthinfo1").innerHTML = coor1;
}

</script>
</body>
</html>

JavaScript jquery

Mami Mahfoud April 07, 2021

how to add Related post for blogger using slider owl carousel

https://manajmnt-code.blogspot.com/2021/04/related-post-for-blogger-using-slider.html

in your blogger template search of <div class="post-footer-line post-footer-line-1">, and put in this code bellow , if your blog ltr direction remove rtl:true, option:

       <!--related post-->
      
            <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet' type='text/css'/>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' rel='stylesheet' type='text/css'/>
<style>

  .related_post .owl-item img {
    display: block;
    width: 100%;
    height: 40%;
}
.related_post .title-recpost{
    display: flex;
position: absolute;
    left: 50%;
    top: 85%;
  font-weight:700;
  transform: translate(-50%, -50%);
    width: 100%;
    height: 30%;
   justify-content: center;
    align-items: center;
    color:white;
    transition: 0.5s;
   background: #000000c9;
    text-decoration:none;text-align: center;
}
  
.term{position:absolute; left: 4; border-radius: 3px; background:red; color:white; padding: 0 8px;}

</style>

      

  
  
  <b:if cond='data:blog.pageType == "item"'>
    <script style='display:none' type='text/javascript'>
   //<![CDATA[
  function related_post(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
         
          break;}}
      var postTitle = json.feed.entry[i].title.$t;
      var term= json.feed.category[i].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/');
        var item = '<img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a>';
            }
      else{
         var item = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('owl-carousel related_post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
    <div class='owl-carousel related_post'/>
    
  <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'/>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_post&max-results=6"' type='text/javascript'></script></b:loop>
  
  <div style='clear:both'/><!-- remove --></b:if>
  


  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
    <script type='text/javascript'>
  (function ($) {
    'use strict';
    $('.owl-carousel.related_post').owlCarousel({
      rtl:true,
        loop:true,
        margin:10,
        nav:false,
        dots:false,
      autoplay:true,
    autoplayTimeout:1000,
      autoplayHoverPause:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })

  })(jQuery); 
  </script>







      
      
      <!--related post-->

jquery Owl carousel

Mami Mahfoud April 06, 2021

How to add recent posts for blogger using Owl carousel library [ source code ]

https://manajmnt-code.blogspot.com/2021/04/recent-post-for-blogger-using-owl.html

In this example we learn how to create slideshow for recent posts in blogger, we use carousel library to do this, it's best library to make amazing slider



  
     <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet' type='text/css'>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' rel='stylesheet' type='text/css'>
<style>

  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 40%;
}
  .title-recpost{display:none}
.item:hover .title-recpost{
    display: flex;
position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
   justify-content: center;
    align-items: center;
    color:white;
    transition: 0.5s;
   background: #0000008c;
    text-decoration:none;text-align: center;
}
  
.term{position:absolute; left: 4; border-radius: 3px; background:red; color:white; padding: 0 8px;}

</style>


      <div class='owl-carousel recent-post'></div>
<script style='display:none' type='text/javascript'>
   //<![CDATA[
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
         
          break;}}
      var postTitle = json.feed.entry[i].title.$t;
      var term= json.feed.entry[i].category[0].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/');
        var item = '<div class="item"><p class="term">'+term+'</p><img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
            }
      else{
         var item = '<div class="item"><p class="term">'+term+'</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('recent-post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
 <script id='rcp' src='https://sports-themexpose.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=mycallback'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
    <script type='text/javascript'>
  (function ($) {
    'use strict';
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:false,
        dots:false,
      autoplay:true,
    autoplayTimeout:1000,
      autoplayHoverPause:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })

  })(jQuery); 
  </script>

blogger Framework_Front-End jquery Owl carousel

Mami Mahfoud April 02, 2021

How to determine the number of results in the autocomplete using jQuery

How to Create smart autocomplete input search from blogger api using jQuery

Getting height and width when resizing two divs at the same time

how to add Related post for blogger using slider owl carousel

How to add recent posts for blogger using Owl carousel library [ source code ]

Meta keywords generator tool for Blogger

How to add a quick edit button in Blogger

How-to select & copy code from codemirror editor with button

Getting height and width when resizing two divs at the same time

Create direct download link for google drive file online