jQuery resizable issue if applied to child element of a resizable - javascript

Here is my complete code, which is derived from jQuery Resizable Example -
In my example I have two div elements, with id parent and child, where child element is inside parent element. My Problem is I am not able to resize parent element, even I have made it resizable. Has anyone faced the similar issue?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/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.4/jquery-ui.js"></script>
<style>
#parent {
padding: 40px;
width:400px;
height:400px;
}
#child {
width: 150px;
height: 150px;
}
</style>
<script>
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
</script>
</head>
<body>
<div id="parent" class="ui-widget-content">
<h3>Parent</h3>
<div id="child" class="ui-widget-content">
<h3>Child</h3>
</div>
</div>
</body>
</html>
NOTE
Playing with the code, I just found out, this problem only occur is I make child element reseizable before parent element. As in code -
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
If I change the order to -
$(function() {
$( "#parent" ).resizable();
$( "#child" ).resizable();
});
it will work smoothly. I am not sure why it is happening.
I will try looking into jQuery resizable code but if someone already have faced and solve this issue it will be very helpful.
-Thanks

A ticket has been opened about this on jQuery bugtracker (ticket #7711), but as you can see, it was considered has "not a bug", specifying the work-around you found by yourself as a solution:
As a work-around, initialize the outer/parent resizable first and both are resizable

Related

Load removed div element on click

I have two following div elements:
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
The div called 'geolocation-common-map' is removed using jQuery when the page is loaded. I would like to know how can I load this div again after the div 'staticMap' is clicked. So far I have following jQuery, but I need to replace .show() function.
$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
$('.geolocation-common-map').show();
$('.staticMap').remove();
event.preventDefault();
});
Any ideas how to do this?
Thank you in advance.
According to detach documentation:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
You can use it as follow:
var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');
$('.staticMap').on("click", function(event) {
dv_geolocation_common_map.insertAfter(dv_staticMap)
dv_staticMap.detach();
event.preventDefault();
});
.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
Instead of remove(), try toggle():
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
<script>
$(document).ready(function() {
$('.geolocation-common-map').hide();
$('.staticMap').on("click", function (event) {
$('.geolocation-common-map').toggle();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#geolocation').hide();
$("#staticMap").click(function(){
$('#geolocation').show();
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div id="staticMap" class='staticMap selected'>Static Map</div>
<div id="geolocation" class='geolocation-common-map highlight'>Geolocation Map</div>
</body>
</html>
Adding id to your your static div or changing the id to class in jquery will do your work.you are using staticMap as id but it is not defined in div.

Alerting after resizing an element

How do I put an alert message just after am done re-sizing an element? That is, after the element has been re-sized.
resizeend() method not working.
check below link with
$( $clone ).resizable({
stop:function(){
hello();
},
});
check below link for more , which uses jquery ui for resizing and invoking javascrip after resize occurs
Fiddle
html content
<div class = "resizethis">
resize this widget
two js libraries
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
one css
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
javascript content
$('.resizethis').resizable({
stop: resizestopped
});
function resizestopped(){
alert('resize stopped');
}
css
.resizethis{
width: 100px;
height: 100px;
border: 2px solid red;
}

How to stop an image disappearing with the div it's in?

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

Can't drag a textbox properly using 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

Toggle onClick jquery

I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<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>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});

Categories