Unexpected Web: Javascript

Showing posts with label Javascript. Show all posts

how to add google translate plugin to any website

By ABONZERTV

Read

0 Comments

How to Save a Complete List of Your Instagram Followers or Following

By ABONZERTV

Read

1 Comments

Create own Instagram Downloader with JavaScript & HTML

By ABONZERTV

Read

2 Comments

Preview an image before it is uploaded (HTML + JS)

By ABONZERTV

Read

0 Comments

Simple web Image Viewer : Display the image in browser immediately after the image has been selected. also fatch some information about that image like File Name, File Size (in MB), file width and height.

<!DOCTYPE html>
<html>
   <body>
      Upload image:
      <input id="image-file" type="file" name="file" />
      <input type="submit" value="Upload" />
      <script type="text/javascript">
         document.getElementById('image-file').addEventListener('change', function() {
         compressImage(this) ;
             document.getElementById('fsize').innerHTML =  this.files[0].size/1024/1024 + " MB"; 
             document.getElementById('fname').innerHTML =  this.files[0].name; 
             
         });
      </script>
      <script>
         function compressImage(input) {
         
           if (input.files && input.files[0]) {
             var reader = new FileReader();
          var imgWidth,imgHeight ;
            
             reader.onload = function(e) {
          
             var resizeCanvas = document.getElementById("compressImageCanvas");
         var ctx = resizeCanvas.getContext("2d");
             
         var img = new Image;
               
               // var ratio = 2/25;
               var ratio =  document.getElementById('zoomLevel').value/100;
         img.onload = function(){
                  imgWidth = this.width;
                     imgHeight = this.height;
                     resizeW = imgWidth * ratio;
                     resizeH = imgHeight * ratio;
                     
                      document.getElementById('fw').innerHTML =  imgWidth; 
                      document.getElementById('fh').innerHTML =  imgHeight;
                      
                      ctx.canvas.width = resizeW;
                      ctx.canvas.height = resizeH;
         ctx.drawImage(img,0,0, imgWidth, imgHeight, 0, 0, imgWidth * ratio, imgHeight * ratio ); 
         };
         img.src = reader.result;
               
             }
         
             reader.readAsDataURL(input.files[0]);
           }
         }
         
      </script>
      <script>
         function updateZoom(val) {
             document.getElementById('Zoom').innerHTML=val+"%";           
           }
      </script>
      <div style="width: fit-content;    text-align: center;">
         <div style="align:center"><input type="range" id="zoomLevel" name="zoom" value="8" min="0" max="100" onchange="updateZoom(this.value);"></div>
         <canvas id="compressImageCanvas" width="200" height="100" style="border:2px solid #d3d3d3; padding:10px;margin:10px;"></canvas>
      </div>
      <div id="imageDetails" style="padding:20px;">
         <div style="color:#757575"> zoom: <span id="Zoom" >8%</span></div>
         </br>
         File Name: <span id="fname"></span></br>
         File Size: <span id="fsize"></span></br>
         Width: <span id="fw"></span></br>
         Height: <span id="fh"></span></br>
      </div>
   </body>
</html>

See the Pen Preview an image before it is uploaded (HTML + JS) by abonzer (@abonzer) on CodePen.

How To Invite All Friends on Facebook in Single click using browser javascript console

By ABONZERTV

Read

0 Comments

Refresh page at specific time : JavaScript Console

By ABONZERTV

Read

0 Comments

Create custom dialog box or Html Popup in google app scripts

By ABONZERTV

Read

0 Comments

Create Navigation Tabs using HTML, CSS, JS

By ABONZERTV

Read

0 Comments

Vertical Tabs HTML Code

Vertical Tab Example :

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_sidenav

Our Code: https://jsfiddle.net/abonzer/etsbu4pm/

<!DOCTYPE html>
<html>
<head>
<style>

body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

h2 {
 font-style: oblique;
    font-weight: 400;
    margin: 10px 0;
    font-size: 20px;
 font-family: "Segoe UI",Arial,sans-serif;
}

div {
    display: block;
}

.red {
 color:#fff!important;
 background-color:#f44336!important;
 
}


.sidenav a { 
   text-decoration:none!important;
   padding: 4px 2px 4px 16px;
   display:block;
   
}


