Wiki Viewer
How do I make an wiki viewer?
What is a wiki viewer? How do you make a wiki viewer? This script and codes were developed by Steven on 31 July 2022, Sunday.
Wiki Viewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiki Viewer</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Wiki Search</h1>
</div>
<div class="container-fluid outer jump"> <div class="search-container"> <input class="searchbox closed"></input><span id="tickcross" class="tick"></span> <p id="clicktosearch" style="margin-top:20px;"> Click Icon to Search <br> <a href="https://en.wikipedia.org/wiki/Special:Random"> <button class="btn btn-primary" style="margin-top:10px;">Random Page</button> </a> </p> </div> <div id="results"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wiki Viewer - Script Codes CSS Codes
html,
body { color: black; height: 100%;
}
body { background: rgba(20, 150, 255, .7);
}
.container, .container-fluid { text-align: center;
}
.outer { text-align: center; position: relative; top: 0%;
}
.jump { top: 30%;
}
.searchbox { outline-style: none; background: rgba(20, 150, 255, .7); height: 40px; border: solid blue 5px;
}
.closed { border-radius: 50%; width: 40px; cursor: pointer;
}
.opened { padding-left: 10px; padding-right: 35px; border-radius: 20px; width: 250px;
}
/* Search Tick */
.tick { content: ""; position: absolute; height: 0px; width: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-bottom: solid 4px blue; margin-top: 40px; margin-left: -11px;
}
/* Cross */
.cross { color: blue; font-size: 20px; font-weight: bold; position: absolute; margin-top: 7px; margin-left: -32px; cursor: pointer;
}
#results { width:80%; margin:auto;
}
.result { padding:10px; text-align:left; background: white; margin: 20px; cursor: pointer; border-radius: 0px; border-left: solid 5px rgba(0, 0, 0, 0);
}
.result:hover { border-left: solid 5px blue; box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
}
.title { font-size: 16px; font-weight: bold;
}
.snippet { font-size: 14px;
}
a,a:hover { color:black; text-decoration: none;
}
Wiki Viewer - Script Codes JS Codes
$(document).ready(function() { addOpener(); addSubmit(); $(".searchbox").val(""); //Empty search just in case.
});
function addOpener() { $(".search-container").one("click", function() { // We are opening $(".searchbox").focus(); $(".searchbox").switchClass("closed", "opened", 400, "easeInBack"); $("#tickcross").switchClass("tick", "cross", 400, "linear", function() { $("#tickcross").html("X"); }); event.stopPropagation(); addCloser(); });
}
function addCloser() { $("#tickcross").one("click", function() { //We are closing search box. Cross clicked. $(".searchbox").val(""); //Empty search $("#tickcross").html(""); //Remove cross $(".outer").addClass("jump", 600); // Move back down page $("#results").slideUp(600, function() { $("#results").html(""); }); // Kill Search results $(".searchbox").toggleClass("opened closed", 400, "linear"); // Close it $("#tickcross").toggleClass("cross tick", 200, "easeInQuart", function() { //Switch cross to tick //When cross tick easing is done $("#clicktosearch").css("display", "block"); }); event.stopPropagation(); addOpener(); });
}
function addSubmit() { $(".searchbox").on("keypress", function(e) { if (e.keyCode == 13) { $(".searchbox").autocomplete("close"); doSearch(); } }) $(".searchbox").on("input propertychange paste", function(e) { if ($(".searchbox").val().length > 1) { getSuggest(); } });
}
function getSuggest() { $.ajax({ url: "https://en.wikipedia.org/w/api.php", jsonp: "callback", dataType: 'jsonp', data: { action: "query", list: "prefixsearch", pssearch: $(".searchbox").val(), pslimit: "10", format: "json" }, xhrFields: { withCredentials: true }, success: updateSuggest, error: function(err) { console.log(err); } });
}
function updateSuggest(data) { var autocomp = []; $.each(data.query.prefixsearch, function(index, obj) { autocomp.push(obj.title); }); //Load it $(".searchbox").autocomplete({ select: doSearch, source: autocomp }); $(".searchbox").autocomplete("search"); console.log(autocomp);
}
function doSearch(str) { $(".outer").removeClass("jump", 600); $("#clicktosearch").css("display", "none"); $.ajax({ url: "https://en.wikipedia.org/w/api.php", jsonp: "callback", dataType: 'jsonp', data: { action: "query", list: "search", srsearch: $(".searchbox").val(), srinfo: "suggestion", srlimit: "10", format: "json" }, xhrFields: { withCredentials: true }, success: displayResult });
}
function displayResult(data) { $("#results").slideUp(200, function() { $("#results").html(""); // Clear $.each(data.query.search, function(index, obj) { var outstring = ""; outstring += "<a href='https://en.wikipedia.org/wiki/" + obj.title.replace(" ", "_") + "'>"; outstring += "<div class='result'>"; outstring += "<p class='title'>"; outstring += obj.title; outstring += "</p>"; outstring += "<p class='snippet'>" outstring += obj.snippet; outstring += "</p>"; outstring += "</div>"; outstring += "</a>"; $("#results").append(outstring); }); //Each $("#results").slideDown(200); }); // Clear
}
Developer | Steven |
Username | volv |
Uploaded | July 31, 2022 |
Rating | 3 |
Size | 3,476 Kb |
Views | 36,432 |
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!
Name | Size |
Camper News | 3,013 Kb |
WK 15 Exercises | 9,460 Kb |
Reddit stuff | 2,031 Kb |
Midas Gift Rolls - Updating | 2,897 Kb |
Closure Example | 2,443 Kb |
Weather | 4,445 Kb |
Pomodoro | 3,539 Kb |
JSRange | 3,245 Kb |
Midas - Total Multi | 5,661 Kb |
A Pen by Steven | 2,755 Kb |
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!
Name | Username | Size |
Button Option Group | Honchoman | 1,859 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Hexagons | Ashmind | 4,360 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Mario | Takaneichinose | 3,902 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!