CODEWITHSUNDEEP
javascripthtmlcsssafarimobile-safari
user1895217
user1895217

Reputation: 43

Width of parent container of floated elements in safari

I'm having an issue with the width of a div containing 2 floated elements in safari.

One of the floated div's has it's width set to 0, and is expanded with jquery on a click event. The parent container in safari retains the width of both divs, even when the width is set to 0.

There is an example of this here, working in everything but Safari. http://jsfiddle.net/XUR7R/6/

HTML:

<div class="item-list">
    <ul>
        <li class="article">
              <div class="column">
                  Column 1<br/>
                  <a href="#" class="expand">toggle</a><br/>
              </div>
              <div class="column expandableColumn">
                  Column 2 content
              </div>
        </li>                        
    </ul>
</div>

​ CSS

.item-list{
overflow:hidden;            
}

.article{
float:left;
overflow:hidden;
background:#555;
padding:5px;    
}

.column{
float:left;
height:100px;
width:100px;
background:red;    
}

.expandableColumn{
width:0;        
}​

Javascript

$(document).ready(function() {

$('.expand').click(function() {
    if ($(this).hasClass('.expanded')) {
        $('.expandableColumn').animate({
            'width': '0px'
        });
    }
    else {
        $('.expandableColumn').animate({
            'width': '100px'
        });
    }
    $(this).toggleClass('.expanded')
});

});​

Upvotes: 4

Views: 356

Answers (2)

Joel
Joel

Reputation: 5450

I was able to get it working by expanding and collapsing the li wrapper at the same time:

$(document).ready(function() {

$('.expand').click(function() {
    if ($(this).hasClass('.expanded')) {
         $('.article').animate({
            'width': '100px'
        });
         $('.expandableColumn').animate({
            'width': '0px'
        });
    }
    else {
         $('.article').animate({
            'width': '200px'
        });
         $('.expandableColumn').animate({
            'width': '100px'
        });
    }
    $(this).toggleClass('.expanded')

})

});​

here is the fiddle http://jsfiddle.net/AnjXH/

Upvotes: 0

Jason
Jason

Reputation: 3360

I don't know if this is something you're going to want to do, but visually it works.

HTML

<div class="item-list">
    <ul>
        <li class="article">
              <div class="column">
                  Column 1<br/>
                  <a href="#" class="expand">toggle</a><br/>
              </div>
              <div class="column expandableColumn">
                  <p>Column 2 content</p>
              </div>
        </li>                        
    </ul>
</div>
​

JS

$(document).ready(function() {
            $('.expandableColumn p').hide();

    $('.expand').click(function() {
        if ($(this).hasClass('.expanded')) {
            $('.expandableColumn').animate({
                'width': '0px'
            });
            $('.expandableColumn p').hide();
        }
        else {
            $('.expandableColumn').animate({
                'width': '100px'
            });
            $('.expandableColumn p').show();
        }
        $(this).toggleClass('.expanded')

    })



});​

I wrapped the Column 2 text with a <p>, then added a hide() and show() (you could do toggle or whatever too this was just done quick), to fire while you're changing the width of the other div.

Seems to work how you wanted it in Safari.

Here's the fiddle.

Upvotes: 1

Related Questions