CODEWITHSUNDEEP
javascriptjqueryhtmlcsswidth
toms
toms

Reputation: 515

increase element width using jQuery or JS

So I have multiple elements with class name ml, all different widths because of different text contents (not set in CSS). for example:

<li><a class="depth ml" title="">Login</a></li>

I would like to append a new width to all of them, +=5px of the element's inner width

I've tried doing this, using jQuery:

var elems = document.getElementsByClassName('ml'); 
for ( var i = 0; i < elems.length; i++ ) {
    var num = 5;
    var curr_width = elems[i].width();
    elems[i].style.width=(curr_width+num)+'px';
}

Nothing happened.

I tried using offsetWidth and clientWidth

var curr_width = parseInt(elems[i].offsetWidth);

but it added almost 40px, which I don't know where those came from. There isn't even padding or margins on those elements.

I just want the element's inner width appended.

enter image description here

Can anyone suggest a solution, or see why the jQuery isn't working?

EDIT:

Here is the markup:

<body>
    <div id="master_container">
        <div class="container">
           <div id="body">
               <header>
                <div id="homelink"></div>
                    <div id="links" class="topmenulist">
                        <ul id="nav" class="title">
                            <li><a class="depth ml" title="home">Home</a></li>
                            <li><a class="depth ml" title="BBTV1">BBTV1</a></li>
                            <li><a class="depth ml" title="BBTV">BBTV</a></li>
                            <li><a class="depth ml" title="About us" style="">About us</a></li>
                        </ul>
                    </div>
               </header>

and the relevant CSS:

.depth {
    position: relative;
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    text-transform:uppercase;
    color: rgba(42,41,36,1.00);
}

.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

/*_______________ NAVIGATOR _________________*/

#links {
    position:relative;
    left:469px;
    top:80px;
    width: 489px;
    height:53px;
    padding:0px;
    padding-left:0px;
    z-index:9999;
}

.topmenulist #nav {
    list-style:none;
    padding:0;
    padding-top:10px;

}

.topmenulist #nav li {
    float:left;
    display:block;
    position:relative;
    text-indent:0px;
    margin-left:0px;

}

.topmenulist #nav li a {
    margin:0px;
    padding:0px;
    display:block;
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(41,17,3,0.60);
    text-wrap:suppress;
}

note: .ml has no css

Upvotes: 0

Views: 3279

Answers (2)

Varinder
Varinder

Reputation: 2664

Just to point out, you're using pure JS -which is very brave of you ;) anyway, with jQuery, you could try something like below: 

$(window).load(function() {
    $(".ml").each(function() { // this is kindof sugary way of doing for loop over array of elements - which is $(".ml")
         var $this = $(this); // the current jQueried .ml element
         var currentWidth = $this.width(); // get width of current element, width is a jQuery method: https://api.jquery.com/width/
         var newWidth = currentWidth + 5; // increment the width
         $this.width(newWidth); // pass in the new width as the parameter.
    });
});

Upvotes: 1

KokaKiwi
KokaKiwi

Reputation: 605

In your code:

var curr_width = elems[i].width();

resolve to an undefined value, because DOM object doesn't have width property (only jQuery object have this one).

So the next statement (curr_width+num) is incorrect because you want to add an undefined value with a number.

Upvotes: 0

Related Questions