CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobilejquery-mobile-button
klefevre
klefevre

Reputation: 8735

How to create a button constraint to right screen with JQueryMobile

I'm very new to JQueryMobile and the web in general.
How can I position a button constraints to the right which fills the height of the screen.

Here is an illustration of what I want to achieve :
enter image description here

All content (logo + text) should be in the <div data-role="content">, (or maybe not?). Once again I'm very new to this platform.
Any idea on how to do this ?

Upvotes: 0

Views: 413

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/XF6NV/

HTML : 

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <fieldset class="container_12">
                    <div class="grid_11">
                       Put your content here
                    </div>
                    <div class="grid_1"><a data-role="button" id="custom-btn">></a></div>                  
                </fieldset>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>    
    </body>
</html>

Javascript : 

$(document).on('pageshow', '#index', function(){     
    //Remove button corners
    $("#custom-btn").buttonMarkup({corners: false });    
    // Set content height to full availabe, normaly content will only be high as its content
    $('[data-role="content"]').height(getRealContentHeight());

    // horizontaly center button text
    $('.ui-btn-inner').css({
        position:'absolute',
        top: (getRealContentHeight() - $('.ui-btn-inne').outerHeight())/2
    });    
});

// Used to determine real availabe content size    
function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height - 1;
}

CSS : 

 /* remove content padding */
.ui-content {
    padding: 0 !important;
}

#custom-btn {
    margin: 0 0 !important;
    height: 99.7%;
    width: 100%;
}
/* Set grid height to be full 100% of content height */
.container_12, .grid_1, .grid_11 {
    height: 100% !important;
}

Additional frameworks:

Fluid960 for jQuery Mobile - Used as a better 3rd party grid then official jQuery mobile one. We need it to move button to the right side.

Upvotes: 1

Related Questions