开发者

SO tag-editor calculating width of input

I'm creating a similar tag editor like SO and it's working pretty well i must say. The only thing that is giving me some problems is calculating the width of the textbox after a user selected a tag.

With every tag a user adds i recalculate the width of the 开发者_Go百科input field next to it but i can't seem to get it right.

I have 2 divs next to eachother. The left div contains the tags, the right div contains the input field.

Can someone tell me how SO does it or tell me how i could calculate the width of a div? (Assume the div with the tag only holds plain text + the delete tag image)

Edit:

I have the complete editor working in a similar way as SO does it. The only thing i am struggling with is resizing the input field after a user added a tag (or removed one).


Is something like this what you might be looking for, albeit very simple:

Working Demo

It just uses the image within the tag to store the delete button, and has a slight margin to keep some space between the text and the image. The tags are floated to stay away from each other as well.

You can find the classes that SO uses for it's buttons by checking out the source:

.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}

a.post-tag:hover, .post-text a.post-tag:hover, .wmd-preview a.post-tag:hover {
    background-color: #3E6D8E;
    color: #E0EAF1;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    text-decoration: none;
}

You should be able to get the widths by using jQuery or javascript:

//jQuery
var width = $('#yourTag').width(); //or $(this).width();

//javascript
var tag = document.getElementById('yourTag');
var width = tag.width  // or tag.clientWidth


Well you know your initial widths and if you wrap the tags you add inside a <span> or something like that, you can get the width of that tag. So every time you add a tag you substract the width of that tag from the initial widht of the container div.

I don't know if that's the way it's done here, but it seems a nice approach.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