CSS enhancements in Internet Explorer 6

xiaoxiao2021-03-06  37

CSS enhancements in Internet Explorer 6

Release Date: 1/17/2005

| Update Date: 1/17/2005

Lance SilverMicrosoft Corporation

Summary: This article describes the enhancement support provided by Microsoft Internet Explorer 6 or higher to the Cascade Style Table (CSS) specification.

Prerequisites: This article assumes that you are familiar with HTML and CSS.

To see the examples in this article, Internet Explorer 6 or higher must be installed on the system. You can download Internet Explorer 6 from http://www.microsoft.com/windows/ie/default.htm.

This page

Introduction! Doctype "Switch" Who moved my canvas inside the box? Other properties More property values ​​are more stringent style sheet analysis and more new features?

Introduction

Microsoft® Internet Explorer 6 and later supports some earlier Internet Explorer that does not support CSS features. Supported two additional CSS properties for MIN-Height and Word-spacing. Several other possible values ​​are also supported, including the pre-value of the White-Space property, and the list-item value of the Display property. Other important functions include more stringent style sheet analysis, and change which HTML elements can represent the document content to be presented to the outermost surface therein.

These enhancements are designed to comply with CSS specifications. All properties, values, and features defined in CSS are supported by the Level 1 (CSS1) specification, including how to define how to measure and format settings for metrics and their associated margin, border, and padding properties.

But the true advantage is that even if all of these enhancements, no significant compatibility issue between your earlier version Internet Explorer developed.

Back to top

DOCTYPE "Switch"

This section describes how to use it in documentation for Internet Explorer 6 or later! DOCTYPE declarations to open compliant standards.

! DOCTYPE statement is a standard universal tag language (SGML) declaration that specifies the document type definition (DTD) complied with document (theoretical). It looks like an HTML tag without end tags, but it starts with an exclamation mark (!) And contains just a single tag, not the attribute name value pair. This statement must be on the beginning of the document and in front of the HTML tag.

By including! DOCTYPE declarations in the document, you can open a standard mode. Label specifies the unique name of the DTD, which can be attached to the version number of the DTD. Definition Specifies the definition of DTD specified in Label. The URL specifies the location of the DTD.

Three definitions, transitional, and strices are specified in the HTML 4.0 specification. Frameset is used for Frameset documentation, which contains all documents except Frameset documents, and strict "Excluded the World Wide Web Federation (W3C) expects to gradually discard the privility and elements" £ ¨html 4.0 Specifications).

The following table shows which values ​​for Internet Explorer 6 or higher, which values ​​that meet the standard mode.

Labeldefinition exists in the URL does not exist! Doctype customs HTML (there is no version) Trim HTML 2.0 customs HTML 3.0 customs HTML 3.2 custom Gate HTML 4.0 does not exist Definition open HTML 4.0 frameset switch HTML 4.0 Transitional Switch HTML 4.0 strict Open XHTML open XML open open unrecognizable! DOCTYPE opens the table in front shows that when the document does not exist! DOCTYPE declaration, when the Label in the declaration does not specify the HTML specification version, or its designated version is earlier than When HTML 4.0, the standard mode is closed. This table shows that if you specify the FrameSet or Transitional Definition of HTML 4.0 in! DOCTYPE declaration, you only open the standard mode when you include the URL. When you specify the strict definition of HTML 4.0 in the DOCTYPE declaration, as well as HTML 4.0 without any definition, you will also open the standard mode.

To allow creating new DTDs (such as HIDAD 11.22), when! Doctype declares that it is not recognized, it will open the standard mode. When you specify the HTML version (such as HTML 1.0 or HTML 3.22) that is not listed above, you will also open the standard mode.

DOCTYPE example

The example in this section shows how to use! Doctype declaration to specify DTDs to be observed, and how to open the standard mode.

Both declarations in the examples below are specified as complying with Transitional HTML4.0 DTD. The second statement specifies the URL of the DTD. The first statement does not specify the content. The second statement opens the standard mode for Internet Explorer 6 or higher. The first statement does not open this mode.

"http://www.w3.org/tr/html4/loose.dtd">

Both declarations in the examples below are specified as complying with HTML 4.0 DTD. The first statement does not specify definition. The second statement specifies the Strict definition of this DTD. There are no specified URLs in both statements. Both statements have opened a standard pattern.

Back to top

Complete all tasks inside the box

