JavaScript - Loading the entire webpage not specific div

Question

I'm new to JavaScript and I'm sure that this is a very trivial fix. I'm dynamically changing a div content based on which button is clicked. This example works in JSFiddle but however when I put it on my PC it simply loads the entire webpage even when I wrap the JS with $(window).load(function(){ ... })

My HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script.js"></script>


</head>

<body>


<ul class="menu">
  <li><a href="#about" class="menu-btn">About</a></li>
  <li><a href="#contact" class="menu-btn">Contact</a></li>
  <li><a href="#misc" class="menu-btn">Misc</a></li>
</ul>

<div id="about" class="menu-content">About</div>
<div id="contact" class="menu-content">Contact</div>
<div id="misc" class="menu-content">Misc</div>


</body>

</html>

My JS (script.js):

$(window).load(function(){


  var $content = $('.menu-content');

  function showContent(type) {
    $('div', $content).hide();
    $('div[data-menu-content='+type+']').show();
  }

  $('.menu').on('click', '.menu-btn', function(e) {
    showContent(e.currentTarget.hash.slice(1));
    e.preventDefault();
  });

  showContent('about');
});

use `$(function(){//code goes here})` – N. Ivanov Sep 20 '17 at 10:23 — N. Ivanov, Sep 20 '17 at 10:23

score 4 · Answer 1 · answered Sep 20 '17 at 10:23

4

$(window).load(function(){ ... })

replace by :

$(document).ready(function(){ ... })

answered Sep 20 '17 at 10:23

2

OP said he is new to JS, care explaining how and why this fixes the issue? – N. Ivanov Sep 20 '17 at 10:24
We got no all the info about wich jquery version you are using but the reason why a page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. – Sep 20 '17 at 10:32
Headmax - This was correct and but also Nishesh answer below was also a part of the problem – Macbook Sep 20 '17 at 10:35
@Sid i guess but this question is already documented explain here https://stackoverflow.com/questions/4395780/difference-between-onload-and-ready i hope that gave you some important info needed. Regards. – Sep 20 '17 at 10:45

Hash · Answer 2 · 2017-09-20T10:41:22.700

Replace your (window).load to (document).ready

load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.

load()

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

ready()

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

score 0 · Answer 3 · answered Sep 20 '17 at 10:25

try this

$(document).ready(function(){ 


  var $content = $('.menu-content');

  function showContent(type) {
    $('div', $content).hide();
    $('div[data-menu-content='+type+']').show();
  }

  $('.menu').on('click', '.menu-btn', function(e) {
    showContent(e.currentTarget.hash.slice(1));
    e.preventDefault();
  });

  showContent('about');
});

score 0 · Answer 4 · answered Sep 20 '17 at 10:26

0

You can try below solution :

function showContent(type) {
    $($content).hide();
    $('#'+type).show();
  }

When i ran your snippet in my PC, I found out that Jquery was not able to find div, based on the selectors you have specified at the time of loading.

answered Sep 20 '17 at 10:26

Nishesh Pratap Singh

2,131
2
13
20

This was actually part of the problem, the second part was with 'headmax' answer above. Many Thanks – Macbook Sep 20 '17 at 10:34

JavaScript - Loading the entire webpage not specific div

4 Answers4