CODEWITHSUNDEEP
jquerycssmedia-queries
ak85
ak85

Reputation: 4264

show content based on width of parent with css

IS it possible to show certain content with css based on the width of the parent div? I was thinking something along the lines of media queries but I don't want the whole device width just the width of the parent div.

I can do it with jQuery see fiddle (change the < to > to see different content), but was wondering if there was a way to do something similar with css3?

        <div id="parent">
            <div id="content">
            <table>
                <tbody>
                    <tr><td><span class="full">BAHRAIN</span><span class="abbrev">BHR</span></td></tr>
                    <tr><td><span class="full">BELGIUM</span><span class="abbrev">BEL</span></td></tr>
                    <tr><td><span class="full">EGYPT</span><span class="abbrev">EGY</span></td></tr>
                    <tr><td><span class="full">LITHUANIA</span><span class="abbrev">LTU</span></td></tr>
                    <tr><td><span class="full">SWEDEN</span><span class="abbrev">SWE</span></td></tr>
                </tbody>
                </table>
            </div>
        </div>

        <script>
        var w = $('#parent').width();
        console.log('width: ', w);
        if (w<200) 
        {
        $("#content").addClass("showsmall");
        }
        </script>

        <style>
        #parent {width: 300px;}
        .abbrev {display:none;}
        .showsmall .abbrev {display:block;}
        .showsmall .full {display:none;}
        </style>

Upvotes: 2

Views: 2428

Answers (2)

leoMestizo
leoMestizo

Reputation: 1499

This what do you want? DEMO. This is a solution using only CSS.

If you set the width literally, you won't able to leave to browser adjust the size automatically.

I changed a bit the markup with the object to make the example more easy:

<div class="parent">
    <div class="child">
        <span class="text">
            This is a normal text.
        </span>
    </div>
    <br />
    <div class="fixed-child">
        <span class="text">
            This is a text very laaaaaaaaaaaaaaaaaaaaaaaaaaaaarge!
        </span>
    </div>
</div>

Here's the CSS:

.parent > div {
    height: 50px;
    margin-top: .325em;
    border: 1px solid black;
    display: inline-block;
}

As you see, I set the height to make the example look better.

Be good, Leonardo

Upvotes: -1

Shaddow
Shaddow

Reputation: 3215

Your .width will never accept IF, because you set width in css to 200px

If you want to see it dynamic you shoud:

  • Replace width to max-width in CSS
  • Add .resize event

code:

$(window).resize(function () {
    var w = $('#parent').width();
    console.log('width: ', w);
    if (w < 200) {
        $("#content").addClass("showsmall");
    } else {
        $("#content").removeClass("showsmall");
    }
});

jsFiddle example

Upvotes: 2

Related Questions