Welcome to WeetHet!


Managed Web Hosting by Liquid Web

Your IP address:
54.211.79.150
     
 
Print this page
- use Landscape
Search the
WeetHet Pages
WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
For excellent webhosting that is reliable and affordable, we highly recommend: LiquidWeb

On this page ...

When working with tables, or other objects that use a width parameter, you might encounter the 100%-problem.

What is the 100%-problem?

I have seen this problem on to occasions:

  • A Java Applet that should become 100% wide
  • A table with at least 1 column with an unknown width

Solution?

I wrote a little Javascript function to fix this problem.

HTML

What is the 100% problem?

I will describe two situations where you can encounter this problem.

First: A Java Applet should become 100% wide.

Normally I would set "width" to 100% as in this example:

<applet code="myapplet.class" width="100%">

Most browsers handle this pretty OK. However Internet Explorer hasn't got it's priorities straight. It first initializes the applets and then defines how many pixels equal 100%. The applet either becomes wrong sized or doesn't display at all and the only thing you can watch is a nice grey square ...

Second: A table has at least 1 column with an undefined with.

Imagine a table with 3 columns (this is what happens on this webpage as well!!).

The right and left column hold an image, a 100 pixels wide. The column may not become larger than a 100 pixels otherwise the pictures do not match the rest of the page. The middle column should resize depending on the page resolution.

One trick is to not enter a width-value for the left and right column. A second trick (which works fine with a 2 column table) is to set width to a 100%. Let's take a look at the HTML code:

<table width="100%">
<tr>
<td width="100"><image></td>
<td width="100%">blabla</td>
<td width="100"><image></td>
</tr>
</table>

Too bad, too sad,... in particular browsers (Netscape being one of them) you do not get what you want.

The width of the left and right column (depending on the screen resolution and page width) are nog longer a 100 pixels wide.

The Solution

I have written a little JavaScript function that works for most known browser (tested it with Internet Explorer, Netscape, Opera and NetCaptor). This script ("getwidth") returns the width of the page in pixels. The parameter is substracted from the total amount of pixels. This way you can reuse this function for multiple purpose on a single page.

So let's say a page is 600 pixels wide. Calling "getwidth(0)" results in the answer of 600 pixels. Calling "getwidth(200)" results 400 pixels.

<script language="JavaScript">
  function getwidth(x)
  {
  // this script fixes some clientwidth bugs for the menu to be fullsize
  // Free to use by anyone if this header remains in position
  // (C)2000 Hans Luyten
  
  clientwidth=2000; 
  if (self.innerWidth)
     {
     if (navigator.appName.indexOf('etscape')!=-1)
        {
        clientWidth = self.innerWidth-17;
        }
        else
        clientWidth = self.innerWidth; 
     }
     else if (document.body)
     {
        clientWidth = document.body.clientWidth;
     }
  returnwidth=clientWidth-x;
  return returnwidth;
  }
</script>

How to use this code?

First of all copy the script, between the </head> and the <body> tags.

In your HTML code, replace all "100%" widths, with "&{getwidth(X)};". Where "X" equals the sum of the left and right column's width in the second example, or "X" equals zero for the first example.

Let's see the previous two examples altered to use the script.

Java Applet example:

We want to use the full width of the document, so X=0.

<applet code="myapplet.class" width="&{getwidth(0)};">

Table example:

We want to know the total width of the page, minus the two 100-pixel-columns, so X=200.

<table width="100%">
<tr>
<td width="100"><image></td>
<td width="&{getwidth(200)};">blabla</td>
<td width="100"><image></td>
</tr>
</table>

 


 

 


