Manajmnt code: How-to

How to get iframe content and extract into textarea using JavaScript

https://manajmnt-code.blogspot.com/2021/04/how-to-get-iframe-content-and-extract.html

in this exemple, we learn how get content from iframe tag and extract source code inside textarea

 
  <p><button id="btn">run iframe</button></p>
<iframe id="iframe"></iframe>
<script type="text/javascript">
 document.getElementById("btn").addEventListener('click',
  function runcode(){
  var editor="<marquee>hello friends </marquee>"
   var doc = document.getElementById('iframe').contentWindow.document;
   doc.open();
   doc.write(editor);
   doc.close();
  });
</script> 
<p><button id="btn2">get content</button></p>
<textarea id="output" style="width:100%; height:200px"></textarea>

<script>
document.getElementById("btn2").addEventListener('click',
  function getcode(){  
   var doc1 = document.getElementById('iframe').contentWindow.document;
   var doc_content= doc1.getElementsByTagName("HTML")[0].innerHTML;
   
  document.getElementById("output").value=doc_content;
  });

</script>

How-to JavaScript

Mami Mahfoud April 28, 2021

How-to ask user to to verify or accept to remove content of div

https://manajmnt-code.blogspot.com/2021/04/how-to-ask-user-to-to-verify-or-accept.html

In this example we learn how to clear div content editable with button after ask user to verify or accept to remove content of div

 <style>
#content {
    width: 98%;
    height: 300px;
    box-shadow: 0 0 3px 0 #545454;
    padding: 5px;
    border-radius: 3px;
}
 #content:focus-visible {
    box-shadow: 0 0 5px 3px #00b0ff;
    border: 1px solid #0090a2;
    outline: 0;
}
</style>
<button  onclick="return confirm_delete('Are you sure?')">
Clear
</button>

<div id="content"  contenteditable="true">write text here and try to remove it</div>

<script type="text/javascript">
function confirm_delete(question) {
if(confirm(question)){
document.getElementById("content").innerHTML="";
}else{
    return false;  
  }

}
  </script>

Mami Mahfoud April 27, 2021

How to Cut, Copy and Paste inside div tag with buttons using JavaScript

https://manajmnt-code.blogspot.com/2021/04/how-to-cut-copy-and-paste-inside-div.html

In this code I will be share with you how to copy and cut from textarea or content editable tag ,and paste text from clipboard into textarea using execCommand() method and clipboard API

 <button onclick="document.execCommand('copy',false,null);">copy</button>
<button onclick="document.execCommand('cut',false,null);">cut</button>
<button id="paste">Paste</button>
<div style="border:1px solid; padding: 3px; width:100%; height:400px; background:white" id='input' contenteditable='true'>
   select some of this text and then hit one of the buttons above
</div>

<script>
document.getElementById('paste').addEventListener('click', ()=>{
    let pasteArea = document.getElementById('input');
 navigator.clipboard.readText()
    .then((text)=>{
document.execCommand('insertText', false, text)

   });
});
</script>

How-to JavaScript

Mami Mahfoud April 25, 2021

How-to paste text from clipboard automatically onload page

https://manajmnt-code.blogspot.com/2021/04/how-to-paste-text-from-clipboard.html

<textarea id="pasteArea" cols="50" rows="10"></textarea><br>

<script>

window.addEventListener('load', (event) => {
    let pasteArea = document.getElementById('pasteArea');
  pasteArea.focus();
    pasteArea.value = '';
 
    navigator.clipboard.readText()
    .then((text)=>{
        pasteArea.value = text;
    });
})
 </script>

In this example we'll learn how to paste text from clipboard automatically inside specific textarea on page is loaded, we need textarea tag and clipboard API JavaScript code to do this.
If you copied certain text, it will be pasted automatically in the text box.
in Chrome browser asks for permission

How-to HTML JavaScript JSON_API

Mami Mahfoud April 25, 2021

How-to create html editor with context buttons

https://manajmnt-code.blogspot.com/2021/04/how-to-create-html-editor-with-context.html

