Here is my full code but cursor is not changing even "mousedown" event is triggered. After you release mouse button, so "mouseup" is triggered, cursor is changing.
How can I fix this?
$('#testing').on('mousedown', function(e) {
e.preventDefault();
$(this).css('cursor', 'pointer');
}).on('mouseup', function() {
$(this).css('cursor', 'crosshair');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testing" style="width: 100px; height: 200px; background: red"></div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#testing').on('mousedown',function(e){
e.preventDefault();
$(this).css('cursor','pointer');
}).on('mouseup',function(){
$(this).css('cursor','crosshair');
});
});
</script>
</head>
<body>
<div id="testing" style="width:100px;height:200px;background:red"></div>
</body>
The above code works fine.
Related
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
width: 'toggle'
}, -10);
});
});
<script src="jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js">
</script>
<script>
</script>
<div id="One" style="width:50px;height:200px;background-
color:yellow;position:relative;top:300px;left:600px;">One</div>
<div id="Two" style="width:200px;height:200px;background-
color:black;position:relative;top:100px;left:400px;">Two</div>
Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.
Try adding this::
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
left: '400px'
});
});
});
In my application I have the following html with js and stylesheet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag'n'Drop demo</title>
<style>
#dropArea{
min-width:50%;
min-height:800px;
background-color:#FF00BB;
float: left;
}
#imgArea {
min-width:49%;
min-height:800px;
background-color:#0F0FBB;
float: right;
}
#imgArea img {
display:block;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var onDropCallback=function(event){
event.preventDefault();
console.log("Droped")
}
var dragSrart=function(event){
// alert("DragStarted")
console.log("Drag Started");
}
var ondragoverCallback=function(event){
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
var dragEndCallback=function(event){
event.preventDefault();
console.log("Drag End HAppened");
$("#dropArea").css('border',"none");
}
</script>
</head>
<body>
<div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
<div id="imgArea">
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif">
</div>
</body>
</html>
But for some reason even though the events ondragstart and ondragend gets fired I cannot figure out why the drop event does not fire at all. I have looked on https://www.w3schools.com/HTML/html5_draganddrop.asp and on https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop but I cannot figure out how different is my code from the examples.
As you can see on: https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop you must preventDefault during on dragover event so the ondragoverCallback should have the following code:
var ondragoverCallback=function(event){
event.preventDefault();
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
I want to click a button on my page then another div toggle on and load in that div another page, but it doesn't work.
HTML:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min_1.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 1000
);
$("#me").load("page2.html")
});
});
</script>
</head>
<body>
<div id="clickme" style="color: #FFFFFF;">
Click here
</div>
<div id="me" style="border:1px solid #000; width:900px; height:300px;">
</div>
</body>
</html>
I believe your function can be simplified to use the normal callback of toggle or slidetoggle
$(function() {
$('#clickme').on("click",function() {
$('#me').toggle(function() {
$(this).load("page2.html");
});
});
});
But you might want to load before toggling:
$(function() {
$('#clickme').on("click",function() {
$('#me').load("page2.html",function() {
$('#me').slideToggle();
});
});
});
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
I am not having any luck getting jqueryrotate example #2 on this page to work on a simple html page. What am I doing wrong? Thanks for the help.
Here is my code -
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<STYLE type="text/css">
#img { margin:100px 100px;}
</STYLE>
</head>
<body>
<script type="text/javascript">
$("#img").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}
});
</script>
<img id="img" src="https://www.google.com/images/srpr/logo3w.png">
</body>
</html>
you code works just fine, see here.
You should probably use ready.
$(document).ready(function() {
$("#img").rotate({
bind: {
mouseover: function() {
$(this).rotate({
animateTo: 180
})
},
mouseout: function() {
$(this).rotate({
animateTo: 0
})
}
}
});
});
Also, I would not recommend using the id #img it's not that it's wrong, it's just sort of ugly IMO.