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>
Related
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.
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.
I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>
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.
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.