resizable attribute of jquery is not working - javascript

I have written a code for image drag and resizing with jquery.
i can drag the image but i am unable to do image resizing .PLease help me what mistake i have did in resizing.
I have written my code below.
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$("#action").resizable({
handlers: "all",
ghost: true
});
});
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themses/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<div id="limits">
<div id="action">
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img.jpg" class="image">
</div>
</div>

remove s from themses in jquery-ui.css link
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically resize image</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$(".image").resizable({
handlers: "all",
ghost: true
});
});
</script>
<style>
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="limits">
<div id="action" style="display:inline-block"><img src="http://www.w3schools.com/images/w3schools_green.jpg" class="image"/></div>
</div>
</body>
</html>

Instead of taking div ID take image ID.
HTML
<div id="limits">
<div id="action"><img id="idDragImage" src="/home/cp/Desktop/jquery/index.jpeg" class="image"></div>
</div>
Take the element with id. following way
JS
$(document).ready(function() {
$("#idDragImage").draggable({cursor:"move",containment:"parent"});
$("#idDragImage").resizable({handlers: "all",ghost:true});
});

Related

Javascript Affecting Image Position

I have an image and a line of text on top of a blue box, all fading in with JavaScript. If I don't use any JS, I can center the image without any problems. But as soon as the JS is used, the image does not center anymore. However, the line of text does. Why does this happen?
Here are the code samples:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>
Velocity is setting your element's CSS display property to inline. Explicitly specify the fadeIn should set the display to block on your #img element:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500,
display: "block"
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>

Cannot select element in JQuery and execute simple event

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>

JS/CSS Slide effect works in fiddle, not in html

My first problem was about the fiddle not working. Now it works, but if I copy it into my brackets file it doesn't work anymore. I did include the link that I placed in the external resource.
Here's the fiddle: https://jsfiddle.net/wtbdxx2b/6/
And the html;
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="site3.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="site3.js"></script>
</head>
<body>
<button class="trigger">
click
</button>
<div class="content">
hello
</div>
</body>
</html>
the css;
.content {
position: absolute;
width: 100%;
height: 10%;
bottom: 0;
left: 0;
background-color: #000;
color: #FFF;
transition: all 1s;
}
.content.open {
height: 90%;
}
and the javascript;
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Put
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Inside
$(document).ready(function(){
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
});

How to move other elements on jQuery animation

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

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

Categories