CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
user1010101
user1010101

Reputation: 1658

CSS footer div won't hide

In this sample app I have a header , footer and the content div contains a table which holds various stats of some basketball players.

I was having a problem with the footer when i have a lot of entries in the table. What ends up happening is that the footer will block the other entries as displayed in the picture below.

enter image description here

Then when i click in the middle the footer disappears as shown in picture below.

enter image description here

I was wondering if there is generic way where i can check to see if there are a lot of entries then dont show the footer at all? or is there some way around this problem? Please advice i am new to web dev and dont know much css tricks.

Here is the FIDDLE.

This is roughly what i want to achieve, however i am not sure if its the best solution so i am open to all suggestions.

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

Upvotes: 0

Views: 382

Answers (4)

ezanker
ezanker

Reputation: 24738

I think the best solution for you is to remove the data-position="fixed" on the footer as suggested by others, but then also add some javascript that sets the min-height of the content div according to device height. That way for a small number of rows in the table, the footer still appears at the bottom of the screen. As the number of rows increases beyond the device height, the footer just gets pushed down remaining below the table.

Below, the SetMinHeight function calculates the minimum height for the content div that would fill the given device height. Then you call it on pagecontainershow and whenever the window resizes or the orientation changes:

$(document).on("pagecontainershow", function () {
    SetMinHeight();
});

$(window).on("resize orientationchange", function () {
    SetMinHeight();
});

function SetMinHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

Updated FIDDLE

NOTE: for the calc to work, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If you really need the zoom, you may have to adjust the min-height calculation...

Upvotes: 1

khan xada
khan xada

Reputation: 175

try this: 

$(document).ready(function(){
    var tablerow = $("table tr").length-1;
    if(tablerow>20)
    {
        $(".ui-title").hide();             
    }
    else
    {
        $(".ui-title").show();     
    }
});

Upvotes: 0

user1743227
user1743227

Reputation:

Well, you can check the number of rows in that table with something like this: 

var rowCount = $('#myTable tr').length;

Then add a condition such as if rowCount > 5, you can add a hidden class to the footer.

A hidden class can be something like this:

.hidden { display: none; }

So basically, 

if(rowCount > x) { $('.footer').addClass('hidden'); }

Upvotes: 0

Fillip Peyton
Fillip Peyton

Reputation: 3657

The footer shouldn't be fixed:

http://jsfiddle.net/fmpeyton/L2vQ3/

Remove data-position='fixed' from this line:

Upvotes: 0

Related Questions