I've got jQuery UI draggable div (near 10000 px width) and I want to make such constraints so the left side of draggable div won't go ahead of left side of screen and right side of div won't go off right side. I tried to show it on the picture.
It seems that rectangular constraints won't fit this case and I'm lost in that
To be more clear, here is example: http://full-demo.megaplan.ru/vacation/diagram/
There you can't go futher jan 2013 and before july 2007
You could add a container between my_DIV and the draggable and set that container's width to $('html').width() to make it as wide as the screen; then position the container so that it's position matches the screen. The result would be a <div> that matches the inner rectangle on your diagram. Once that's in place you could use the normal containment option to keep the draggable on-screen.
For example:
<div class="draggable">
<div id="container">
<p class="ui-widget-header">Draggable</p>
</div>
</div>
Then size and position #container and use this:
$("#draggable").draggable({ containment: "#container" });
Demo: http://jsfiddle.net/ambiguous/SG9KS/
Related
I have a simple div container block as below block that leaves a large gap at the top.
<div class="container">
...
</div>
I have tried adding different margin options such as mt-0, even mt-n5 (for negative margin), etc. but nothing seems to get rid of the top margin
<div class="container mt-0">
...
</div>
I'm trying to use JQuery UI Resizable in order to add resize handles to 4 Td tags in a Table.
My intention is for all td's to react to the resize and to be constrained in the table width, height. (pretty much what the resize handles used on JS Fiddle are doing)
Currently, the td's are not constrained to the table and although the handles work, if I use the handle on one side of the table, then use the second half of the handle, the second half of the handle will never go above the height (or width) I stopped at with the first half (this happens vertically and horizontally).
Here's my fiddle: http://jsfiddle.net/fdLkqv2L/
$("td").resizable({ handles: 's, e' });
Heres the fix man:
http://jsfiddle.net/fdLkqv2L/1/
The problem is the other cells height are not updated while resizing, and the <tr> height is the same as the highest height of its <td>s:
With this code you also resize all the siblings (all other <td>s in current <tr>):
$("td").resizable({
handles: 's, e',
resize: function (event, ui) {
$(this).siblings().height(ui.size.height);
}
});
I have some jQuery UI buttons that look like this:
How can I add vertical spacing between the rows? Modifying the CSS properties margin-top and padding-top didn't work.
Here is the HTML that exemplifies a single button:
<div>
<input type="checkbox" class="tool_toggle" id="tool_#" checked /><label for="tool_#">... tool name...</label>
... more inputs ...
</div>
This HTML input tag is simply repeated 11 times. The buttons wrap around as they should in the div container.
You can do it by setting line-height to the element that contains the buttons.
You need to specify that the buttons are display:inline-block before you can add margin-top or padding-top. This is because inline elements can not have top or bottom margins or padding.
You didnt post enough code to tell for certain so this is a guess. Post your CSS or make a http://jsfiddle.net/ if you want a proper answer
By default form elements (input) in jQuery Mobile span over the full width of the screen.
How can I make them fit to the size of their content ?
You can use data-inline="true" on buttons and selects to make them span to the width of their content.
I have to add image on the header and background I added header image using following code
<div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;">
the image perfectly fixed in the portrait but when the screen changed to the landscape, image not fixed perfectly there will be some blank space added after the image. So how to set the image same for both portrait and landscape screen orientation. This problem occur in Android,iphone ,blackberry ,etc. For more clarification please check the image header.
actually when set the width: auto or 100% is not working ,because the image has some fixed width for example I set image width as 360 px in portrait ,when change to the landscape the image width still same thats the problem. We can't set the width large for landscape because we can't say that all platforms landscape mode screen size is same. that may be varying in Android,iphone etc.
You can set a div tag to hide overflow, then set a regular img tag inside the div and set both to have a width of 100%...
<div data-role="header">
<a data-icon="arrow-l" data-rel="back" href="#" style="z-index:1001;">Back</a>
<div style="overflow:hidden; position:relative; width:100%; height:45px;">
<img src="test.jpg" style="width:100%; height:auto; position:relative;">
</div>
</div>
Some Notes:
the "height:auto;" sytle on the image can be removed if you are ok with distorting the aspect-ratio of the image when it scales.
the "z-index:1001;" style on the back button link is necessary because the header is given a z-index of 1000 (so the div around the image is also given a z-index of 1000 unless specified).