In this example i will be share with you how to create html editor with context buttons using codemirror library and JavaScript [ Document.execCommand() ]

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<script src='https://codemirror.net/lib/codemirror.js'></script>
<script src='https://codemirror.net/mode/xml/xml.js'></script>
<script src='https://codemirror.net/mode/javascript/javascript.js'></script>
<script src='https://codemirror.net/mode/css/css.js'></script>
<script src='https://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<link rel='stylesheet' href='https://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='https://codemirror.net/doc/docs.css'>
<style type='text/css'>
.CodeMirror {
    float: left;
    width: 100%;
    border: 1px solid black;}


</style>
</head>
<body>

<div>
    <input type="file" onchange="localLoad(this.files);" />
    <button onclick="undo()">undo</button>
  <button onclick="redo()">redo</button>
  <button onclick="selectAll()">selectAll</button>
  <button onclick="cut()">cut</button>
  <button onclick="copy()">copy</button>
  
</div>
<div id="editor"> </div>
<script>
   var myCodeMirror = CodeMirror(
   document.getElementById('editor'), {
      lineNumbers: true
   });

   function localLoad(files) {
       if (files.length == 1) {
            document.title = escape(files[0].name);
            var reader = new FileReader();
            reader.onload = function(e) {
              myCodeMirror.setValue(e.target.result);
            };
            reader.readAsText(files[0]);
         }
    }
  function undo(){
  myCodeMirror.execCommand("undo", false, null);
  }
  function redo(){
  myCodeMirror.execCommand("redo", false, null);
  }
  function selectAll(){
  myCodeMirror.execCommand("selectAll", false, null);
    
  }
   function copy(){
     myCodeMirror.focus();
   document.execCommand("copy", false, null);
  }
  function cut(){
     myCodeMirror.focus();
   document.execCommand("cut", false, null);
  }

 
</script>

</body>
</html>

code_mirror How-to

Mami Mahfoud April 24, 2021

How-to run HTML, CSS, JS code in iframe from textarea value

https://manajmnt-code.blogspot.com/2021/04/how-to-run-html-css-js-code-in-iframe.html

In this code we will be share with you how to create simple editor with preview for HTML CSS and JavaScript codes, we need textarea to write code and iframe to preview

 <style>
  #editor{padding:5px; outline:0; border:0; border-radius:3px;box-shadow: 0 0 3px 0}
  #editor:focus{border:1px #eee; }
   #editor, #FileFrame{margin-top:5px;margin-bottom:5px}
</style>

<textarea id="editor" style="width:100%; height:200px">
<img src="https://cdn.pixabay.com/photo/2021/04/01/15/37/fruits-6142591__340.jpg" style="width:192px; height:108px"/>
</textarea>
<button onclick="runcode()">Run code</button>
<iframe id="FileFrame" src="about:blank" style="width:100%; height:200px" ></iframe>

<script type="text/javascript">
 
  function runcode(){
  var editor=document.getElementById("editor").value;
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write(editor);
   doc.close();
  }
</script>

How-to HTML JavaScript

Mami Mahfoud April 22, 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>

How-to jquery JSON_API

Mami Mahfoud April 19, 2021

How to make search button in html with icon

https://manajmnt-code.blogspot.com/2021/04/how-to-make-search-button-in-html-with.html

In this lesson, we will share with you How to make search button in html with icon (font-awesome). look at this code below:

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
<form action="search">
	<label >
		<input type="search" name="q"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
	</label>  
</form>
    
    </body>

What will happen when we write something in the search box and then put pressure on the ok or the search button? When you write for example "new York" in the search box, then click OK, the URL will change to: https://www.yourdomine.com/search?q=new+york this is the role of attribute ( action="search" ) in form tag in html.

How to make search button in html for external website (YouTube)

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>

		<form action="https://www.youtube.com/results">
  <input type="search" name="search_query"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
</form>

    
    </body>

output:

How-to HTML web_fonts

Mami Mahfoud April 17, 2021

How-to make background blur using CSS backdrop-filter Property

https://manajmnt-code.blogspot.com/2021/04/how-to-make-background-blur-using-css.html

