Wiki Viewer 1

Developer
Size
3,298 Kb
Views
4,048

How do I make an wiki viewer 1?

What is a wiki viewer 1? How do you make a wiki viewer 1? This script and codes were developed by Sudipta Das on 21 January 2023, Saturday.

Wiki Viewer 1 Previews

Wiki Viewer 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiki Viewer 1</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid text-center"> <div class="col-md-offset-3 col-md-7 col-xs-offset-2 col-xs-9 col-lg-offset-3 col-lg-7 col-sm-offset-2 col-sm-8"> <div class="form"> <form> <h4>Search Wikipedia</h4><br> <input type="text" class="form-control txt" id="txt" placeholder="Type Here.." autocomplete="off"> <div class="panel panel-default rs"></div> <div class="panel panel-default pl"></div> </form> <div class="formdw"> <button class="btn btn-info"><b>Search</b></button><br> <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><u>Read</u></a> A Random Wikipedia Article </div> </div> </div> <div class="col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10 grid"></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='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wiki Viewer 1 - Script Codes CSS Codes

body{font-family: 'Quicksand', sans-serif; font-size:17px;}
h4{font-weight:700;}
.panel{text-align:left;}
.pl,.rs{ margin:0;padding-left:5px;padding-bottom:5px;padding-top:5px;z-index:2;
position:absolute; display:none;
}
.pb, .rspb{margin:0; padding:3px;font-weight:700;font-size:14px; }
.rspb{font-weight:400;font-style: italic;}
.grid{display:none; font-family: 'Crimson Text', serif; font-size:17px; }
.btn{margin-bottom:5%}
.form{ margin:auto;padding-top:20%; padding-bottom:10%
}
.formdw{ margin-top:20px; z-index:1; }
.pb:hover{background-color:rgb(200,200,200);
cursor:pointer;}
.rspb:hover{background-color:rgb(200,200,200);
cursor:pointer;}
a{color:black;}
a:hover{text-decoration:none;}

Wiki Viewer 1 - Script Codes JS Codes


$(document).ready(function(){ var rs=[];
$('#txt').click(function(){ $('.rs').empty(); $('.rs').width($('.form').width()*0.98); if(rs.length!=0){ for(var i in rs){ var xy='<div class="panel-body rspb">'+rs[i]+'</div>' ; $('.rs').append(xy); } $('.rs').show(); } $('.rspb').click(function(){ $('#txt').val(this.innerHTML); $('.rs').hide();
}); $('.rspb').mouseenter(function(){ $('#txt').val(this.innerText); });
});
$('#txt').keyup(function(){ $('.pl').width($('.form').width()*0.95); $('.rs').hide(); $('.pl').hide(); $('.pl').empty(); var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+$('#txt').val()+'&callback=JSON_CALLBACK'; $('.pl').hide(); $('.pl').empty();
try{ $.ajax({url:url,jsonp: "callback", dataType: "jsonp", success: function( response ) { $('.pl').hide(); $('.pl').empty(); if(response.query!==undefined){ var temp=response.query.pages; for(var i in temp){
var xt='<div class="panel-body pb">'+temp[i].title.toLowerCase()+'</div>' ; $('.pl').append(xt); } $('.pl').show(); } $('.pb').click(function(){ $('#txt').val(this.innerHTML); $('.pl').hide(); $('.pl').empty();
}); $('.pb').mouseenter(function(){ $('#txt').val(this.innerHTML); }); $('.container-fluid').click(function(){ $('.pl').hide(); $('.pl').empty();
}); }});
} catch(e){ console.log('caught'); } }); $('button').click(function(){ if($('#txt').val()=="") alert("Type something in the box"); else { rs.unshift($('#txt').val()); if(rs.length>10) rs.pop(); $('.grid').fadeOut('fast'); $('.grid').empty();
var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+$('#txt').val()+'&callback=JSON_CALLBACK';
$.ajax({url:url,jsonp: "callback", dataType: "jsonp", success: function( response ) { var temp=response.query.pages; for(var i in temp){ var txt='<a href="https://en.wikipedia.org/?curid='+temp[i].pageid+'" target="_blank"><div class="panel panel-warning"><div class="panel-heading">'+temp[i].title+'</div><div class="panel-body">'+temp[i].extract+'</div></div></a>'; $('.grid').append(txt); }
}})
$('h4').hide('fast'); $('.form').animate({'padding-top':'10%','width':'80%'},function(){
$('.grid').show('fast'); $('#txt').val(''); }); }
});
});
Wiki Viewer 1 - Script Codes
Wiki Viewer 1 - Script Codes
Home Page Home
Developer Sudipta Das
Username sdas13
Uploaded January 21, 2023
Rating 3
Size 3,298 Kb
Views 4,048
Do you need developer help for Wiki Viewer 1?

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!

Sudipta Das (sdas13) Script Codes
Name
JS and The DOM
Javascript Calculator
PortFolio
Hightcharts
MS
Pomodoro Timer
Canvas
Local Weather
OOJS
Javascript DOM
Create amazing sales emails 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!