Geek asks and answers

The background image of the page is moved and stretched using a collapsible set in jQuery mobile 1.4.0

I have build in jQuery mobile app, the problem is that when I added the background image for the page, when I expand, close the folded background image, stretching and moving with collages. When I deleted these lines from my css:

background-repeat: no-repeat; 
background-size: 100% 100%;

this span solved, but it caused another big problem, which is that when I expand the disassembly and then close it, the background will shrink "move up with the help of collapse", and the part of the page under this folding becomes transparent without the background "this happens on mobile devices more than jsFiddle, this is my jsfiddle

Please help me how can I solve this problem. So, can collapse problems be expanded and closed without affecting the background image of the page?

+2
source share
1 answer

You can adjust the size of your content to the size of the device using javascript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

Updated FIDDLE 

$(document).on("pageshow", function(){
    SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    //if you have a page header
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    //if you have a page footer
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);   
}
+1
source

More articles:


All Articles