I am making a sexual health app as part of a uni project. I have a form which is driving me crazy. I have realised that a common problem in jquery mobile is that fixed footers move to the middle of the page when the keyboard opens, I have fixed this problem with the follow JS
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea, select', function() {
$("div[data-role=footer]").hide();
});
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea, select', function() {
$("div[data-role=footer]").show();
});
This code fixes the problem with the keyboard perfectly, however, on the questions that require a select input from a range of answers (picture link below), as you cycle through with the left arrow key and answer each question the footer moves. The footer does not move is you cycle through and leave the answers at the default "choose one". It is very strange and probably a really easy fix that I don't know about so any help would be really appreciated.
PS. The green bar in the photo is the footer and not the header :P
Image link
http://imgur.com/olWSrfu
I'd use the onscroll event in your body.
Try it out, I think it's gonna fix your problem
I have a simple drag and drop situation at http://jsfiddle.net/stevea/zPPPV/3/. If you drag and drop the green box the drop handler clones the dragged object and insert it into the red box at the xy where the drop occurred. The green boxes have absolute positioning and the clone is given the offset at the drop point.
Dragging and dropping the box once works ok, but I can't drag and drop the the new box that was cloned and inserted, even though Firebug shows that it has the ui-draggable class.
Does anyone see the problem?
Thanks.
Apparently I need to show some code since I referenced a jsfiddle:
<div id="red">
<div id="box_green" class="green"></div>
</div>
There is no direct way to do this. Check this out.
$('#orangeBox').draggable({
opacity:'0.5',
helper:'clone',
revert : 'invalid'
});
$('#page').droppable({
accept:'#orangeBox',
drop: function( event, ui ) {
$(this).after($(ui.helper).clone());
}
});
DEMO
I found the answer. Once you clone an item and drop it - it is no longer bound to the draggable function, so changing the last line to
.prependTo('#red').draggable({opacity:'0.5', helper:'clone'});
does the trick.
Like stated in the title, I got the problem when I click on some slice of pie. I call function, which displays hidden div with the second pie. It appears correctly, but then I cannot click on that first pie and even tooltips are not displaying. And the second pie is all black, but that is the lesser problem, I think... Thanks for advices in advance!
Here's your fiddle with my changes: jsFiddle.
To fix hover and click events on first chart, I've deleted position: relative of second container.
To fix issue with black colors, I moved colors declaration into Highcharts.Chart({...}). Otherwise, you'll re-rewrite Highchart colors while creating the second chart.
I have been googlgling around and it seems I don't get any answer :/
I'd like to know how can I make sure that the dialog title will "stick" to the top of the document even if I've scrolled down in the main page?
I tried the option "position" top, bottom but with no luck.
Thanks for answering!
Finally I come up with the solution:
Using the "open" event to trigger the window.scrollBy(0,window.innerHeight - dialogHeight);
$("#open").click(function (){
$("#dialog").dialog({
open:function(){
window.scrollBy(0,window.innerHeight - 850);
},
modal:true,
width:850,
height:850
});
});
This will ensure the title of the dialog will be shown at first rather than the bottom part.
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.