• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Mit Javascript (onClick) Div vergrößern

S

Schachspieler

New member
Hallo Zusammen!

Ich arbeite an einer Website für unseren Schachclub. Konkret geht es um folgende Unterseite: Unbenanntes Dokument Hier suche ich nach einer Möglichkeit, ein div-Element (konkret: das Schachbrett) per Klick zu vergrößern. Es ist schon per CSS formatiert, eine ID fürs Vergrößerte div hab ich auch gemacht.

#diagramm {top:15px; margin:20px; float:right;width:200px;}
#diagrammg {top:15px; margin:20px; float:right; width:400px;}

Wie bring ich nun dem Div bei, dass es bei Klick doppelt so groß sein soll?

Dieses Script JS: Div per Klick vergrößern | MacUser.de hab ich ausprobiert, aber mein Div hat sich geweigert, sich zu vergrößern.


Liebe Grüße
Alex
 
Hallo Schachspieler, willkommen hier im Forum.

Antwort: gar nicht. Dein Problem ist nicht das DIV (was sich problemlos vergrößern lässt), sondern die Art und Weise des eigentlich zu vergrößernden Inhaltes.

Hier benutzt Du eine Table, die Du über die Formatierung selbiger derart aufbohren kannst; also Formatangaben für table (width:100%), die td-Zellen etc. Via CSS wechselst Du dann von "Ursprungsgröße" auf "Zielgröße". Arbeite hierzu unbedingt mit Prozent, damit die Tabelle so spurt wie Du es Dir vorstellst.

Nicht vergessen: Dein DIV musst Du natürlich auch vergrößern, sonst bleibt die Tabelle in der Abmessung unverändert. ;)

Viel Erfolg.
 
Hab' mir jetzt die Seite nicht angesehen, aber ich bin mir nicht sicher, ob eine Tabelle hier die beste Wahl ist:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#brett.small {
	width: 200px;
	height: 200px;
}
#brett {
	width: 300px;
	height: 300px;
}
#brett.big {
	width: 400px;
	height: 400px;
}
.cell {
	display: inline-block;
	width: 12.5%;
	height: 100%;
}
.row:nth-child(odd) .cell:nth-child(odd),
.row:nth-child(even) .cell:nth-child(even) {
	background-color: black;
}
.row * {
	word-spacing: initial;
}
.row {
	word-spacing: -1em;
	width: 100%;
	height: 12.5%;
	position: relative;
}
</style>
</head>
<body>

<div id="brett" class="small">
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
	<div class="row">
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
		<span class="cell"></span>
	</div>
</div>
<script type="text/javascript">
document.getElementById("brett").addEventListener("click", function(){
	switch (this.className){
		case "small":
			this.className = "";
			break;
		case "":
			this.className = "big";
			break;
		case "big":
			this.className = "small";
			break;
	}
}, false);
</script>
</body>
</html>
 
Hallo kkapsner!

Woooowwwww, sowas hab ich noch nie gesehen. Muss wohl HTML auch nochmal auffrischen ... Danke für die super Lösung.

Liebe Grüße
Alex
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben