Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
Related
I found related articles here but none of them were useful. I am learning jQuery from codecademy and when I try to practice it by myself nothing happens.
HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
</body>
</html>
CSS looks like this:
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
and Javascript looks like this:
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
There should appear an orange rectangle and when u click it it should disappear, but in fact it only appears and I can't make it disappear. (same example on codecademy works just fine)
P.S some people blame me for bad question and if you think this is a bad one please explain why.
Look like you forgot to add jQuery library - works fine. A suggestion would be to use $(this) inside the click listener so that you hide the same div that you have clicked - see demo below with 2 divs:
$(document).ready(function() {
$('div').click(function() {
$(this).fadeOut('slow');
});
});
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br/>
<div></div>
You didn't add the jQuery library.
That's why it doesn't work.
Try to add :
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
into the <head>
Add this to the bottom of your <body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
</script>
</body>
</html>
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I need to connect draggable and resizable <div> elements with JSPlumb.
I was looking at this tutorial it uses v1.4.1 of JSPlumb. I have a very simmilar code as the example in the tutorial:
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<style>
#diagramContainer {
padding: 20px;
width:80%; height: 400px;
border: 1px solid gray;
}
.item {
position: absolute;
height:80px; width: 80px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="left:150px;"></div>
</div>
<p>Visit the full jsPlumb-Tutorial to learn it and see many more interesting examples.</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script>
$(".item").resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});
jsPlumb.ready(function() {
jsPlumb.connect({
source:"item_left",
target:"item_right",
endpoint:"Rectangle"
});
jsPlumb.draggable("item_left");
jsPlumb.draggable("item_right");
});
</script>
</body>
</html>
( Here is a jsFiddle like demonstration: http://www.freedevelopertutorials.com/jsplumb-tutorial/examples/jsplumb-resizable-divs-example/ of the code)
If I switch the JSPlumb version in the sample code above from v1.4.1 to v2.0.7 resizingan element also starts draggingit.
I found the following stackoverflow question jsPlumb issue using drag and resize but I could not understand the answer.
I tried the following:
not using jsPlumb.draggable("item_left"); and instead just
$(".item").draggable({
drag: function (event, ui) {
jsPlumb.repaint(ui.helper);
}
});
Then the line gets drawn but does not follow the resize/drag
movement of the items.
Can anybody tell me how to get the example to work with the new version?
Thanks a lot
For the newer versions of JsPlumb the bug persists. In this case, just use the filter option in the drag options.
jsPlumb.draggable((element), {
filter: ".ui-resizable-handle"
});
https://github.com/jsplumb/katavorio/wiki#filtering
I've been looking thru the docs and another question that was close to what I needed for help with the jRate star rating jQuery plugin, but I was not able to get the output I was looking for. What I am looking to do is to get an output of the numerical rating value when I click a button.
With this html :
<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />
</div>
and this javascript :
function getRatingValue(){
$(document).ready(function(){
$('ratingContainer').jRate({
onSet: function(rating){
$('ratingValue').text(rating);
}
})
});
}
function getSimpleStarRatingHtml(){
$(document).ready(function() {
$("#ratingContainer").jRate({
width: 60,
height: 60,
startColor: '#3366FF',
endColor: '#9966FF'
});
});
}
The getSimpleStarRatingHtml() function populates the empty stars in the ratingContainer div when the user pulls a select dropdown.
The getRatingValue code was cribbed from the other StackOverflow question I linked to.
I realize this is probably a basic jQuery Q; I'm a little bit of a noob with it. Thanks.
Update
The code below does give me the output for the rating value I want, but does not allow me to set any options for the appearance of the stars (height, color, etc):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function createJrate(){
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text(rating);
}
});
}
</script>
<style>
#rating{
width: 300px;
height: 140px;
border: 1px black solid;
}
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>
<div id="rating"></div><div id="ratingValue"></div>
</body>
</html>
Have tried a bunch of variations, like adding the rating function after the close bracket that ends the options, tried tying the $('#ratingValue').jRate() to a var, and then calling the function, as in jRate.change(function(){// stuff in here});.
Any other ideas you may have?
thanks
If your logic works and you're just looking to change the styling, have you considered simply overriding the standard CSS for the script to have it render with the colors and formatting that you'd prefer?
was able to get it working by defining the jRate obj this way...
$('#rating').jRate({
onChange: function(rating){
$('#ratingValue').text("rating " + rating);
},
startColor: 'blue',
endColor: 'blue',
width: 50,
height: 50
});
I am new to Tweenmax animation and i am trying to animate an id selector and unfortunately nothing is happening. both selector and content do nothing. Some one help me out, here is the code.
<!DOCTYPE html>
<html>
<head>
<title>my first tween</title>
<style>
body {
background-color:silver;
}
#sample {
width: 402px;
height: 60px;
background-color:teal;
padding: 8px;
}
</style>
<script type="text/javascript" src="jquery.gsap.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js">/script>
</head>
<body>
<div id="sample">
<!-- Some content -->
</div>
</body>
</html>
And here is the js
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(sample, 1.5, {width:100});
<script>
$(function(){
TweenLite.to($("#sample"), 1.5, {width:100});
});
</script>
use
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(drew , 1.5, {width:100});
you put sample instead of drew.