.sidenav{
 height:100%;
 width:200px;
 color: #000!important;
    background-color: #f1f1f1!important;
 position:fixed!important;
 z-index:1;
 overflow:auto;
 padding:4px 2px 4px 16px;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.sidenav a:hover {
 background-color:#ccc;
 color:#000;
}


</style>
</head>


<body>

<nav class="sidenav" style="width:160px">
  <div style="padding:0.01em 16px;">
    <h2>Email Tracker</h2>
  </div>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'How to use')" style=" color: #333333;">How to use</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Track Mail')" style=" color: #333333;">Track Mail</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tracking ID')" style=" color: #333333;">Tracking ID</a>
</nav>

<div style="margin-left:160px">
  

  <div id="How to use" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>How to use Email Tracking Feature</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div id="Track Mail" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Track Email Read Receipts</h2>
    <p>Paris is the capital of France.</p> 
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div id="Tracking ID" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Add your Analytics ID</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>

</div>

<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" red", "");
     
  }
  document.getElementById(cityName).style.display = "block";
   
    evt.currentTarget.className += " red ";
}
</script>

</body>
</html>

How to Import mail Subject and message from gmail into Spreadsheet

By ABONZERTV

Read

0 Comments

Learn how Save Gmail Messages Subject and message to a Google Spreadsheet using Google Apps Script.

You are trying to transfer gmail message subject and body content into google sheets or microsoft Excel ? Well I am build a simple script using Google Apps Script that would export subject lines and message body of up to the first 500 emails in your Inbox.

Max first 500 messages are to be saved at once using this Script. To get started, open Google Sheet and go to Tools > Script Editor.. , paste the code in the script editor of a Google Spreadsheet and run any of these functions according to your requirement from the Run menu.

Save Email Subjects :

function importSubject() {
  // Log the subject lines of up to the first 50(change up to 500) emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'A'; // Select column
  var j=1; //counter for row no
  
  for (var i = 0; i < threads.length; i++) {
   
   subno = 'A' + j;// generate cell address
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(threads[i].getFirstMessageSubject());//get the subject of threads[i]
    j++;
 }
}

Save Email message Content/Body in plane Text :



function importMessage() {
  // Log the subject lines of up to the first 50 emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'B';
  var j=1;
  for (var i = 0; i < threads.length; i++) {
      subno = 'B' + j;
     var message = threads[i].getMessages()[0];  // get first message of thread[i]
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(message.getPlainBody());// get message body in plain text (not in html code) of threads[i]
    j++;
 }
}

Save Email Subject and message Content/Body in plane Text :

function importSubjectAndMessage() {
  // Log the subject lines of up to the first 50 emails in your Inbox
 var threads = GmailApp.getInboxThreads(0, 50);
 var subno = 'A'; // Select column
  var msgno = 'B';
  var j=1; //counter for row no
  
  for (var i = 0; i < threads.length; i++) {
   
   subno = 'A' + j;// generate cell address
    msgno = 'B' + j;
   SpreadsheetApp.getActiveSheet().getRange(subno).setValue(threads[i].getFirstMessageSubject());//get the subject of threads[i]
     var message = threads[i].getMessages()[0];  // get first message of thread[i]
   SpreadsheetApp.getActiveSheet().getRange(msgno).setValue(message.getPlainBody());// get message body in plain text (not in html code) of threads[i]
    j++;
 }
}

Convert a specific date and time into UNIX epoch time (JS)

By ABONZERTV

Read

0 Comments

How to Add a Full Screen Popup Search box in Blogger

By ABONZERTV

Read

1 Comments

A search box is one of the prime components of website that define and enhance the User Interface of a website. let's know how to Add Stylish Custom popup Search Boxes To Blogger. It makes searching simpler and interesting as it provides a pleasing interface to users.

For those who are still not sure about full screen search, they can go to this demo site, to see it in live action.

DEMO

Setps for Installing Full Screen Search popup box in Blogger:

Setp1:

Go to Blogger >> Template >> Edit HTML, Now in the blogger template editor, (Ctrl+F)find ]]></b:skin> tag and just above it paste the following CSS Code.

/*=====================================

= Popup Search Box

=====================================*/

.dialog-box button[type="submit"] {

margin-top: 20px;

padding: 0.8em 2em;

background-color: #377ef0;

color: #fff;

border: none;

text-transform: uppercase;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

}

.dialog-box input[type="text"] {

padding: 0 20px;

font-size: 13px;

letter-spacing: 0.1em;

color: #888;

height: 50px;

line-height: 1;

background-color: #fff;

border: 1px solid #ddd;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

box-sizing: border-box;

width: 100%;

}