This section describes the way you use! Doctype declaration to open conforming to standard mode, the way the Internet Explorer 6 or higher calculates the Width and HEIGHT properties of the element, which also describes how this approach is calculated by the earlier version of the Internet Explorer property. the difference.

The CSS1 box model defines the content in an HTML element, as if there is an invisible rectangular border around it. There are three rectangular zones around this border, which are represented by margin, border, and padding attributes, respectively. You can use the style sheet to operate the size and appearance of the border and its surroundings.

The earlier version of Internet Explorer calculates the Width and Height properties. The CSS1 box model is not observed. In CSS1, the width property is defined as the distance between the left frame and the right frame around the element content. Similarly, the Height property is defined in CSS1 as the distance between the upper box and the lower frame. However, for earlier versions of Internet Explorer, Width, and Height properties include Border and Padding Zone around the element border. The figure below illustrates this difference. Figure 1. Illustration for the difference between Internet Explorer 6 and earlier versions of Width and HEIGHT attributes

In line with behavior

For Internet Explorer 6 or later, when you use! DOCTYPE declaration Open the standard mode, the width and height properties are specified, and the distance between the left, right boxes, and the lower and lower boxes are specified. Does not include Border and Padding zone.

Do not meet

When! Doctype declares that when you meet the standard mode, just like an earlier version of Internet Explorer, the width property includes the content box of the object, plus the values ​​of the following properties: Border-Left, Border-Right, Padding-Left and Padding -Right. The width property value minus these attribute values, equal to the width of the parent object content box. Similar to it, the Height property value subtracts the sum of the Border-Top, Border-Bottom, Padding-Top, and Padding-Bottom property, is equal to the height of the parent object.

Frame model example

The example in this section describes how the same HTML element is presented in different ways when you use the Internet Explorer 6 or later in the document! DOCTYPE declarations open the standard mode.

The Width and Height of the DIV element in the HTML code snippet are 200 pixels, and Border-Width is 50 pixels. When you click the button behind the code snippet, a document with two iframe elements is started. The document specified by the left IFRAME element is included! Doctype declaration opens a standard mode for Internet Explorer 6 or higher. The right IFRAME element is included in the document! DOCTYPE declaration does not open a standard mode. The IFRAME element on the right also shows the rendering method of the DIV element in the earlier version Internet Explorer.

