CODEWITHSUNDEEP
javascriptcssdomblackberry
Wayne Ashley Berry
Wayne Ashley Berry

Reputation: 539

Changing CSS on Blackberry

I have the following piece of code, inspired by twitter bootstrap. It works perfectly on everything except the Blackberry Curve 8200.

It's basically to open and close navigation.

The events are triggering, the state is being picked up correctly but when I adjust css nothing happens :( I've tried adding and removing classes instead, same problem.

The collapsed element does display correctly if i add a style attribute to it manually as well.

$('[data-toggle="collapse"]').bind('click', collapse);

function collapse (e) {
    var $this = $(this);
    var target = $this.data('target');
    var state = $this.data('state');
    if ( ! state ) state = 'closed'; 

    if ( state === 'closed' ) {
        $(target).css('height', 'auto');
        $this.data('state', 'open');
    } else {
        $(target).css('height', '0');
        $this.data('state', 'closed');
    }
    return false;
}

It basically seems like the following line

$(target).css('height', 'auto');

just isn't doing anything. Even though the target variable is correct.

My html essentially looks like this

<style>
    .nav { height: 0; }
</style>
<div data-toggle="collapse" data-target=".nav">...</div>
<div class="nav">...</div>

-update-

I was using zepto, just tried with jQuery... same problem.

Upvotes: 0

Views: 220

Answers (1)

DA.
DA.

Reputation: 40697

Is this OS5 or OS6? If OS5, there are all sorts of defects with the browser supporting DOM re-rendering. height: auto being one of them. The solution I've used is to show them on page load, measure then cache their original height via a data-* attribute, then collapse them all. That way when it's time to show them, instead of auto I can give an exact pixel dimension.

Upvotes: 1

Related Questions