Why is my JavaScript code not working? - javascript

I have got some code that I got from JSFiddle
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }
that I am trying to replicate on my own website, however it is not working. It displays everything but when clicked on, nothing happens. This is my code.
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }
<!DOCTYPE html>
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
</script>
</head>
<body>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
</body>
</html>
NOTE: You can also see what the code is meant to do with the JSFiddle link.

You need to include the jQuery library, if you want it to work.
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
</script>
</head>
Also a suggestion is that place your script tag with your code just after all the HTML just before the closing of the body tag, so that the JS compilation does not interfere with browser rendering.

Related

.draggable(); functionality not working

The code:
<!DOCTYPE html>
<html>
<head>
<title>Project 507</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#draggable {
width: 150px;
height: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable">
<p>Compose new Tweet</p>
</div>
</body>
</html>
The .draggable(); functionality is not working. I have placed it in a <div> and used jQuery to try and make this <p> work. However there is something wrong with this code and its not outputting the .draggable(); function. Can i get some help please? Thanks.
Add jquery-ui.js in your code :
For reference you can have a look on this :
Fiddle
Code is as below
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Except this all code is same.

External Javascript doesn't load when called

Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>

Code working in JSFiddle but wont work in browser

I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
fader.js
$(document).ready(function(){
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
});
fader.css
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
Original:
http://jsfiddle.net/kevinPHPkevin/4z2zq/
You haven't imported jquery in your html doc. your js code uses jquery.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
<script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
please insert this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQuery load causes body to turn white

I'm simply transitioning from a welcome page to a new page with content via jQuery's fadeOut/fadeIn and load functionality. Both pages have the same CSS and frameworks loaded, and both have black backgrounds. However, when it loads the second page, the background changes to white.
This is not a 'white flash' like the other questions asked on here. Literally, the body turns to white and stays that way. Any ideas why or what I'm doing wrong? I'm sure I've overlooked something very basic.
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$('#go').click(function() {
$('html').fadeOut(2500, function() {
$(this).load('second.html', function() {
$(this).fadeIn(2500);
});
});
return false;
});
})
});
</script>
</head>
<body>
<a id="go">Go!</a>
</body>
</html>
second.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body> </body>
</html>
style.css:
body {
background: #000000;
}
analysis...
$('#go').click(function() { // clicking go...
$('html').fadeOut(2500, function() { // html fade out....
$(this).load('second.html', function() { // html content changes...
$(this).fadeIn(2500); // this line can't run... cause entire html changes... including the <head> that has the script... this line is goodbye...
});
});
return false;
});
suggestion, only change the content of <body> tag...

jQuery works in jsfiddle, but not in html file?

I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.

Categories