CODEWITHSUNDEEP
javascriptjquerycss
user3454730
user3454730

Reputation: 281

centering a div with dynamic width using javascript/jquery?

I have a div with absolute position which has a dynamic width width:auto; in the css style.

the content of this div is dynamic texts... which means whatever I type into an input field, it will be displayed inside this div.

when the div is empty or has only a 2-3 letters inside it, it is centered... but when there are more letters or words inside the div, the width of the div expands to show the contents and this will make the div to not to be centered anymore..

I did try text-align:center; in the CSS style and this did not work. I also tried margin: 0 auto;.

Is there any way using javascript or jquery to calculate the content of the div and center it accordingly?

OR

is there anyway, to expand the Div both right and left ways so the middle of the Div is always centered? as currently the Div expands from the right side only as there are more letters in it!

Here is my CSS for this dynamic div:

#BOTtext{
    position: absolute;
    width: auto;
    height: 16px;
    left: 47%;
    top: 140px;
    z-index: 1000000000;
    background-color: #f7f7f7;
    margin: 0 auto;
}

Thank you in advance.

Upvotes: 3

Views: 1563

Answers (4)

SajithNair
SajithNair

Reputation: 3867

Check this http://jsfiddle.net/AyBtT/

Javascript

$(function () {
    $("#txt").keyup(function () {
        $("#BOTtext").html($(this).val());
        adjust();
    });
    $(window).resize(adjust);
    adjust();
    function adjust() {
        $("#BOTtext").css("left", ($(window).width() - $("#BOTtext").width())/2);
    }
});

HTML

<div id="BOTtext">Type in the text field</div>
<input id="txt"/>

Upvotes: 3

Pravin W
Pravin W

Reputation: 2521

Hi You might be looking for this

HTML

<div class="wrapper">
<div id="bot">Hello Woroorerer </div>
</div>

css

.wrapper{
    position:relative;
    border:1px solid red;
    width:450px;
}

#bot{
    position:absolute;
    left:50%;
    border:1px solid green;
}

jQuery

var botWidth = $('#bot').width();
var shift = botWidth/2
$('#bot').css("margin-left",-shift)

jsfiddle: http://jsfiddle.net/pu4A6/

js needs to be modified as per your requirement whether on window load etc

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123418

try with a negative transform: translateX

#BOTtext{
    position: absolute;
    top: 140px;
    left: 50%;    
    height: 16px;
    z-index: 1000000000;
    background-color: #f7f7f7;

    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);

}

Example on codepen: http://codepen.io/anon/pen/isDHa/

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

With positioning absolute/fixed you need to apply some fixed width, width auto won't work.

To be tricky, you could use min-width:

#BOTtext{
    position: absolute;
    width: auto;
    min-width: 200px;
    height: 16px;
    left: 47%;
    top: 140px;
    z-index: 1000000000;
    background-color: #f7f7f7;
    margin: 0 auto;
}

Upvotes: 0

Related Questions