Unexpected Web: Html

Showing posts with label Html. Show all posts

Prevent Google translate from translating some words

By ABONZERTV

Read

0 Comments

how to add google translate plugin to any website

By ABONZERTV

Read

0 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 create a "card" with CSS

By ABONZERTV

Read

0 Comments

Learn How to create a colorful horizontal card with CSS similar to Google Tips page.

DEMO

Source code:

<!- abonzertv.blogspot.com, unexpectedweb.blogspot.com -->

<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 100%;
  display: block;
  margin-bottom: 16px;
  padding: 0 8px;
}


.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 5px 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: #424242;
}


.hovdiv.green:hover {
  background-color: #4caf50;
  color:#fdfdfd !important;
}

.hovdiv.red:hover {
  background-color: #f44336;
  color:#fdfdfd !important;
}

.hovdiv.pink:hover {
  background-color: #e91e63;
  color:#fdfdfd !important;
}

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

.hovdiv:hover .title{
   color:#fdfdfd !important;
  }

.description{
color:#757575;
}

.hovdiv:hover .description{
   color:#fdfdfd !important;
}

</style>





<h2>WebTools</h2>
<p>Many Useful web tools developed in JavaScript and other pages.</p>
<br>

  <a href="http://unexpectedweb.blogspot.in/p/home.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv green">
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3>
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/gmail-tracking-url.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv red">
        <h5 class="codetype">JS, GMAIL, Google Analytics</h5>
        <h3 class="title" style="color:#b71c1c;">Gmail Tracking URL</h3>
        <p class="description">Track your outgoing Gmail messages have been read or not.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/epoch.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT, </h5>
        <h3 class="title" style="color:#1c67b7;">Epoch Converter</h3>
        <p class="description">Convert normal Date and Time into epoch time, also known as Unix time </p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/youtube-download-link-extractor.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv pink">
        <h5 class="codetype">JAVASCRIPT, YOUTUBE, HACK</h5>
        <h3 class="title" style="color:#b71caa;">YouTube Download link Extractor</h3>
        <p class="description">Find the direct download link of YouTube video from the source-code of page.</p>
                
      </div>
    </div>
  </div>
  </a>

  <a href="http://unexpectedweb.blogspot.in/p/url-decoder.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT</h5>
        <h3 class="title" style="color:#1c67b7;">URL Decoder</h3>
        <p class="description">Decode and Encode URI Component, Simplify the complex link. </p>
                
      </div>
    </div>
  </div>
  </a>

You Can add more color for Cards Just Add Following code before </style>.

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

Select Color from below table.

Add New Card:

<a href="http://yourlink.com">
  <div class="column">
    <div class="card">
      // select color of Div, add previous in style. here cyen is the class name

      <div class="container hovdiv cyen"> 
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3> // Select Dark Color in same range
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>

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 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>

Copy to Clipboard Javascript Button to copy text

By ABONZERTV

Read

0 Comments

Create Best Hacking Matrix Effect in HTML

By ABONZERTV

Read

0 Comments

Great Ways To feal Like A Hacker using Create hackinh Matrix rain animation using HTML5 canvas and javascript. This tutorial is inspired by this cool demo and gschoppe. Gschoppe Matrix is a really interesting prank webPage/Tool that gives you the ability to be like a hacker. You can impress your friends, give your website a fresh new look with adding Matrix animation background or can use to making a short film on Hacking / Cyber Security.

HTML Code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Matrix</title>
        <style>
            body, html, canvas {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                function resetSize() {
                    $('#q').each(function() {
                        $(this)[0].width = $(this).width();
                        $(this)[0].height = $(this).height();
                    });
                }
                resetSize();
                $(document).resize(function() {
                    resetSize();
                });
                var s=window.screen;
                var width = q.width=s.width;
                var height = q.height;
                var yPositions = Array(300).join(0).split('');
                var ctx=q.getContext('2d');
                function getNextChar() {
                    //
                    //return(""+Math.round(Math.random()));
                    if(Math.random()<.4) {
                        // numbers
                        return(getRandomChar(48, 57));
                    } else if(Math.random()<.8) {
                        // capital letters
                        return(getRandomChar(65, 90));
                    } else {
                        // katakana
                        return(getRandomChar(0x30A0, 0x30A0));
                    }
                }
                function getRandomChar(rangeStart, rangeEnd) {
                    return(String.fromCharCode(rangeStart + Math.random() * (rangeEnd-rangeStart+1)));
                }
                var draw = function () {
                    ctx.fillStyle='rgba(0,0,0,.05)';
                    ctx.fillRect(0,0,width,height);
                    ctx.fillStyle='#0F0';
                    ctx.font = '10pt Georgia';
                    yPositions.map(function(y, index){
                        text = getNextChar();
                        x = (index * 10)+10;
                        q.getContext('2d').fillText(text, x, y);
                        if(y > 100 + Math.random()*20000) {
                            yPositions[index]=0;
                        } else {
                            yPositions[index] = y + 10;
                        }
                    });
                };
                RunMatrix();
                function RunMatrix() {
                    if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
                        Game_Interval = setInterval(draw, 25);
                }
                function StopMatrix() {
                    clearInterval(Game_Interval);
                }
                //setInterval(draw, 33);
                $("button#pause").click(function() {
                    StopMatrix();
                });
                $("button#play").click(function(){
                    RunMatrix();
                });
                 
            })
        </script>
    </head>
    <body>
        <div align="center">
            <canvas id="q"></canvas>
        </div>
    </body>
</html>

Preview

Output:

Subscribe to: Posts ( Atom )

Unexpected Web

About

Prevent Google translate from translating some words

how to add google translate plugin to any website

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 create a "card" with CSS

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

How to Add a Full Screen Popup Search box in Blogger

Setps for Installing Full Screen Search popup box in Blogger:

Copy to Clipboard Javascript Button to copy text

Copy to clipboard – pure javascript solution Example

Create Best Hacking Matrix Effect in HTML

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!

Connect

About

Instagram Downloader

How Instagram Downloader Works

How to Download Instagram Photos & Videos using Javascript

Method 2: Magical URL of instagram

Vertical Tabs HTML Code

Setps for Installing Full Screen Search popup box in Blogger:

Copy to clipboard – pure javascript solution Example

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Pages

About Me

Edit This Menu

Looking for something? Search here!