I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am utilizing a test div to visualize its placement, which unfortunately isn't fully visible. Moreover, there seems to be no expansion happening on the site nor any scroll features appearing.
Here's the HTML snippet:
<!DOCTYPE html>
<html lang="end">
<head>
<meta charset="utf-8" />
<title>League of Legends Summoner Stats</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<script src="script.js"></script>
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br>this is another test
<br>another
</section>
</div>
</body>
</html>
This is the CSS code:
body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display:inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}
This is the related Javascript excerpt:
$(function () {
$("#stats").hide();
});
document.getElementById('search_button').onclick = function () {
var search = document.getElementById('summoner_name').value;
$(function () {
$("#stats").show();
});
}
Being new to HTML/CSS/JS, my code may be all over the place at the moment.