Canvas Comparison </ Title> </ HEAD></p> <p><body style = "Background: Blue; Width: 200px; Height: 150px"></p> <p><div style = "Background: Yellow"> Who Moved My Canvas? </ div></p> <p></ body></p> <p></ html></p> <p>Note When you meet the standard mode, if you don't specify your Background property for an HTML element, the BACKGROUND for the body element will become the background of the HTML element. This situation is in accordance with CSS2.</p> <p>Back to top</p> <p>Other properties</p> <p>This section describes two CSS properties available in Internet Explorer 6 or later - MIN-Height and Word-Spacing.</p> <p>Min-height attribute</p> <p>The min-height property sets or retrieves a value, which specifies the minimum height of the element. For Internet Explorer 6, this property is applied only to TD, TH, and TR elements in fixed layout tables. No matter how you open the standard, you can use this property in writing whether you have a standard mode.</p> <p>Element's Height is set to Auto by default. When using this default setting, the height of the element will be dynamically adjusted. You can use the min-height property to specify the minimum height of cells or rows in fixed layout tables.</p> <p>The following code snippet shows how to set the min-height property in a declared manner. The fixed layout table is a minimum height of 100 pixels.</p> <p><Table Style = "Table-Layout: Fixed"></p> <p><tr style = "min-height: 100px"></p> <p><TH> Row 1, Cell 1 </ TH></p> <p><TH> Row 1, Cell 2 </ TH></p> <p></ TR></p> <p><tr></p> <p><TD> ROW 2, Cell 1 </ TD></p> <p><TD> ROW 2, Cell 2 </ TD></p> <p></ TR></p> <p></ TABLE></p> <p>Word-spacing attribute</p> <p>Word-spacing properties are available on Macintosh from Internet Explorer 4.01. Starting from Internet Explorer 6 to use on Microsoft® Win32®. This setting sets or retrieves the number of additional intervals between the various words in the element. It will add a specified number of intervals after each word. In this case, a word can be defined as Internet Explorer to perform a broken mark - such as spaces or even characters. You can set this property in any text container.</p> <p>Back to top</p> <p>More attribute values</p> <p>This section lists some of the possible values ​​that Internet Explorer 6 or higher, but earlier Internet Explorer does not support some possible values.</p> <p>AUTO value of margin and width properties</p> <p>The AUTO value of Margin and Width property specifies which attributes in these properties are adjusted when the width of the element exceeds the limit (ie, when the pattern rule overlaps or conflicts). This value is used when you open the standard mode in the document! DOCTYPE declares for Internet Explorer 6 or later.</p> <p>Non-floating, the horizontal position and width of the block level element is specified by the Margin, Border, Padding and Width attributes of the element. For any such elements, these attributes (left and right) values ​​are equal to the width of the block element including it; the width is inherited from the container block.</p> <p>You cannot change the width of this container block by changing the Margin, Border, Padding, or Width property values ​​in the container block. When you specify a value for one or more such elements of an element, you may have to adjust other properties so that the total width of this element will not exceed the width of the container. This width may be exceeded.</p> <p>According to CSS1, margin and width values ​​can be adjusted; Border and Padding values ​​are not adjustable. Only margin and width properties can be Auto. If the specified value of the width property causes the width of the element to be out of limits, then one of the margin properties can be adjusted, if one or more margin properties cause the width of the element to exceed the limit, the width property can be adjusted.</p> <p>The following rules determine which attribute will be adjusted when the element width is exceeded.</p> <p>• If the value of the Direction property is LTR, the value specified by margin-right is ignored, which is adjusted. If the value of the Direction is RTL, the margin-left property is adjusted. • This property is adjusted if there is only one value of an attribute as Auto. • If Width is set to Auto, any other auto value becomes 0, and WidTh uses the result of the generated equation. • If Margin-Left and Margin-Right are auto, their calculated value is equal.</p> <p>AUTO example</p> <p>The following example illustrates how the same elements are rendered in different ways when you use the Internet Explorer 6 or later in the document!</p> <p>No matter whether it is open, the first three DIV elements in the following HTML code segments are presented in the same way. The first DIV element does not specify the width and margin properties, so its Width is 100%, and there is no left distance and the right distance. The second DIV element specifies the width and margin-left attributes, so the margin-right property is adjusted. The third DIV element specifies the width property, and its margin-right property is set to Auto, so its margin-right property is adjusted.</p> <p>Both the fourth and fifth DIV elements specify the width attribute, and one or more Margin properties of them are set to Auto. You can see the effects of these properties only when you open the standard mode. Did not open the standard mode, the Div element's rendering method is as if their margin-left property is set to 0px, and / or their Margin-Right property is set to Auto.</p> <p>When you click the button behind the code snippet, a document with two iframe elements is started. The document specified by the left IFRAME element is included! Doctype declaration opens a standard mode for Internet Explorer 6 or higher. The right IFRAME element is included in the document! DOCTYPE declaration does not open a standard mode. The IFRAME element on the right also shows the rendering method of the DIV element in the earlier version Internet Explorer.</p> <p><body></p> <p><div style = "> </ div></p> <p><div style = "width: 50%; margin-left: 0px"> </ div></p> <p><div style = "width: 50%; margin-right: auto> </ div></p> <p><div style = "width: 50%; margin-left: auto> </ div> <div sty =" Width: 50%; margin-left: auto; margin-right: auto> </ div></p> <p></ body></p> <p>Display property List-ITEM value</p> <p>The Display property allows you to control the basic shape or type of elements, and whether these elements are presented. The List-Item value of the Display property allows you to change any elements to a list item, which is a block-level element with a list tag. Its Display property is set to the CSS attribute supported by the List-Item. The CSS property supported by the LI element is the same. -Type, List-Style-Image and List-Style-position.</p> <p>The number semantics of the LI element are different from the number semantics of the block elements of the other Display properties to List-Item. The LI element takes its index from the container OL or UL elements they have nearest. Other block elements get their index from the Children collection of their parent elements. Support for List-ITEM values ​​for Display properties does not change the index of the LI element.</p> <p>This value is available regardless of whether it is in line with standard mode.</p> <p>The pre value of the White-Space property</p> <p>The White-Space property allows you to control spaces and newline characters in elements. For Internet Explorer 6 or higher, when you use! Doctype declaration Opens the standard mode, the pre value causes the space in the source to be retained. The wrap and TAB characters ("/ n" and "/ t") are also retained. Continuous spaces will not overlap. This value will cause the layout mode of the content in an object to be very similar to the Pre elements. This value not only affects the display of the content, but will affect the content accessed through the W3C Document Object Model (DOM).</p> <p>When you close the standard mode, you can retrieve this value without affecting the rendering. Its operation is similar to the NORMAL value.</p> <p>Note When you open a standard mode, the White-Space property is applied only to block level elements, such as DIV elements. For Internet Explorer 5.5, this property is applied to all visible elements when you do not open the standard mode.</p> <p>Back to top</p> <p>More stringent style sheet analysis</p> <p>This section lists the changes in the Style Table Analytical Mode of Internet Explorer 6 or higher.</p> <p>When you use it! Doctype declaration, Internet Explorer 6 or higher will ignore Stylus declarations that do not conform to CSS1 when you use the standard mode. Earlier version of Internet Explorer allows you to use some invalid declarations, such as the beginning of a hexadecimal RGB value, leaking the preamble "#" symbol.</p> <p>Note in the style sheet</p> <p>According to CSS1, you can use text annotations in the style sheet, which is similar to those used in C programming languages. C Language Note Start with "/ *" and ends with "* /". For earlier versions of Internet Explorer, you can use C language annotations in the style sheet or use HTML annotations. HTML Note is "" end.</p> <p>The following example shows the difference between C language annotations and HTML annotations.</p> <p>/ * Use c Language Comment Blocks Like this in your style sheets. * /</p> <p><! - do not use html Comments Like this in your style sheets. -></p> <p>When you use a document! Doctype declaration Opens the standard mode, for Internet Explorer 6 or higher, only C language comments are allowed, but there is a certain exception. That is, you can include style table rules in an HTML annotation. The style sheet can be included in the HTML comment block, which is to make the low-level browser do not display text in the style sheet. The following example demonstrates HTML comments uniquely acceptable usage in an embedded style table. <style></p> <p><! -</p> <p>/ * Begin rules * /</p> <p>H1.Blue {Background-Color: blue}</p> <p>.</p> <p>.</p> <p>.</p> <p>/ * end rules * /</p> <p>-></p> <p></ style></p> <p>Unrecognizable tag in the speed reign</p> <p>According to CSS1, when there is an unrecognizable tag in a shorthand attribute, the entire short-book attribute setting will be ignored. For example, "text-decoration: underline cross-out" will be ignored because "cross-out" is the unrecognizable value of the Text-Decoration property. Text does not even add an underscore.</p> <p>For earlier versions of Internet Explorer, the declared analysis ends when encountering the first unrecognized value. Therefore, "Text-Decoration: underline Cross-Out overline" can make the text to add an underscore, but will not add uppercline. The above situation affects the following properties: Font, Background, Background-Position, Text-Decoration, Margin, Padding, Border, Border-Top, Border-Right, Border-Bottom, Border-LEFT, Border-Color, Border-Width, Border -style, List-Style-Image, List-Style, Clip, Behavior, Text-AutoCE, and Layout-Grid.</p> <p>Some font properties settings</p> <p>According to CSS1, the Font statement must specify at least Font-size and font-family. For example, because "font: 14pt" has Font-size, there is no font-family, so it will be ignored. Have an earlier version of Internet Explorer accepted some font settings.</p> <p>RGB color lacks "#" characters</p> <p>According to CSS1, the colors specified using hex RGB values ​​must have a preamble "#" symbol. Like earlier version of Internet Explorer, the values ​​like "ffffff" are ignored, and they do not process them in "#ffffff" (also known as WHITE). The above situation affects all attributes accepted by colors.</p> <p>The missing unit type identifier is considered a pixel value</p> <p>According to CSS1, the length value must specify a unit type identifier, such as cm, mm, in, pt, pc, or px. There is a value of the value of the unit type identifier, and the value between the number and the unit type identifier is ignored. The earlier version of Internet Explorer will treat numbers with any unit type identifier as a pixel unit - as if it is attached to "PX" after this string.</p> <p>In the example below, when! Doctype declares, both attributes are ignored when the standard mode is turned on. The first attribute is ignored because there is no unit property identifier. The second attribute is ignored because there is a space between the numbers and the unit type identifier. The earlier version of Internet Explorer processes the first attribute as if the number is attached to "PX". The space between the number and the unit type identifier is ignored by an earlier version of Internet Explorer. Div.rachel {Width: 817; Height: 11 cm;</p> <p>Note This rule has an exception. Line-Height will explicitly accept a number of non-units and processes them in a similar manner to the percentage. For example, "Line-Height: 2" is similar to "Line-Height: 200%," is similar, but the digital inheritance is different.</p> <p>With quotation key</p> <p>According to CSS1, keyword tags in the style sheet cannot be quoted, for example, with colors specified by name (such as "RED,") or known attribute values ​​(such as "Small-Caps,"). In the example below, both attributes are ignored. The earlier version of Internet Explorer ignores quotation marks and applies these keywords.</p> <p>Div.george {color: "red"; font-variant: "small-caps";</p> <p>Note The language still needs an extension number on both sides of the string.</p> <p>Class and ID values ​​starting with numbers</p> <p>The value of the CSS1, CLASS or ID attribute cannot be started with numbers (0-9). The earlier version of Internet Explorer allows these values ​​to begin with numbers.</p> <p>Case cases of Class and ID value</p> <p>Value Zone Size in accordance with HTML 4.0, Class and ID attributes.</p> <p>Back to top</p> <p>And more new features?</p> <p>For Internet Explorer 6 or higher, when you use! DOCTYPE declaration Opens a standard mode, some functions are different from its running mode in earlier versions of Internet Explorer. This section lists these features.</p> <p>Font-variant attribute SMALL-CAPS value</p> <p>The Small-Caps value of the Font-Variant property will generate the effect of "small corpus letters". All letters in this element are capitalized, and the original text is small in the original text is smaller than the letters whit. In earlier version of Internet Explorer, Small-Caps values ​​apply the same font size for all characters in this element.</p> <p>Fill on IMG elements</p> <p>Support filling properties on the IMG element, such as Padding, Padding-Bottom, Padding-Top, Padding-Left, and Padding-Right. The earlier version of Internet Explorer does not support the Padding property of the IMG element.</p> <p>Font-size properties Keyword value</p> <p>The MEDIUM value of the font-size property matches the default normal font size.</p> <p>The keyword values ​​for this property include XX-Small, X-Small, Small, Medium, Large, X-Large, and XX-Large. These values ​​are not intuitive for earlier versions of Internet Explorer. The Medium value is not the default normal font size; the default is SMALL.</p> <p>Table element inherited text properties</p> <p>The Table element will inherit the text attribute value from its parent element. These properties include Color, Font-Size, Font-Weight, Font-Style, Font-Variant, Text-Decoration, Text-Transform, Letter-spacing, and Line-Height. For earlier versions of Internet Explorer, all text properties of the Table element other than the Font-Family property will set all the text properties to the Body element settings. Note The font-family property of the Table element is inherited in Internet Explorer 3 and later.</p> <p>Width and height of embedded elements</p> <p>Embedded elements (such as span, b, b, b, b, b, b,) do not support Width or HEIGHT properties. When you open a standard mode, if you want to set the Width or HEIGHT property of the embedded element, you must set this element's Display property to Inline-block.</p> <p>Character escape</p> <p>According to CSS1, you can use a backslash (/) as an escap. This will cause the character behind the escape character to lose any meaning. For example, you can escape quotation marks characters as follows:</p> <p>Style = "font-family: 'rachel /' s font '"</p> <p>You can also use hexadecimal to expire Unicode characters. For example, "/ 0009" is an escape character of Tab characters.</p> <p>Back to top</p> <p>What is the original</p> <p>This section helps you allow your app to be rendered correctly in all versions of Internet Explorer é.</p> <p>When Internet Explorer 6 or later is not in compliance with standard mode, it is in compatibility mode. If you have developed an application for your earlier Internet Explorer, and you want these applications to be rendered in the same way on Internet Explorer 6 or later, make sure that! Doctype declares that do not open the standard mode.</p> <p>In conforming to standard mode, compatibility with other versions of Internet Explorer cannot be guaranteed. When you open a standard mode, the presentation behavior of the document may differ from future versions of Internet Explorer. For properties fixed content (such as content stored on the CD), you should not use this mode.</p> <p>other information</p> <p>CSS1 test kit</p> <p>Compatibility In Internet Explorer 5.5</p> <p>Measuring element dimension and location</p> <p>Positioning</p> <p>Lance Silver is a programmer / contributor to the Windows Client SDK team. If he did not get tortured, developers, testers or program administrators, that is, fishing with his children rachel and george in the northwest, a beautiful river, a big horse fish and rainbow trout. (Everyone wants him to spend more time to fish.)</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-62336.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="62336" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.034</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'HuQGcyr9Sopt8tEDuxqx624yt85YjAE65KZ2TYdDML4rwihwRp_2FRYUf_2FWHqsXuTzPWMFQmhnjgnZbTk2ckgeUg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>