The website is failing to extend and reveal content that is being concealed by jQuery

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.

Answer №1

When utilizing jQuery, make sure to use it for registering the click handlers and resolve the issue with the styles applied to #stats

$(function() {
  $("#stats").hide();

  $('#search_button').click(function() {
    $("#stats").show();
  });
});
body {
  background-image: url("background.jpg");
  width: 100%;
  background-size: 100%;
}
.region_selector {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  /* include necessary prefixes */
  transform: translate(-100%, -50%);
  display: inline;
} 

//CSS code truncated for brevity

#stats {
  position: fixed;
  top: 1px;
  <!--here is the problem --> left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, 200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" />
<div id="stats">
  <section id="main">
    <h1>THIS IS A TEST</h1>
    some more testing
    <br/>this is another test
    <br/>another
  </section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error TS2307: Module 'angular' could not be located

I have encountered an error in my project and despite searching for solutions, I haven't been able to find one that addresses my specific issue. It seems like a simple problem, but I can't figure out what I'm missing. The error arises in th ...

Harnessing the Power of Google Tag Script in Next.js

After researching How to load Google Tag Manager with the next/script component (Next.js 11) and reviewing this documentation page, my issue remains unresolved. I am looking to implement Google Tag on multiple websites developed using nextjs, so I created ...

completed() versus finished()

As I was going through the documentation for passport, I came across an interesting observation regarding the use of serialize() and deserialize(). It seems that done() is called without being explicitly returned in one scenario. However, while setting up ...

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

After performing a forEach inside an asynchronous method, I am trying to return an array of names. The issue is that despite the forEach working correctly, the array always ends up empty. On the website side, here is my request: function retrieveCharity( ...

Changing datetime-local format from European to American dates

<input type="datetime-local"> While this input retrieves the local time from your PC, I'm curious if there's a way to make it display as US time specifically. ...

Directive in AngularJS fails to trigger upon form reset

I encountered an issue with a directive used within a form, specifically when clicking on a button with the type reset. The problem can be replicated on this stackblitz link. The directive I'm using is quite simple - it sets the input in an error stat ...

The result should display the top 5 application names based on the count property found within the ImageDetails object

data = { "ImageDetails": [ { "application": "unknownApp, "count": 107757, }, { "application": "app6", "count": 1900, }, { & ...

Utilizing HTML5's geolocation API to construct a geofence

Is there a way to utilize the HTML5 geolocation API to determine if a user is located in a specific area? I'm considering setting a central latitude and longitude and creating a radius around it, so the site will function as long as the user is within ...

Updating documents in a mongoDB collection can be done by simply

I require an update to my database that will modify existing data, as illustrated below: existing data => [{_id:"abnc214124",name:"mustafa",age:12,etc...}, {_id:"abnc21412432",name:"mustafa1",age:32,etc...}, {_id ...

Using jQuery to access the value of the CSS property "margin-left"

I created a JavaScript game with moving divs that have different transition times. The game includes a function that is called every 1/100 seconds, which checks the position of the divs using: $("class1").css("margin-left") Here's the strange part: ...

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

The issue arises when attempting to render an SVG with JavaScript embedded inside using the img, object, or

Issue with the title ... please follow these steps: (view codes below) Create an svg + open it separately (name it keysaway.svg) Create html + open it individually When you observe, the svg displays a simple up and down animation but fails to work when l ...

Is the latest update of Gatsby incompatible with Material UI?

Encountering an issue while running this command portfolio % npm install gatsby-theme-material-ui npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class= ...

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

When using ts-node, I encountered the following error: $ ts-node index.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/projects/node-hddds8/index.ts I attempted to remove "type": "module& ...

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide

Can you include tooltips or popovers in Bootstrap 5 floating labels text? I've set up a form with floating form fields and I'd like to provide instructions for certain fields using tooltips or popovers. I can make it work with the standard form ...

Issue with Bootstrap v3.3.6 Dropdown Functionality

previewCan someone help me figure out why my Bootstrap dropdown menu is not working correctly? I recently downloaded Bootstrap to create a custom design, and while the carousel is functioning properly, when I click on the dropdown button, the dropdown-menu ...

Run code once all ajax requests have been completed

Here's the code snippet I'm working with: function updateCharts() { for (var i = 0; i < charts.length; i++) { updateChart(charts[i]); } sortQueues(); } function updateChart(chart) { $.ajax({ type: "POST", ...

Chrome extension causing delays in rendering HTML on webpage

Currently, I am developing a script (extension) that targets a specific HTML tag and performs certain actions on it. The challenge I am facing is that this particular HTML tag gets dynamically loaded onto the page at a certain point in time, and I need to ...

I'm having trouble with my code - I suspect the issue might be related to the header() function

When I execute the following code, it resets the form and keeps me on the same page. I am aiming for it to redirect to home.php after a successful login. I believe there is an issue with my header() I have experimented with different approaches and have ...