X Library Viewer

Download the X Distribution File.

X Index

Animation

xAniLine, xAnimation.arc, xAnimation.corner, xAnimation.css, xAnimation.imgSize, xAnimation.line, xAnimation.opacity, xAnimation.para, xAnimation.rgb, xAnimation.rgbByClass, xAnimation.scroll, xAnimation.size, xAnimation, xAniOpacity, xAniRgb, xAniWH, xAniXY, xEllipse, xParaEq, xSequence, xSlideCornerTo, xSlideTo, xWinScrollTo.

DOM

xFirstChild, xGetElementById, xGetElementsByAttribute, xGetElementsByClassName, xGetElementsByTagName, xLoadLink, xLoadScript, xNextSib, xParent, xParentN, xPrevSib, xSmartLoad, xSmartLoad2, xSmartLoadScript.

Debug

xConsole, xEditable, xName, xParentChain, xSetIETitle.

Event

xAddEventListener, xDisableDrag, xDisableDrop, xEnableDrag, xEnableDrag2, xEnableDrop, xEvent, xHttpRequest, xPreventDefault, xRemoveEventListener, xStopPropagation.

Image

xImgAsyncWait, xImgRollSetup, xTriStateImage.

Iteration

xEach, xEachE, xEachN, xEachUntilReturn, xTimes, xWalkToFirst, xWalkToLast, xWalkTree, xWalkTree2, xWalkTree3, xWalkTreeRev, xWalkUL.

Misc

xCookie, xDef, xDeg, xGetURLArguments, xLibrary, xLinearScale, xNum, xRad, xRound, xStr.

Position

xCardinalPosition, xCen, xCenter, xGetEleAtPoint, xHasPoint, xIntersection, xLeft, xMoveTo, xOffset, xPageX, xPageY, xScrollLeft, xScrollTop, xTop.

Size

xClip, xColEqualizer, xDocSize, xHeight, xResizeTo, xWidth.

String

xCamelize, xCapitalize, xHex, xPad, xParseColor, xRgbToHex, xStrEndsWith, xStrRepeat, xStrReplaceEnd, xStrStartsWith, xTrim.

Style

xAddClass, xDisplay, xFindAfterByClassName, xFindBeforeByClassName, xGetComputedStyle, xGetCSSRules, xGetStyleSheetFromLink, xHasClass, xHasStyleSelector, xHasStyleSheets, xInsertRule, xOpacity, xRemoveClass, xStyle, xTagStyle, xToggleClass, xTraverseDocumentStyleSheets, xTraverseStyleSheet.

Table

xTable, xTableCellVisibility, xTableColDisplay, xTableCursor, xTableCursor2, xTableHeaderFixed, xTableIterate, xTableRowDisplay, xTableSync.

UI

xBar, xCalendar, xCollapsible, xDialog, xFenster, xFenster2, xMenu1, xMenu1A, xMenu1B, xMenu5, xMenu6, xModalDialog, xPopup, xSelect, xSplitter, xTabPanelGroup, xTextArea, xTooltipGroup.

Window

xClientHeight, xClientWidth, xWinClass, xWindow, xWinOpen.

xWidth

Description

Return and optionally set the element's width. It attempts to return and/or set the equivalent of offsetWidth. xWidth provides, effectively, a read/write version of offsetWidth. The border is included, as well as the padding, in the calculations. When returning the existing width, xWidth returns offsetWidth, which is the sum of the border, padding and style.width values. When setting a new width, xWidth finds the current border and padding values of the element and then subtracts those from the width you have specified before assigning the result to style.width.

Syntax

xWidth(ele[, uW])

Parameters

eleid string or object reference
uWunsigned integer width; it is rounded to an integer

Return

integer

Source

Default.

// xWidth r7, Copyright 2001-2009 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xWidth(e,w)
{
  var css, pl=0, pr=0, bl=0, br=0, gcs;
  if(!(e=xGetElementById(e))) return 0;
  if (xNum(w)) {
    if (w<0) w = 0;
    else w=Math.round(w);
  }
  else w=-1;
  css=xDef(e.style);
  if (e == document || e.tagName.toLowerCase() == 'html' || e.tagName.toLowerCase() == 'body') {
    w = xClientWidth();
  }
  else if(css && xDef(e.offsetWidth) && xStr(e.style.width)) {
    if(w>=0) {
      if (document.compatMode=='CSS1Compat') {
        gcs = xGetComputedStyle;
        pl=gcs(e,'padding-left',1);
        if (pl !== null) {
          pr=gcs(e,'padding-right',1);
          bl=gcs(e,'border-left-width',1);
          br=gcs(e,'border-right-width',1);
        }
        // Should we try this as a last resort?
        // At this point getComputedStyle and currentStyle do not exist.
        else if(xDef(e.offsetWidth,e.style.width)){
          e.style.width=w+'px';
          pl=e.offsetWidth-w;
        }
      }
      w-=(pl+pr+bl+br);
      if(isNaN(w)||w<0) return;
      else e.style.width=w+'px';
    }
    w=e.offsetWidth;
  }
  else if(css && xDef(e.style.pixelWidth)) {
    if(w>=0) e.style.pixelWidth=w;
    w=e.style.pixelWidth;
  }
  return w;
}

Dependencies

xGetElementById, xNum, xDef, xStr, xGetComputedStyle

Demos

viewtopic.php?id=529 - Discussion and demo.

Notes

27Jan10There are problems with this function in regards to setting the width of table elements with borders and "border-collapse:collapse". Refer to the source for xTableHeaderFixed to see an experimental version of xWidth which attempts to solve the problem.

Revisions

7: 6Mar09Combined multiple var statements into one.
6: 27Apr07I went back to r4. I would like to make the r5 change, but it breaks too many demos. When you need the width/height of an element's parent, if that parent happens to be document/html/body then what you really want is clientWidth/clientHeight. I'll have to revisit this later.
5: 23Apr07This rev reverses the first part of r4. Now it does not reference xClientWidth.
4: 7Apr05If ele is document or html or body then return xClientWidth. This needs testing and is somewhat experimental. Also, use (pl !== null) instead of !=
3: 12Mar05Changed xSetCW to use xGetComputedStyle and removed xGetCS. Made xSetCW inline. Reduces width/height funtions about 200 bytes.
2: 14May04xWidth now accepts zero as valid
1: 31Mar04put in it's own file for use with XC

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Tech Support

Forum support is available at the X Library Support Forums.

About Cross-Browser.com

Cross-Browser.com is the home of X - a cross-browser Javascript library, and many demos, applications, articles and documentation.

Search

Cross-Browser.com

World Wide Web

User Projects

If you are using X, XC or anything from this site, show off your work by posting a link in the X Showcase forum.