Unexpected Web: WEB DESIGN

Showing posts with label WEB DESIGN. Show all posts

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>

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

Create custom dialog box or Html Popup in google app scripts

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

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!

Unexpected Web

Connect

About

Create custom dialog box or Html Popup in google app scripts

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

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!