Here
is an example with jquery UI , Here is an example done with css3. The problem is the css3 will not work with any version of ie and I am looking to use an older version of jQuery UI -1.7.2 which I can't find. I'm using thhe older version because of the aging browsers we still support: IE 8,9 (recently dropped 7 finally).
I'm wondering if there are any other solutions available.
not sure what is not working
<html>
<head>
<title>resize</title>
<style>
#resizable { height: 250px; margin: 1em auto; width: 250px; }
h3 { text-align: center; }
</style>
<script src="code/ui/jquery.ui.core.js"></script>
<script src="code/ui/jquery.ui.widget.js"></script>
<script src="code/ui/jquery.ui.mouse.js"></script>
<script src="code/ui/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="code/demos.css">
<script type="text/javascript" src="code/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$("#resizable").resizable();
//alert("HODOR");
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">This is a resizeable window</h3>
</div>
</body>
</html>
Related
I downloaded everything from this link (version 1.12.1).
After that I unzipped everything. So here's the thing, I have Wampserver downloaded and I'm working on a project in PHP with it. I dragged all of those items to the folder where my other codes are located.
I'm not good at Javascript or jQuery, but I want to use its "draggable" UI to make a moving "button"/image on a horizontal axis (so the person can agree or disagree). So, basically, how do I do that? Here's what I'm trying:
<script src="jQuery UI/jquery-ui.js"></script>
<script src="jQuery UI/jquery-ui.css"></script>
<script src="jQuery UI/jquery-ui.min.js"></script>
<script src="jQuery UI/jquery-ui.min.css"></script>
<script src="jQuery UI/jquery-ui.structure.css"></script>
<script src="jQuery UI/jquery-ui.structure.min.css"></script>
<script src="jQuery UI/jquery-ui.theme.css"></script>
<script src="jQuery UI/jquery-ui.theme.min.css"></script>
<script src="jQuery UI/external/jquery/jquery.js"></script>
<style>
#draggable {
width: 200px;
height: 200px;
padding: 1px;
background-color: green;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({
axis: "x";
});
});
</script>
<br>
<div id="draggable" class="ui-widget-content">
<p>Text</p>
</div>
Could you please help by elaborating step-by-step for me?
Thanks in advance!
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
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!
I am new to jquery. I am trying to drag and resize a textbox using jquery. But i am facing some problems. I could drag and re-size the text box. But.. just look at the below screenshot.
To drag the text box, first i have to drag and move that "Edge" (showed in arrow mark), out of the box.
In all mean, it is not a good idea. So can somebody help me to simply drag the textbox?
below is my code
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Constrain movement</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" />
<style>
#containment-wrapper { width: 300px; height:300px; border:2px solid #ccc; padding: 10px; }
#custombox { width: 160px; height: 30px; padding: 0.5em; float: left; }
</style>
<script>
$(function()
{
$("#custombox").draggable({ containment: "#containment-wrapper", scroll: false }).resizable();
});
</script>
<body>
<div id="containment-wrapper">
<div id="custombox" >
<textarea></textarea> </p>
</div>
</div>
</body>
</html>
When i tried the code in jsfiddle.net, the textbox is non-dragable. Only resize is possible. But i copied the code to notepad and run it on chrome. Then the problem in the screenshot appeared.
After drag the edge outside the textbox, the box can be dragged to anywhere in the containment.
Check this
$(function()
{
$("#custombox").draggable({ scroll: false }).resizable();
});
Fiddle
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.