Adaptive size of jquery BS and dialog controls

Source: Internet
Author: User

The style is a little ugly. For this reason, I re-create a style. When I thought it was finished, I found that the work on IE was abnormal, and the self-adaptive size could not be achieved.

It used to require xhtml, while the company's products were html. To this end, we have studied the implementation of adaptive size.

It turns out that jquery is amazing to take the width and height. It turns out that it is directly taking the offsetWidth/offsetHeight attributes of element in the dom. When element is inserted into the dom, the browser calculates the corresponding attributes based on the rules. Here we copy several related attributes.

ScrollWidth is the width of the actual content of the object. The width of the content changes with the number of content in the object (the actual width of the object may be changed if the content is too large ).

ClientWidth is the visible width of the object. If the value of clientWidth is not set to the same side of the scroll bar, it will change with the display size of the window.

OffsetWidth is the visible width of the object. The package's scroll bar and other edges change with the display size of the window.

Difference between clientWidth, offsetWidth, and clientHeight...



IE6.0, FF1.06 +:
ClientWidth = width + padding
ClientHeight = height + padding
OffsetWidth = width + padding + border
OffsetHeight = height + padding + border
IE5.0/5.5:
ClientWidth = width-border
ClientHeight = height-border
OffsetWidth = width
OffsetHeight = height
(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)

Offsetwidth: the offset width of the element relative to the parent element. Equal to border + padding + width
Clientwidth: the visible width of the element. Equal to padding + width
Scrollwidth: Specifies the width of an element and includes the scrolling part.

The reason for the failure is studied. It turns out to be jquery. the alerts control contains all Divs. For simple HTML in IE, the width of the div does not seem to increase according to the internal content. The size of the div is as large as the size of the content, in this way, the obtained offsetWidth is very large, and the adaptive size is not implemented. Of course, you can use offsetWidth for XHTML.

After reading the EXT implementation method, it is much more intelligent. The internal content uses the el with the change of content size, such as span, so that the offset attribute is true, add the Interior el widths, including padding and border, to calculate the total width of the outer layer.

Although I want to simply use xhtml, I cannot. Still learn EXT, although troublesome, but reliable.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.