HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
Related
I am trying to use SapUI5 and JQuery $("#draggable").draggable(); function to drag some div around my html page.
problem is - they interfere with each other - SAPUI5 library also have a varibale named draggable (I want to use JQuery draggable() function).
as a result I get Uncaught TypeError: $(...).draggable is not a function(…)
how to solve it? my code is below.. It simulates the problem. notice that once I remove the script tag of SAPUI5 it is working fine and I can drag the div..
Thanks in advance!
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
</body>
</html>
You should move the Jquery scripts at the bottom
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
Other option is to import the thirdparty libraries.
<script>
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$(function() {
$("#draggable").draggable();
} );
</script>
You could wrap those calls in a function to make it less ugly =)
Please help i know this is a noob question but I stuck on this for several days.Thanks in Advance.
This is my Jquery when I open JS cosole it shows me error $ is not definded.
Why my Jquery code doesne't work. Am i properly connected to Html?
$(document).ready(function() {
$('#container').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('#container').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('#container').click(function() {
$(this).toggle(1000);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="dev.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>
Since your script file uses jQuery, ti should be added after jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dev.js"></script>
I tried putting the exact .html and .js codes online and hosting it myself.
I want to replicate this example: http://www.codecademy.com/courses/javascript-intermediate-en-txGOj/0/2?curriculum_id=50ecb9bedc5e3250c40000c6
You can view my code at www[dot]whatsgucci[dot]com/cloudstalk.html
Here's thee code I used:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
CSS:
#results {
color: #000000;
font-weight: bold;
font-family: cursive;
}
JS:
SC.initialize({
client_id: '5e3fe3759c70fe637cb15bab22e238e0'
});
$(document).ready(function() {
SC.get('/tracks', { genres: 'festival trap' }, function(tracks) {
$(tracks).each(function(index, track) {
$('#results').append($('<li></li>').html(track.title + ' - ' + track.genre));
});
});
});
But nothing ends up appearing
Where exactly did you add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
your example is currently broken with out adding jquery. you have to add jquery above the soundcloud sdk import like this:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
you can see your working example here:
http://runnable.com/UzetnvwmO3pX9Eiq/code-academy-how-to-make-this-soundcloud-api-example-to-work-irl
Include Jquery library in your code
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
I am having trouble getting the Javascript to work. All three are in the same folder. Also Chrome takes a while to open, but Firefox is instant. Thanks.
My HTML:
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
My CSS:
div {
height: 100px;
background-color: #ABCDEF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
text-align: center;
}
My Javascript:
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function(){
$(this).fadeTo(1000, .25);
});
Order of script files: Since your script file is using jQuery it should be included after the jQuery library.
Please have a look at the browser console to see whether there is any error as the first step of debugging client side script issues
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
Also you are missing closing brackets at the bottom of script
$(document).ready(function () {
$('div').mouseenter(function () {
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function () {
$(this).fadeTo(1000, .25);
});
});
Demo: Plunker