In this example we're using (CSS backdrop-filter Property) to make the background of body blur

 <!doctype html>
<html>
<head>
<style>
  body {
  	height:300px;
    overflow: hidden;
    background-image: url(https://cdn.pixabay.com/photo/2017/09/05/10/19/business-2717063_960_720.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100% ;
    backdrop-filter: blur(10px);
}
  </style>
</head>
<body>
<p style="color:red; font-size:30px;padding:15px">write yor text hear...</p>

</body>
  </html>

CSS How-to

Mami Mahfoud April 17, 2021

How-to refresh specific tag without refresh page using JavaScript

https://manajmnt-code.blogspot.com/2021/04/how-to-refresh-specific-tag-without.html

in this code we learn how refresh body or specific tag after some time, to do this call the tag that you want to refreshed and innerHTML again like this code bellow

setTimeout(function(){ 
 var bodyref =  document.getElementById("div").innerHTML;
    document.getElementById("div").innerHTML = bodyref;
     }, 9000);

 <html>
  <head></head>
  
  <body>
    
 <iframe width="560" height="315" src="https://www.youtube.com/embed/CsayzeejVzY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
    
    
  <script>
  setTimeout(function(){ 
 var bodyref = document.body.innerHTML;
    document.body.innerHTML = bodyref;
     }, 10000);
   
 </script>  
    
    
  </body>
</html>

How-to JavaScript

Mami Mahfoud April 10, 2021

How-to display text on hover with CSS style (Tooltips)

https://manajmnt-code.blogspot.com/2021/04/how-to-display-text-on-hover-with-css.html

In this code, I will be share with you how to display a description of the text when you hover your mouse over the text

 <style>
 
  #text-hover{display:none}
  #tooltips:hover  #text-hover{display:block; position:absolute; width:max-content; background:black;color:white; padding:2px;margin:2px}
</style>


<span id="tooltips">
  hover me<span id="text-hover">learn how to make them</span>
</span>

CSS How-to

Mami Mahfoud April 07, 2021

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

https://manajmnt-code.blogspot.com/2021/04/how-to-select-copy-code-from-codemirror.html

I will be share with you how to select code in editor and copy it using javascript Method [ focus() ,execCommand("selectAll"), execCommand("copy") ]

  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/doc/docs.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://codemirror.net/mode/css/css.js"></script>
  <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<input type="file" onchange="localLoad(this.files);" />


<div class="editor"> </div>



<script>
   var myCodeMirror = CodeMirror(
   document.getElementsByClassName('editor')[0], {
     mode: "text/html",
	value:"<p>mami</p>"
    
   });
var dd=document.createElement("button");
  dd.innerHTML = "copy"; 
  dd.style="position: absolute; top: 0; right: 0;"
  dd.onclick = function(){
   myCodeMirror.focus();
  myCodeMirror.execCommand("selectAll");   ;
document.execCommand("copy");                                                
};
document.getElementsByClassName("editor")[0].appendChild(dd);
  
   function localLoad(files) {
       if (files.length == 1) {
            document.title = escape(files[0].name);
            var reader = new FileReader();
            reader.onload = function(e) {
              myCodeMirror.setValue(e.target.result);
            };
            reader.readAsText(files[0]);
         }
    }
</script>

code_mirror Framework_Front-End How-to JavaScript

Mami Mahfoud April 05, 2021

How to get iframe content and extract into textarea using JavaScript

How-to ask user to to verify or accept to remove content of div

How to Cut, Copy and Paste inside div tag with buttons using JavaScript

How-to paste text from clipboard automatically onload page

How-to create html editor with context buttons

How-to run HTML, CSS, JS code in iframe from textarea value

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

How to make search button in html with icon

How to make search button in html for external website (YouTube)

How-to make background blur using CSS backdrop-filter Property

How-to refresh specific tag without refresh page using JavaScript

How-to display text on hover with CSS style (Tooltips)

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

Meta keywords generator tool for Blogger

How to add a quick edit button in Blogger

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

Create direct download link for google drive file online

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