I have some divs on my page that are made both resizable and draggable using jQuery UI. When I call html() on those divs, I get not only the content of the div, but also some extra content inserted by jQuery UI when I made them resizable:
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
text() works for retrieving the current text, but when I try to set the content using $("selector").text("new text"), it replaces the jQuery UI code, making the div not resizable anymore.
How can I just get/set the text, not the jQuery UI resizable code?
You could try to make another div within that div which holds the content and has 100% width and height, then make the parent div resizable.
Related
How can I load a external html page in a div?
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<!--Load nav.html here-->
</div>
...
I have tried with following code but it doesn't function.
$( "#myPanel" ).load( "nav.html" );
See: http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html
The panel is expecting some markup as content, not a whole HTML page.
This will load Your navigation listview inside the panel:
$(document).on('panelcreate', '#myPanel', function () {
$(this).children(".ui-panel-inner").load("nav.html ul", function() {
$(this).enhanceWithin().trigger("updatelayout");
});
});
The full-width listview is requiring some additional CSS:
/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
margin-right: -10px;
}
EDIT:
To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.
In one word, instead of <!--Load nav.html here--> write <div>...</div>.
i'm applying jquery sortable on list of divs below is my code
<div class="area_options">
<div class="area_top"><p>At the bar</p></div>
<div class="area_list"><p>Appetizers</p></div>
<div class="area_list"><p>Beverages</p></div>
<div class="area_list"><p>Cocktail</p></div>
</div>
I want to make area_top div fixed which is heading of container.And apply sortable on the base of are_list div only.
Now sortable working fine and are apply also on area_top div.
How i can make area_top div fixed?
Thanks
You need to set the option items of the sortable() to .area_list
The documentation of the property here says:
Specifies which items inside the element should be sortable.
EDIT: With your current html, the javascript would be like this :
$(".area_options").sortable({ items: ".area_list" });
I am trying to add some buttons into my jquery mobile page via ajax.
Straight injection into the page doesnt style it at all.
Trying this also does not work (doesnt get styled)
$('Next').appendTo('#page_btns').trigger('create');
Here is the code for its div
<div data-role="controlgroup" data-type="horizontal" id="page_btns"></div>
How can I add/remove grouped buttons via AJAX using jquery mobile?
EDIT: Calling .trigger('create') on the controlgroup div does style the buttons, but they are set to single buttons rather then the grouped style
Trigger create event on any div enclosing the controlgroup.For eg:data-role=content div.
Add the following line of code after you append buttons to div
$('div[data-role=content]').trigger('create');
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/
I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">