I am trying to make this widget work in my application - http://jqueryui.com/autocomplete/#combobox
I am only trying to make the example work as is. I did have to change the button widget initialization to match the latest version of jQuery, but haven't changed anything else. This is the part I removed:
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
It was replaced with:
.button({
icon: "ui-icon-triangle-1-s",
showLabel: false
})
I don't understand why the "Show all" button is not visible. It is there, with a width of 0. On changing the width manually, the button icon is not visible. What am I missing?
Here is a fiddle: Autocomplete Combobox
Add the proper CSS:
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
And then the code you supplied works: https://jsfiddle.net/Twisty/dL2uqwem/
Or in your code header:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Related
I have set up a slider with jquery ui. I want the handle of the slider to be hidden initially and only show up, after the user clicks on the slider. I managed to hide the handle by setting display to none in the ui-slider-handle class. However, I am not able to change it back later on.
Consider the following code snippet, based on https://api.jqueryui.com/slider/ example.
$(function() {
$("#slider").slider({
start: function() {
$(".ui-slider-handle", this).show();
}
});
var sw = $("#slider").slider("widget");
$(".ui-slider-handle", sw).hide();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>
Yes, you can hide the handle with CSS, to make it appear again would just mean over riding the CSS with an element style:
$(".ui-slider-handle").css("display", "block");
The example above is a bit more specific, yet essentially does the same thing. Once the Slider is initialized, you can call the widget method to access the various elements. We can use .hide() on the handle. When the User clicks on the Slider, this triggers the start event and we can .show() the handle at that time.
If you have multiple sliders, the ui-slider-handle class might be too ambiguous, so using the selector context will help.
Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).
See More:
https://api.jqueryui.com/slider/#method-widget
https://api.jqueryui.com/slider/#event-start
https://api.jquery.com/show/
https://api.jquery.com/hide/
https://api.jquery.com/jquery/#selector-context
I have a slideshow plugin called flexslider which is only displayed after the page has fully loaded and all images have been downloaded.
I also have an anchor tag on this page which is being invoked before the page has fully loaded.
This is causing the anchor tag to be in the wrong place as the page height has changed to accommodate the slideshow.
You can see what I mean here: http://ypc.org.au/ministries/form#transform2015
I've duplicated the page and removed the slideshow and it seems to work but I need it working with the slideshow:
http://ypc.org.au/ministries/form2#transform2015
Can someone suggest how I could make the anchor tag load only after the page has fully loaded? Or is there something simple I am missing?
Thanks!
Edit:
I think this might be how flexslider is loading the page:
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
This is probably your solution. Use this jQuery code.
<script type="text/javascript">
$(window).load(function() {
$(".your-anchor-tag").fadeOut();
});
</script>
I had the same problem, because i was using a slideshow, and because of other responsive elements so i can't determine the height of the images for example.
You can use a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also (if you have a sticky menu bar you can make this space bigger).
$(document).ready(function() {
if(window.location.hash) {
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 20
}, 500);
}
});
If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).
I can set an explicit width on the second dialog, but this isn't ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.
Note that I've only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).
Does anyone have any idea how to auto-size the second dialog? Thanks.
EDIT
Some code added as suggested:
<div id="dialog-top" title="Tab data">
<form>
...lots of stuff, including id 'addCodeButton', which
...pops up the second dialog
</form>
</div> <!-- dialog-top -->
<div id="dialog-add-code" title="Code selector">
<select id = "codes" ...etc... >
...
</select>
</div>
$(function(){
$('#addCodeButton').click(function(){
// problem: this 'open' will not set the width of the new dialog
// wider than 'dialog-top' unless an explicit width is given
// (see '460' below)
$('#dialog-add-code').dialog('open');
return false;
});
});
var $dialog = $("#dialog-top").dialog({
autoOpen: false,
modal: true,
buttons: {
...
}
});
$('#dialog-add-code').dialog({
autoOpen: false,
width: 460,
modal: false,
buttons: {
...
}
});
I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.
http://jsfiddle.net/brettzink/NASyR/
you tried .dialog({width:"auto"}); ?
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 am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.
You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.
If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.
Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).
I tried several different things. autoHeight: false by itself did not work. This is what finally worked for me:
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
});
I'm using this in a SharePoint content editor webpart with a fixed width, which added to the height issue when adding content to the accordion widget.
using this combo options works for me, 1.current version of jquery/ui
$( '#x' ).accordion({
autoHeight: false,
clearStyle: true
});
I faced similar problem, for me the following change in CSS worked.
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.
jQuery("#accordion").accordion(
{
autoHeight:false
}
);
Having heightStyle: "content" helped resolve my issue.
Reference: Accordion
I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
For those lazy few who don't want to click, the short answer is:
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
in the accordion's CSS
try this
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion
I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.
.ui-accordion .ui-accordion-content{
height:auto!important;
}
This works for me:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}
I tried
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
but I saw some visual artifacts with first tab. So I fixed the problem this way:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>
Check if the padding for the ui-accordion-content is being overridden.
I experienced the same issue when I had put the following in my css:
.container .ui-widget-content {
padding-right: 3%;
}
I changed it as shown below and the scroll bars were gone!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
I don't have auto-height turned on either.