CODEWITHSUNDEEP
javascriptjqueryhtmlcsslayout
Lumpy
Lumpy

Reputation: 3652

Stretch div as last resort

I am trying to create css to solve a problem with displaying a like button next to a page title. I have 3 cases.

Cases

My question: Is there a way to set up the div so when case 3 happens, the div grows and pushes the like button below the title but keeps the same functionality for cases 1 and 2?

Upvotes: 2

Views: 143

Answers (1)

P.Brian.Mackey
P.Brian.Mackey

Reputation: 44275

Dynamically remove the width when the word causes overflow. By removing width, you cause the button to move down and thus behave like options 1&2.

Check these divs dynamically with some jQuery/JavaScript to see if a word causes an overflow. 

//Javascript function to remove width class when overflow occurs.
//40em is an arbitrary width
    $.each($('.ConstrainedDiv'),function() {
        var wordregex = /\w+/g;
        var content = $(this).html();
        var wordArray = content.match(wordregex );
        for(var i = 0; i < wordArray.length; i++) {
            if(wordArray[i].length > 40) {
                $(this).removeClass('someWidth');//behavior changes if you remove this
                break;
            }
        }
    });

Fiddle. Note the difference in behavior by commenting out the marked line. Note2 resolution and fiddle box width matter.[Demo tested in FF7]

Upvotes: 3

Related Questions