History Viewer

Developer
Pete Nawara
Size
5,143 Kb
Views
36,432
  1. History Viewer Previews
  2. History Viewer HTML Codes
  3. History Viewer CSS Codes
  4. History Viewer JS Codes

How do I make an history viewer?

View the history of this document.. What is a history viewer? How do you make a history viewer? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.

History Viewer Previews
IQ Test

History Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>History Viewer</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url("https://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic");
@import url(http://weloveiconfonts.com/api/?family=entypo);
* { box-sizing: border-box;
}
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
a { text-decoration: none; color: #fff;
}
body { padding: 40px; font-family: "Roboto"; background: #fafafa;
}
body button.historybutton { text-align: center; padding: 20px 40px; background: #fff100; border: 1px solid #ccc; position: relative; left: 0px; transition: .3s ease-in-out .8s;
}
body button.historybutton.on { left: -300px; transition: .3s ease-in-out;
}
body .historyholder { position: fixed; background: darkcyan; height: 100%; top: -50em; left: 0px; right: 0px; bottom: 0px; overflow: auto; transition: .3s ease-in-out .3s;
}
body .historyholder.on { top: 0em; transition: .8s ease-in-out;
}
body .historyholder.on ul .close { top: 20px; transition: .8s ease-in-out .4s;
}
body .historyholder ul { margin: 0px; color: #fff; position: relative; padding: 40px; display: block; max-width: 600px; margin: 0 auto;
}
body .historyholder ul .close { position: fixed; top: -2000px; right: 40px; font-size: 60px; transition: 1s ease-in-out;
}
body .historyholder ul li { text-align: left; list-style-type: none; border-left: 2px solid #fff; padding: 0 20px 70px; position: relative; margin-bottom: -21px; cursor: pointer;
}
body .historyholder ul li:last-child { border-left: 2px solid transparent;
}
body .historyholder ul li:before { content: ""; display: block; position: absolute; left: -12px; height: 14px; width: 14px; border: 4px solid #fff; background: darkcyan; border-radius: 100%; transition: .6s ease-in-out .1s;
}
body .historyholder ul li:hover:before { background: #fff; transition: .3s ease-in-out;
}
body .historyholder ul li h1, body .historyholder ul li h2, body .historyholder ul li date { text-transform: uppercase;
}
body .historyholder ul li h1 { font-size: 21px; margin: 0; font-weight: 300;
}
body .historyholder ul li h2 { font-size: 14px; font-weight: 100; display: inline-block; margin: 0;
}
body .historyholder ul li p { font-weight: 200; margin: 5px 0;
}
body .historyholder ul li date { display: inline-block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<button class="historybutton">View History</button>
<div class="historyholder"> <ul> <div class="close entypo-cancel-circled"></div> <li class="moment"> <h2>Version 3 <date>- July 23rd 2013</date> </h2> <h1>Sharks with freakin' lasers attached to their heads</h1> <p>A large security update as well as the addition of attaching freakin' lasers to the shark's heads.</p> </li> <li class="moment"> <h2>Version 2 <date>- September 2nd 2013</date> </h2> <h1>Sharks</h1> <p>A large security update as we've added sharks.</p> </li> <li class="moment"> <h2>Version 1 <date>- November 12th 2012</date> </h2> <h1>Bees</h1> <p>We've got bees. Good news is, we<em> want </em>bees!</p> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

History Viewer - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic");
@import url(http://weloveiconfonts.com/api/?family=entypo);
* { box-sizing: border-box;
}
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
a { text-decoration: none; color: #fff;
}
body { padding: 40px; font-family: "Roboto"; background: #fafafa;
}
body button.historybutton { text-align: center; padding: 20px 40px; background: #fff100; border: 1px solid #ccc; position: relative; left: 0px; transition: .3s ease-in-out .8s;
}
body button.historybutton.on { left: -300px; transition: .3s ease-in-out;
}
body .historyholder { position: fixed; background: darkcyan; height: 100%; top: -50em; left: 0px; right: 0px; bottom: 0px; overflow: auto; transition: .3s ease-in-out .3s;
}
body .historyholder.on { top: 0em; transition: .8s ease-in-out;
}
body .historyholder.on ul .close { top: 20px; transition: .8s ease-in-out .4s;
}
body .historyholder ul { margin: 0px; color: #fff; position: relative; padding: 40px; display: block; max-width: 600px; margin: 0 auto;
}
body .historyholder ul .close { position: fixed; top: -2000px; right: 40px; font-size: 60px; transition: 1s ease-in-out;
}
body .historyholder ul li { text-align: left; list-style-type: none; border-left: 2px solid #fff; padding: 0 20px 70px; position: relative; margin-bottom: -21px; cursor: pointer;
}
body .historyholder ul li:last-child { border-left: 2px solid transparent;
}
body .historyholder ul li:before { content: ""; display: block; position: absolute; left: -12px; height: 14px; width: 14px; border: 4px solid #fff; background: darkcyan; border-radius: 100%; transition: .6s ease-in-out .1s;
}
body .historyholder ul li:hover:before { background: #fff; transition: .3s ease-in-out;
}
body .historyholder ul li h1, body .historyholder ul li h2, body .historyholder ul li date { text-transform: uppercase;
}
body .historyholder ul li h1 { font-size: 21px; margin: 0; font-weight: 300;
}
body .historyholder ul li h2 { font-size: 14px; font-weight: 100; display: inline-block; margin: 0;
}
body .historyholder ul li p { font-weight: 200; margin: 5px 0;
}
body .historyholder ul li date { display: inline-block;
}

History Viewer - Script Codes JS Codes

var timeout = null
$('.historybutton').click(function() { $(this).addClass("on"); clearTimeout(timeout) $('.historyholder').toggleClass("on");
});
$(".close").click(function () { $(".historyholder").removeClass("on"); $('.historybutton').toggleClass("on"); });
History Viewer - Script Codes
History Viewer - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 3
Size 5,143 Kb
Views 36,432
Do you need developer help for History Viewer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pete Nawara (petebot) Script Codes
Name
Ridonk Expando
Notifications
Text Shadow
Toggle Time
The Team
Card flip
Toggle Time Three Options
KITT
CSS Modal
ScrollMagic playpen
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!