.draggable(); functionality not working - javascript

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.

Related

Why is my Javascript and JQuery scripting not working?

I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>

Why is my JavaScript code not working?

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.

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 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.

How come my jquery plugin is not working on my page but in the very similair sample code?

In the sample code The javascript drowdown works fine, but on link text my page it doesn't work in firefox.
sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>geo-autocomplete demos</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.from').geo_autocomplete();
});
</script>
<style type="text/css">
.ui-autocomplete { overflow-y: auto; width:300px; }
* html .ui-autocomplete { /* IE max- */height: expression( this.scrollHeight > 320 ? "320px" : "auto" ); }
.ui-autocomplete { max-height: 320px; }
.ui-autocomplete li { font-size:10pt; }
</style>
</head>
<body>
<h1>geo-autocomplete demos</h1>
<h3>Basic use</h3>
<p>Location: <input type="text" class="from" size="50" /></p>
</body>
</html>
Some of the javascript from my implementation(not working):
from my header
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script src="/js/common-2.0.js" type="text/javascript"></script>
common-2.0.js
$(document).ready(function()
{
//Some other code, removed in this example
$('.from, .to').geo_autocomplete();
});
It looks to me as if your page is not successfully getting all the Google Javascript files it needs. There are errors in the console. It's hard to tell exactly what's wrong because Firebug seems confused by the fact that your page is XML.

Categories