.dialog-box h2 {

margin: 0;

font-weight: 400;

font-size: 24px;

padding: 32px 0 25px;

text-transform: uppercase;

}

.dialog-box {

max-width: 520px;

min-width: 290px;

background: #fff;

padding: 20px;

text-align: center;

position: relative;

z-index: 5;

margin: auto;

}

.overlay {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: rgba(55, 58, 71, 0.9);

}

.overlay .overlay-close {

width: 30px;

height: 29px;

position: absolute;

right: 0px;

top: 0px;

border: none;

background: #377ef0;

float: left;

color: #fff;

outline: none;

z-index: 100;

}

.overlay .dialog-inner{

text-align: center;

position: relative;

top: 50%;

height: 60%;

-webkit-transform: translateY(-50%);

transform: translateY(-30%);

}

.overlay-mbl {

opacity: 0;

visibility: hidden;

-webkit-transition: opacity 0.5s, visibility 0s 0.5s;

transition: opacity 0.5s, visibility 0s 0.5s;

z-index:100;

}

.overlay-mbl.open {

opacity: 1;

visibility: visible;

-webkit-transition: opacity 0.5s;

transition: opacity 0.5s;

}

.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover {

background: #212121;

}

#trigger-overlay {

cursor: pointer;

float: left;

}

#trigger-overlay {

background: #377ef0;

color: #fff;

padding: 10px;

}

#trigger-overlay a {

color: #fff;

text-decoration:none;

}

#trigger-overlay:hover {

background: #111;

}

Setp2:

Now we add jQuery files in the template code for Full screen search. Find </body> tag in the code and just paste the following Code above it.

<script src='https://sites.google.com/site/data342323/modernizr.custom.js'/>
<script src='https://sites.google.com/site/data342323/fullscreen_search.js'/>

Step 3:

Find <body> in code and just below it paste the following code. Following HTML code show the Search div container Style/layout that will appear upon clicking the search button, you can be edit this code according to your requirements.

<div class='overlay overlay-mbl'>
<div class='dialog-inner'>
<div class='dialog-box'>
<h2>Enter your keyword</h2>
<form action='/search' class='search-popup-inner' method='get'>
<input name='q' onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Search the site'/>
<button type='submit'>Search</button>
</form>
<div><button class='overlay-close' type='button'>X</button></div>
</div>
</div>
</div>

Final Step:

You are almost done the process for install Full Screen Search popup box in Blogger. the last step to complete this you need to display/Add a search icon or button to open the search box Popup.

Option1: To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area.

<div id="trigger-overlay" >
<a><i class="fa fa-search"></i> SEARCH</div>

Option2: to add fixed button to the bottom right of page (Demo)

1. Find </head> in code and just above it paste the following code.

<style>
#foo {
position: fixed;
bottom: 0;
left: 0;
}
</style>

2. Find the last </div> in your blogger template and just below it paste the following code. To find last div, first find </body> tag and then scroll mouse up and find </div>.

<div id='foo'>
<div id='trigger-overlay'><a><i class='fa fa-search'/> SEARCH</a></div>

</div>

Subscribe to: Posts ( Atom )

Unexpected Web

About

how to add google translate plugin to any website

How to Save a Complete List of Your Instagram Followers or Following

Google Search Query:

Solution:

How to find who don't follow you back on instagram

Create own Instagram Downloader with JavaScript & HTML

Instagram Downloader

How Instagram Downloader Works

How to Download Instagram Photos & Videos using Javascript

Method 2: Magical URL of instagram

Preview an image before it is uploaded (HTML + JS)

How To Invite All Friends on Facebook in Single click using browser javascript console

Step 2

JavaScript consol Code:

Refresh page at specific time : JavaScript Console

Create custom dialog box or Html Popup in google app scripts

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

How to Import mail Subject and message from gmail into Spreadsheet

Convert a specific date and time into UNIX epoch time (JS)

How to Add a Full Screen Popup Search box in Blogger

Setps for Installing Full Screen Search popup box in Blogger:

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!

Connect

About

Google Search Query:

Solution:

How to find who don't follow you back on instagram

Instagram Downloader

How Instagram Downloader Works

How to Download Instagram Photos & Videos using Javascript

Method 2: Magical URL of instagram

Step 2

JavaScript consol Code:

Vertical Tabs HTML Code

Setps for Installing Full Screen Search popup box in Blogger:

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Pages

About Me

Edit This Menu

Looking for something? Search here!