overflow-x aanpassen met Javascript - Softwareontwikkeling

vrijdag 24 maart 2006 17:57

Acties:

Topicstarter

Ik ben op het moment bezig de website van mijn dispuut te updaten, nu verloopt dat voorspoedig op 1 detail na. We hebben een fotoalbum (Gallery2) in een frame zitten. Dit album gebruikt het doctype 1,0 xhtml en zonder dat doctype ziet het er niet uit.

Nadeel van een doctype binnen frame is dat je bij een verticale overflow direct een horizontale scrollbalk krijgt terwijl dit niet nodig is. Oplossing : html {overflow-x: visible;}

Hiermee ben je de horzizontale scrollbalk dus kwijt, wat voor resoluties boven de 1024*768 geen enkel probleem is. Duikt je resolutie echter hier onder of je hebt je browser venster niet fullscreen dan ben je die balk dus ook kwijt. Niet handig! In dit geval wil je dus eigenlijk afhankelijk van iemands browser window de breedte van het frame opvragen en dan met een if statement schakelen tussen overflow-x: visible en auto.

Nu heb ik wat in javascript lopen maken wat de overflow-x aanpast:

JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frames//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-frameset.dtd"> 

<html><head>

<script language="Javascript">
<!--
function size()
{
    if (self.innerWidth)
    {
        frameWidth = self.innerWidth;
        frameHeight = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth)
    {
        frameWidth = document.documentElement.clientWidth;
        frameHeight = document.documentElement.clientHeight;
    }
    else if (document.body)
    {
        frameWidth = document.body.clientWidth;
        frameHeight = document.body.clientHeight;
    }
    else return;

return(frameWidth);
}
    
function status()
{
    if(size()>=1000)
    {
        set= "visible";
    }
    else
    {
        set="auto";
    }
    return(set);
} 

function overflow()
{
document.write('<STYLE type="text/css">html {overflow-x:'+status()+'}</STYLE>');
}

//-->
</script>

</head>

<body onload="overflow()">
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
<h1>Testing2</h1><br>
</body>
</html>

Nu gaat het helemaal goed tot en met de status function, die returned netjes visible of auto. Op het moment dat ik overfloverflow aanroep zoals bovenstaand dan krijg ik een blank page met in de bron alleen <STYLE type="text/css">html {overflow-x:visible} </STYLE>

Iemand enig idee waarom de page niet meer verder geladen word na de overflow functie?

[ Voor 34% gewijzigd door Terror op 24-03-2006 18:20 . Reden: foutje uit de code gehaald :-D ]

Dell XPS M1530 (Red) | T8300 | 4 GB | 750 GB 7200 rpm | 8600m GT | Wifi N | 1440x900 LG | 9 Cells | Windows 8.1 Pro x64

vrijdag 24 maart 2006 19:15

Acties:

Terror

Topicstarter

overigens, de reden dat ik persé document.write wil gebruiken is omdat

code:

1	document.body.style.overflowX='sOverflow';

niet werkt als losse code en:

code:

1	<STYLE type="text/css">html {overflow-x: sOverflow}</STYLE>

wel

Dell XPS M1530 (Red) | T8300 | 4 GB | 750 GB 7200 rpm | 8600m GT | Wifi N | 1440x900 LG | 9 Cells | Windows 8.1 Pro x64

vrijdag 24 maart 2006 19:37

Acties:

chem

Reist de wereld rond

sOverflow bestaat niet...

Klaar voor een nieuwe uitdaging.

vrijdag 24 maart 2006 20:02

Acties:

Terror

Topicstarter

sOverflow is een variabele die de waarden hidden, visible, auto kan aannemen.

http://msdn.microsoft.com...e/properties/overflow.asp

Anyway. Heb het probleem nu gereduceerd tot.

Bij gebruik van xhtml doctype:
html { overflow : hidden} <== werkt
document.body.style.overflow='hidden'; <== werkt niet
document.write('<STYLE type="text/css">html {overflow-x:'+status()+'}</STYLE>'); <== werkt niet

Gebruik je geen doctype:
html { overflow : hidden} <== werkt
document.body.style.overflow='hidden'; <== werkt
document.write('<STYLE type="text/css">html {overflow-x:'+status()+'}</STYLE>'); <==werkt

Wat ik dus niet snap is het verschil tussen:

html { overflow : hidden}
en
document.write('<STYLE type="text/css">html {overflow-x:'+status()+'}</STYLE>');

In beide gevallen word er heel netjes een line opgenomen in het document.

Dell XPS M1530 (Red) | T8300 | 4 GB | 750 GB 7200 rpm | 8600m GT | Wifi N | 1440x900 LG | 9 Cells | Windows 8.1 Pro x64

vrijdag 24 maart 2006 21:26

Acties:

Terror

Topicstarter

Kreeg er genoeg van, heb de page maar in een div gegooit en gezorgt dat die div niet kan overflowen buiten het frame.

Voor iedereen die afknapt op de horizontale scrollbalk als die niet nodig is en toch een doctype wil houden:

JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



<html><head>

<script language="Javascript">
<!--
function size()
{
    if (self.innerWidth)
    {
        frameWidth = self.innerWidth;
        frameHeight = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth)
    {
        frameWidth = document.documentElement.clientWidth;
        frameHeight = document.documentElement.clientHeight;
    }
    else if (document.body)
    {
        frameWidth = document.body.clientWidth;
        frameHeight = document.body.clientHeight;
    }
    else return;
return(frameHeight-16+"px");

}
    

function overflow()
{
kader.style.height=size();
}

//-->
</script>

</head>
<body onload=overflow()>
<div id="kader" style="overflow: auto;">

<h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br><h1>Testing2</h1><br>
</div>

</body>
</html>

elk voordeel heb zijn nadeel, div schaalt niet automatisch mee met venster resizen.(

[ Voor 27% gewijzigd door Terror op 24-03-2006 21:59 ]

Dell XPS M1530 (Red) | T8300 | 4 GB | 750 GB 7200 rpm | 8600m GT | Wifi N | 1440x900 LG | 9 Cells | Windows 8.1 Pro x64

vrijdag 24 maart 2006 22:59

Acties:

crisp

Devver

Pixelated

Het is heel simpel: na het parsen van de pagina kan je geen document.write()'s meer uitvoeren.
Verder is het een verschil tussen quirksmode en standards-compliance mode.

De scrollbar is eigenlijk een specifiek probleem van IE (is nmw ook opgelost in IE7); ik zou dus ook voor een IE-only fix gaan; bijvoorbeeld een behavior ism conditional comments (en sowieso geen frames

)

Intentionally left blank

zaterdag 25 maart 2006 07:51

Acties:

Terror

Topicstarter

Tja, zonder frames had ik überhaupt geen last gehad hiervan. (geen zin om al die html pages over te zetten

) Workarounds zijn meestal niet netjes, maar werkt vaak wel snel

Dank voor de info over doc.write()'s, klinkt eigenlijk best logisch. In FF ziet het er allemaal perfect uit, idd puur IE fix. Heb ondertussen nog wat andere workarounds bedacht. Wordt even kijken wat dat doet.

Dell XPS M1530 (Red) | T8300 | 4 GB | 750 GB 7200 rpm | 8600m GT | Wifi N | 1440x900 LG | 9 Cells | Windows 8.1 Pro x64

Pagina: 1

Reageer