I cannot make a simple click event on the "canvas" using JQuery click function.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
"test" message is appearing but functions above is not working. Other siblings of div "middle" (I did not include since I tried to remove them for testing and it still happening) can execute events but only this div and inside cannot execute a single event.
Tried also to console.log($("#canvas")) and it fetches some data below.
[div#canvas]
here is the complete html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>
<div class="middle">
<div id="canvas"></div>
</div>
</body>
</html>
custom.css
.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}
#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
Below is the image of the divs:
This is really frustrating because this is a basic function that I cannot call.
Edit:
I added a https://jsfiddle.net/5mtt2khu/
Please let me know any questions.
Thanks!
Do with event.target element .And match with condition
Updated js Fiddle
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
Updated
Remove or change the z-index
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}
#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Your code seems to work.
So the problem must come from other things. Here is some possibilities :
JQuery is not correctly installed
You have a javascript error before so this is never executed
Your html is dynamically added after you load the event handler
You have an other div with the same id somewhere
If your html is dynamically added, I recommend you to do something like this
$(document).ready ( function () {
$(document).on ("click", "#canvas", function () {
alert("canvas");
});
$(document).on ("click", "#middle", function () {
alert("middle");
});
});
If you have several "canvas" id, you can do something like :
$("[id=canvas]").click(function () {
alert("canvas");
});
I think you are looking for something like this:
$(document).ready(function(){
alert("test");
$("#canvas").click(function(e){
alert("canvas");
e.stopPropagation();
});
$(".middle").click(function(){
alert("middle");
});
});
.middle {
width: 200px;
height: 200px;
background: red;
}
#canvas {
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Hope it helps :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="middle">
<div id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
</script>
Try to change the div to input type or button.It works when I specified the color to the div and clicking it.So, without knowing where to click the event was not working.
Your jQuery code is actually working fine as it should. The problem here is propably because the canvas has no height and width defined, so it's too small to actually be able to click on it.
Give the divs a height and width like the below code snippet and you'll see that the jQuery gets executed correctly.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
<div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>
Related
I have just started trying to learn JQuery event handling, and cannot seem to understand why this is happening. I read through the section on event handling in the documentation, but I am still having trouble manipulating objects on the page from the event handler. I get the basic idea of event bubbling up through the DOM, and have been successful i attaching primitive functions that operate on the specific object to which they are attached, or which can launch an alert. Below is the HTML, CSS, and Javascript, and the trouble is specifically with this handler:
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
Here is the full code
$(document).ready(function() {
$("#leftButton").click(function() {
alert("Handle for left button click()");
$(this).hide();
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
$("#blockRed").click(function() {
$(this).hide();
});
$("#blockBlue").click(function() {
alert("Handle for blue block");
});
$("#blockGreen").click(function() {
alert("Handle for green block");
});
$("#picOne").click(function() {
alert("Handle for right arrow");
});
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
});
#picOne {
float: right;
margin-right: 0px;
}
#picTwo {
float: left;
}
.friendImg {
width: 250px;
height: 100px;
border: #000;
display: inline-block;
margin-right: auto;
margin-left: auto;
margin-bottom: 2%;
text-align: center;
padding-left: 25%;
}
.lightRedBox {
background-color: rgb(23, 0, 0);
width: 800px;
height: 400px;
border: #09C;
border-width: thin;
margin-top: 10%;
margin-left: 5%;
}
#blackBox {
background: black;
height: 400px;
width: 100%;
}
#blockBlue {
background: blue;
width: 75px;
height: 75px;
}
#blockRed {
background: red;
width: 75px;
height: 75px;
}
#blockGreen {
background: green;
width: 75px;
height: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bonsai Exquisite - Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/galleryCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="blackBox">
<div class="lightRedBox" id="firstBox">
<h4 class="boxTitle">Bonsai </h4>
<img src="images/coolFilteBonsai.jpg" alt="bonsai image" id="leftFriendImage" class="friendImg">
<p class="boxBlurb">This associatin has been assisting local bonsai associations for over fifty years, and has contributed to the larger pattern of bonsai growth globally. In the past five years, the association has been dealing with blah blah blsah blah.....</p>
<button type="button" id="leftButton" class="leftClassButton" name='leftClassName' onMouseOver="leftBotWinShine()" onMouseOut="botWinShineout()" onClick="closeLeftBox()">Close Me!</button>
</div>
</div>
<div id="vanishing">
<div id="blockBlue">
</div>
<div id="blockRed">
</div>
<div id="blockGreen">
</div>
</div>
<img src="images/images/rightPage.png" id="picOne">
<img src="images/images/leftPage.png" id="picTwo">
</body>
</html>
Thanks for your time and help, it is greatly appreciated.
slideDown() used for animate in some content which is not visible. Here your content is already visible so slideDown() seems not working although it is working but cannot be seen. To get animation you need to hide the element by changing css display:none or else add .hide() method before slideDown() like
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});
I am trying to implement code from here. I have tried adding necessary files links but still code is not working as expected.It should mover within the bound of container. But
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function() {
Draggable.get('.slide').applyBounds("#container");
});
#container {
display: block;
position: relative;
height: 200px;
width: 70%;
border: solid 1px red;
}
.slide {
display: block;
position: absolute;
height: 20px;
width: 20px;
background: red;
}
.green {
background: green;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script type="text/javascript" src="grabbb.js"></script>
<link rel="stylesheet" href="grabb.css">
<!-- <script type="text/javascript">
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function(){
Draggable.get('.slide').applyBounds("#container");
});
</script> -->
</head>
<body>
<div id="container">
<div class="slide one"></div>
</div>
<button>Change bounds</button>
</body>
</html>
Drag-gable item is not moving anywhere. Please help me finding the error. Thank you.
Console Errors:
Uncaught TypeError: Cannot read property 'applyBounds' of undefined
at grabbable.html:20
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
To make it work for you, connect these libraries that are on top:
var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();
Draggable.create('.slide', {
bounds: $('#container')
});
$(window).resize(function(){
Draggable.get('.slide').applyBounds("#container");
});
#container{
display: block;
position: relative;
height: 200px;
width: 70%;
border: solid 1px red;
}
.slide{
display: block;
position: absolute;
height: 20px;
width: 20px;
background: red;
}
.green{
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
<div class="slide one"></div>
</div>
I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<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>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
I've looked at other questions, with no success...
I'm just trying to keep the page scrolling slowly after load, follows the code:
CSS (Most of CSS is placed as embed files, this is just the styles applied to the content objects):
<style type="text/css">
.content {
width: 98%;
left: 1%;
margin-top: -10px;
}
.block_1 {
position: relative;
width: 18.5%;
height: 150px;
margin-left: 1%;
margin-top: 1%;
float: left;
background: #FFF;
border: 3px solid #999;
}
</style>
JS:
<script type="text/javascript">
$(function(){
$.slidebars({
siteClose: true
});
});
// Loading
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
});
$('html,body').animate({scrollTop: $('#end').offset().top});
</script>
HTML
<body>
<div class="loading">
<div class="loading_msg">Carregando dados, aguarde...</div>
<div class="loading_img"><img src="img/loader.gif" /></div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="300px"</div>
<div id="sb-site">
<div class="div_bg_header"><?php show_header_menu_dashboard($p_title); ?></div>
<div class="content" id="content">
<div class="block_1"></div>
<div class="block_1"></div>
...
<a id="end"></a>
</div>
</div>
</body>
Grateful
correct as
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
$('html,body').animate({scrollTop:$('#end').offset().top});
});
in your CSS please set some height to the body,
body {
height: 1500px;
}
and it will work well. current offset is just 16. so for visible scrolling
please add the following style.
#end {
margin-top: 500px;
display: block;
}
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>