0

Before you comment saying that I should research before asking, I have researched and found it to be no help. This is my first time using Jquery and no close to nothing about it and simply need assistance. I appreciate your help in advanced.

Here is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="../../../../../../Coding/websites/Procrastinationwebsite/stylesheets/jquery-1.11.1.min.js"></script>
<script>
$("body").click(function(){
    $(".overlay, .popup").fadeToggle();
})
</script>

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>
</head>

<body>

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

</body>
</html>

It's supposed to do this:

http://jsfiddle.net/eohvutps/

but when I click there is no pop up and appears as if it's not reading the jquery at all. Did I insert it incorrectly? Please keep in mind I have researched and this is my first time using jquery.

jub0bs
  • 60,866
  • 25
  • 183
  • 186
Mortuux
  • 59
  • 6
  • 4
    `stylesheets/jquery-1.11.1.min.js` stylesheets? :) – Yury Tarabanko Dec 11 '14 at 16:47
  • Just dropped in some where for the time being. – Mortuux Dec 11 '14 at 16:49
  • I'd wager that creating the proper directory to place the jquery file in and moving it close to your html would have taken less time than counting the number of folders to traverse up for that script link. If your unsure how to setup a new framework/library, go to github and search for "LIBRARYNAME seed" to find example skeleton apps. Example: [Jquery-seed](https://github.com/search?utf8=%E2%9C%93&q=jquery+seed) – caffeinated.tech Dec 11 '14 at 16:54

2 Answers2

2

You have to consider 2 things:

  1. Add your script in a external file.

  2. Wrap your code inside the document.ready event, this will guarantee that all your code will be executed after DOM was loaded:

    $(document).ready(function(){ $("body").click(function(){ $(".overlay, .popup").fadeToggle(); }); });

Also consider to move your jquery file to folder a called js or script. Even you can use a jQuery CDN.

ianaya89
  • 4,153
  • 3
  • 26
  • 34
  • 1
    It is also best practice to place all of your javascript at the bottom of the page (before the closing body tag) as some browsers try to load script files when they hit the script tag and therefore don't load the rest of the page until they have finished. This means that your selectors will be undefined if this were to happen, thus resulting in error. – Tomuke Dec 11 '14 at 17:03
  • @Tomuke Formally, scripts belong in the header. Modern HTML/JS provides plenty of tools to resolve the little issues that results in, and JQuery makes it even easier. – Katana314 Dec 11 '14 at 19:30
1

You might consider using an absolute url to load jquery.js. seems like you are traversing up a large number of directories, but that doesn't really matter until you try to move documents.

Oh yea and document ready as the above reply stated. That's probably the issue you're experiencing. This is a shorter equivalent of document ready. 

$(function() {

 // jquery stuff 

});
111
  • 1,788
  • 1
  • 23
  • 38