site verkleint mee javascript

Status
Niet open voor verdere reacties.
U

uaejeroen

Terugkerende gebruiker
Lid geworden
7 dec 2009
Berichten
1.665
ik las ergens dat hett met javascript zo aan te passen is dat als het venster verkleint je site mee verkleint, en gecentreerd blijft

kan iemand me helpen
 
Dat kan veel beter met CSS: breedte op % en een margin: 0 auto. Dit soort dingen met JS doen is een Slecht Idee; als mensen geen javascript aan hebben staan, zal je site breken.

Maargoed, mocht je er interesse in hebben: je voegt een event handler toe op resize:

[js]window.addEventListener('resize', doeIets, false);[/js]

en je handler functie checked de scherm breedte/hoogte:

[js]function doIets()
{
var breedte = window.innerWidth; // oid
var hoogte = window.innerHeight;

// [...]
}[/js]

en daarna resize je je container-div oid:

[js]var container = document.getElementById('container');

container.style.width = breedte - 200 + 'px';
container.style.height = hoogte - 200 + 'px';[/js]
 
@That Guy,
Zoals ik het verhaal begreep, doet hij het ook met css,
maar wat hij verder wilde:
stel de wrapper is 800px breed met auto margin links en rechts
Als nu de browser smaller gemaakt wordt dan 800px, dan wilt hij dat de
wrapper breedte automatisch de breedte van de browser overneemt.
Ik voorzie wel veel styling problemen door dat aanpassen van je wrapper,
tenzij hij alleen tekst en kleine images gebruikt.
 
Beste

Mijn site wil ik 780 px en center, dat het ik maar nog steeds als ik mijn site verklein verkleint die niet mee
 
Css

HTML: 
@charset "utf-8";

.text {
	text-align: center;
	font-style: normal;
}
.text {
	text-align: center;
}
.text {
	text-align: left;
}
.Title {
	text-align: left;
}
.tekst {
	text-align: left;
}
a:link {
	color: #90F;
}
a:visited {
	color: #666;
}
a:hover {
	font-style: italic;
	color: #22FF22;
    }
a:focus {
	font-style: italic;
	color: #22FF22;
    }
.e-mail {
	color: #696969;
}

#apDiv2 {background: #ffffff;}
#apDiv2 {
	position: absolute;
	left:-7px;
	top:117px;
	width:195px;
	height:559px;
	z-index:2;
	
}


#apDiv3 {background: #ffffff;}
#apDiv3 {
	position:absolute;
	left:642px;
	top:119px;
	width:229px;
	height:559px;
	z-index:3;
	color: #000;
	}

#apDiv4 {background: #ffffff;} #apDiv4 {
	position:absolute;
	left:188px;
	top:118px;
	width:454px;
	height:559px;
	z-index:4;
	color: #000;
	font-style: italic;
}

.Waarschuwing {
}
.Waarschuwing {
}

#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}
#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}

.background {
	background-image: url(/afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
}
#apDiv3 #form1 {
	color: #F0F;
}
#apDiv3 #form1 {
	color: #90F;
	font-style: italic;
}


body {
	margin-left: auto;
	margin-right: auto;
	background-image: url(../afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
	width: 780px;
	background-position: center bottom;
}
#container #apDiv3 p {
	color: #000;
	font-style: italic;
}
#container #apDiv3 p em {
	color: #000;
}
#container #apDiv4 #form2 p label {
	color: #90F;
}
.meter {
	color: #90F;
}
#container #apDiv4 {
	font-style: normal;
}

dit is mijn css
 
Beste That Guy

Hierbij heb ik nog eenra ovren javascript voor het vergroten en verkleinen van de tekst op de website

ik weet dat het met CTR scrollen werkt, maar ik wil liever zo'n script

weet u waar ik een werkent script kan vinden die makkelijk toe te passen iss aan mijn website?

Grag advies
 
Bedenk je inderdaad goed wat er moet gebeuren in speciale gevallen (javascript uit, venster te klein, ...). Zolang je dat soort dingen goed in het oog houdt en steeds test lijkt me dat 't goed moet komen.

Helaas zijn goed bruikbare kant-en-klare scripts vaak moeilijk te vinden.
Heb je een HTML-sample bij je CSS? Dat helpt de hiërarchie van de pagina en de bedoeling van je vraag in te zien ;-)

Mijn interpretatie is nu dat je zoiets wilt:
[JS]<html>
<head>
<script type="text/javascript">

function resizeContent () {
var content = document.getElementById("content");
var width = window.innerWidth;
if (width < 780) {
content.style.width = width - 40; //Keep a 20px margin
}
//Do something with height?
}

window.onload = function () {
resizeContent();
window.addEventListener("resize", resizeContent, false); //niet-IE, dacht ik
}

</script>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#content {
background-color: #DBF6FF;
height: 100%;
margin: auto;
width: 780px;
}

</style>
</head>
<body>
<div id="content"></div>
</body>
</html>[/JS]
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan