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
Related
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 have made this site/webapp and you can drag the onion out of the white space it's in and onto anywhere on the page but, when you click the button at the left side it disappears when the rest of the div it was/is in. How can I make it not disappear when the user drags it out of the white box?
I used jQuery to make it slide out and in:
$( "#button" ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
and this html to make it work:
<button id="button"><-></button>
<aside class="ingredients" id="toggle">
<section class="center">
<section class="onion" id="draggable"></section>
<section class="butter"></section>
</section>
</aside>
The sections use background images to make them appear:
.onion {
background-image: url(onion.png);
margin: 20px auto -300px auto;
}
.choppedonion {
background-image: url(choppedonion.png);
}
Try this in-built JQuery option for dragging.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draggable </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>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
find relevant documentation here
I'm trying to show a popup when the mouse is over "a" element.
The problem is that I want to keep the popup when the mouse is over the popup element but the popup disappear when the mouse is over it.
The popup is just under the <a> element (on the display).
This is my code
HTML:
<ul>
<li>
<a id="test">
<div>
Some text
</div>
<div id="popup">
<ul>
<li><a>text0</a>
</li>
<li><a>text1</a>
</li>
</ul>
</div>
</a>
</li>
<li> TEXT
</li>
</ul>
CSS:
#popup {
display:none;
}
#test:hover #popup {
display:block;
}
I tagged the question 'JAVASCRIPT / JQUERY' because if there is a solution with them, it would be welcome.
EDIT
THIS IS ACTUALLY MY CODE, and it doesn't works
Before your start coding take a look at jQueryUI Tooltip (http://jqueryui.com/tooltip/ ).
It does what you want with minimal programming requirements.
From the doku:
Customizable, themeable tooltips, replacing native tooltips.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</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>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>Tooltips can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
ThemeRoller
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
#popup {
display:none;
}
a:hover + #popup {
display:block;
}
Try this should work.
jsfiddle
If you really wanna make a nice popup use this:
http://getbootstrap.com/2.3.2/javascript.html#popovers
If you're not looking to use jQuery, you can make the div a child of the a tag and use some css trickery to make it all work (http://jsfiddle.net/TMBGm/):
<a>some text<div>popup text</div></a>
a {
position: relative;
}
a div {
display: none;
}
a:hover div {
display: block;
position: absolute;
}
The adjacent sibling selector is perfect for this example:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/G4hd9/
Article: http://css-tricks.com/child-and-sibling-selectors/
This will keep the popup active while the user is hovering it if the element is not related, otherwise if its a child of the element it won't lose focus.
#popup:hover {
display:block
}
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.
I want to create a contextmenu of a div tag to append some contents into it.
But when i right click many times continuously,my div tag contains more contents than i want.Here is my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
#MyMenu{
position: absolute;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});
});
</script>
</head>
<body>
<div id="container">
</div>
<ul id="MyMenu">
<li>Add</li>
<li>Delete</li>
</ul>
</body>
</html>
For example,if i right click 5 times continuously,in my div will contain 5 lines "My Content" although i only want 1 line.Can anyone explain why and solution for me?Thank a lot!
Try (See DEMO):
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
});
$('#add').click(function(e){
var ContentToAppend='<p>My Content</p>';
$('#container').append(ContentToAppend);
});
});
The deal is that in your version you bind to #add element click event hendler each time user open context menu. So after 5 times it heppens there will be 5 click event hendlers, so if you then click on #add element you add '<p>My Content</p>' string to #container element 5 times.