Klik hier om te wisselen naar nederlandstalige pagina's You are currently on the English pages.
Help & AboutWelcome ... !!GuestbookWeetHet HelpGlossary ...Searching the InternetSearching WeetHetAvailable downloadsNews & UpdatesStatisticsDisclaimer!AdvertisingJoin us !!!AwardsAbout WeetHet ...Hansie goes USAWhere is Hansie?First monthsMy new homeGoing outPuck goes USAMy new carSnapshots PuckRandom snapshotsFinally: Spring!Nice warm summerFirst Family visit!CD's and DVD'sMusicAudio-DVD to MP3Music CD to MP3Music CD to WAVCopy Music CDYour own Music CDMusic from the InternetChanging MP3 VolumeNero Burning RomBurn BIN/CUE filesConvert BIN to ISOComputer CDRomBurn ISO filesPhoto VCDPhoto SVCDNero vs Nero ExpressNRG to ISOBurn SVCDSVCD with menuBurn VCDVCD with menuDVD VideoWhat are RegionCodes?What is MacroVision?Video formatsDIKO: 3 AVIs - 1 DVDHow does a CD work?How to burn a CDCreating a DVDConvert BIN to ISONRG to ISOCreating a disk catalogComputer InfoHow does a CD work?Netiquette: E-MailWhat is DivX?What is MP3?What is RAID?What is USB?What are PAR files?Wireless LAN introPC to TV cablesStart XP fasterBoot from USB driveFireWire connect 2 PC'sPhoto SizingGraphics / PhotosPhotoshopPhoto SizingFast car3D buttonsDraw lightningPhotos on CDPictureToTVVideoCD with NeroSVCD with NeroMagix Pictures on CDDVD PictureShowPhoto SizingPhoto SizingGSM / PDAsCompaq iPAQReplace batterySerial craddle to USBGarmin eTrex cableGarmin eTrex plugRound Garmin plugPalmPilotConnect Ericsson GSMGarmin eTrex GPSMobile phonesEricsson RingtonesMusicBoxRingtonesMasterA edit SIMSMSC numbersConnector pinoutsHardware & HacksOverclocking CPU'sGenericAMD CPU codesAMD Slot-AAMD Socket-AProgr. SmartcardsMillenniumAlcatel HackLCD display to PCNetwork cablesBoot from USB drivePC to TV cablesPromise Ultra -> RAIDSoundblaster MIDIResistor colorcodeFireWire NetworkInternetNetwork genericEnabling DHCPWin95/98/ME ClientWin2000/XP ClientMac OS 7/8 ClientMac OS X ClientWell known IP-portsDNS addressesNetwork cablesWireless LAN IntroFireWire NetworkDialup connectionTCP/IP optimized for Win9xPublic IP Address?ADSL / MxStreamADSL in generalHow ADSL worksDNS addressesMXStreamInstallingPSTN EthernetISDN EthernetRouter for MXStreamSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerSolving problemsAlcatel HackHack the modemPassword CalculatorPurpose of the LEDsSolving problemsFirmware upgradeDNS addressesWell known IP-portsMapping PortsAutoPortMappingConnection sharingPossibilitiesWinRoute (software)Network Win95/98/MENetwork Win2000/XPNetwork Mac OS 7/8Network Mac OS XWell known IP-portsWireless LAN IntroNetwork cablesRoutersSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerInternet by SatelliteHow does it work?Brief intro ...Overview variantsStandardBySky methodTwo-Way InternetInstalling cardsWhich satellite-card?PC requirementsHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemsNew driversMounting a dish (Astra)Dish size?EON ChecklistTransponders EOLRamdisk for FazztYour own webpageNavigation solutionsInsight and solutionsApyCom apPopupMenuD.Binard PopupMenuPopupMenu generatorPopupMenu flatTips and TricksE-Mail linkE-Mail FORMBookmark this pageIcon for my webpage'Page back' link?Jumping within a pageEscape from framesUse frametitleControlling framesAuto redirectFixing 100% problemChange link colorText in the statusbarFixed backgroundText over imagesBrowser safe colorsUsing the .htaccess fileSpecial charactersWhere to downloadIRC using mIRCInstalling mIRCDownload Movies etcFAQMovies from InternetMovie QualityWhat are PAR files?LeechGuyLeechGuy editoreMuleWinMXE-MailNetiquetteQuote of the dayMiscellaniousHack Arescom NetDSLWireless LAN IntroFireWire NetworkWell known IP-portsWhat is my IP Address?Search (WeetHet)Searching (Internet)WeetHet DownloadsA few great websitesDNS addressesMicroControllersBasic Stamp IIStarting with the BS2Assembling the kitFullsize scematicsConnection to your PCBS2 to 44780 LCD44780 LCD SnapshotsBS2 to M50530 LCDM50530 SnapshotsHomebrew BS2Smartcards/SIMProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumCard TypesEdit GSM SIMResistor colorcodeMusic / AudioMusic from InternetIntroductionLeechGuyLeechGuy editorWinMXeMuleUsing mIRCBurn BIN/CUE filesConvert BIN to ISOAudio-DVD to MP3How does a CD work?Copy music CDYour own music CDWhat is MP3?Music CD to MP3MP3 CD for Yamakawa?Changing MP3 VolumeMusic CD to WAVSB MIDI interfaceAC3 to WAV/MP3ProgrammingBorland DelphiHansies Delphi ToolsAYeah!CatalogQuote of the dayPopupMenu generatorOverview ASCII chars.Satellite (TV & GPS)Satellite TelevionSatellite TV on the PCTV reception on your PCPC requirementsNew driversPentam. Pent@VisionHauppauge DVBs NexusTechnoTrend PCLinePVA file to MPEG2DirecTV TiVoRemote ControlDirecTiVo to OS6.21: Intro & Images2: TiVo disk in PC3: Install OS 6.24: OS6.2 first start5: SuperPatch & More6: Recordings to PCTyTools - Movies to PCOld: DirecTiVo to OS4Old: Sleeper HackSmartcardsProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumCard TypesWhat is DiSEqC?Mounting a dish (Astra)Dish sizeSRT8000 firmwareGPS NavigationGarmin eTrexDiagnostic modeSerial connectionConnect to iPAQ 36/38xxConnect to PalmPilotThe eTrex connectorThe round connectorHow GPS worksGeoCaching explained ...Internet by SatelliteHow does it work?Brief intro ...Overview variantsStandardBySky methodTwo-Way InternetInstalling cardsWhich satellite-card?PC requirementsHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemsNew driversMounting a dish (Astra)Dish size?EON ChecklistTransponders EOLRamdisk for FazztVideoVideo guide - start hereIntroductionGSpot: AVI InfoDIKO: 3 AVIs - 1 DVDDownload QualityVideo in generalWhat is DivX?Video formatsRecording TypesWhich AVI codecs?Intro K(S)VCD/KDVDDVD+RW IssuesAbout bitratesVideoServer pluginWhat are RegionCodes?What is MacroVision?RippingAudio-DVD to MP3Photo SizingAVI to MPEGGSpot: AVI InfoDIKO: 3 AVIs - 1 DVDAVI to DVD/(S)VCDWithout SubsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc with AC3With SubTitlesD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc with AC3Burning CD NeroBurn VCDVCD with menuBurn SVCDSVCD with menuBurn BIN/CUE filesDVD PlayersCompatibilityAdd DVD playerDVD+RW IssuesIntro K(S)VCD/KDVDVideo ToolsBitrate CalulatorDVD RippingGSpot: AVI InfoFlaskMPEG and CCEVideoServer pluginDVD to DivXIntroductionCalculating bitratesRippingDVDx and SmartRipperDVDx settingsFlaskMPEG method 1FlaskMPEG method 2FlaskMPEG method 3DVD to (S)VCDIntroductionCalculating bitratesRippingDVDx and SmartRipperDVDx settingsFlaskMPEG 0.6 and CCEDVDx and Video ServerDivX to (S)VCDDVD to DVDDVD2OneDVDShrinkDVD+RW IssuesTMPGEnc & CoDIKO: 3 AVIs - 1 DVDMovie Cut & PasteGSpot: AVI InfoMergingMPEG1 and MPEG2Using TMPGEncWomble MPEG2VCRAVI with VirtualDubCuttingNewWith TMPGEncWomble MPEG2VCREasy Video SplitterAVI en DIVXAVI with VirtualDubEasy Video SplitterMovies from InternetIntroductionLeechGuyLeechGuy editoreMuleWinMXUsing mIRCWhat are PAR files?Burn BIN/CUE filesConvert BIN to ISOPictures on CDPictureToTVVideoCD with NeroSVCD with NeroMagix Pictures on CDDVD PictureShowRipping SubtitlesVobsub: fast and easy!SubRip (OCR)Sync subtitlesDisplaying subtitlesDisplaying with VobSubSync subtitlesCreate a MicroDVDPC connected to TVPC to TV cablesATI softwarenVidia softwareTiVo - Harddisk VCRTiVo Series 1What is a TiVo?Opening a TiVoSerial accessDebug Mode accessLinux Bash shellSet the clockDisable dialupDirecTV TiVoRemote ControlDirecTiVo to OS6.21: Intro & Images2: TiVo disk in PC3: Install OS 6.24: OS6.2 first start5: SuperPatch & More6: Recordings to PCTyTools - Movies to PCOld: DirecTiVo to OS4Old: Sleeper HackYamakawa 713/715IntroductionFAQThe Remote ControlSecret codesSet regioncodeSet regionfreeDisable MacroVisionFactory-settingsWhich DVDRom driveFirmware versionChange firmwareDownload firmwareChange backgroundCreate MP3 CDM.U.F.Y. MP3 CD'sHelpForumSearch (WeetHet)Search (Internet)News & UpdatesGlossary ...DownloadsLinksStatisticsAdvertisingJoin us !!!Guestbook

Liquid Web Fully Managed Web Hosting