div per javascript vergrößern und verkleinern

haillo

Ich habe ein dreispaltiges layout.

Der div content ist rechts "gefloatet" und der mainnav div links.
Jetzt würde ich gerne wenn man auf einen Link klickt das sich der content div vergrößert und die sidebar verkleinert.
Ich habe schon etwas gesucht:

HTML

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion ändert die X- und Y-Ausdehnung des DIV-Elements
function set_dimensions (width, height) {
  // Breite des DIV-Elements setzen
  document.getElementById ('sidebar').style.width = width;
  // Höhe des DIV-Elements ändern
  document.getElementById ('sidebar').style.height = height;
}
// -->
</script>
<a href="javascript:set_dimensions ('150px', '730px')" title="">Gr&ouml;&szlig;e des DIV neu setzen1</a><br>
<a href="javascript:set_dimensions ('370px', '730px')" title="">Vorherige DIV-Ausdehnung setzen1</a>

Alles anzeigen

In dieser Form bräuchte ich aber zwei links einmal um den einen div zu vergrößern und einmal den anderen zu verkleinern.
Außerdem wird der float: right vom content div aufgelöst.
Könnte mir vllt jemand helfen dieses Problem zu lösen?
Ich freue mich auf eure Antworten!
MfG
haillo

synaptic

zum einen wäre des komplette grundgerüst inklusive styles mal eine wundervolle erweiterung deines postongs!
dann liegt die sache doch an sich auf der hand.. du brauchst also ne funktion, die dein main-div in der gösse ändert, das würde aber die danebenliegende spalte beeinträchtigen, also musste die auch ändern.
du hast zwei zustände:
a)alles normal
b) grösen geändert

also machste eine funktion die die grössen ändert und eine, die sie wiederherstellt
dazu noch ne dritte, die die aktuelle grösse deines divs abfragt und dementsprechend die vergrösserung oder verkleinerung aufruft.
etwas tricky, aber auch möglich ist das ganze in eine funktion gestopft...
und letztlich brauchste dafür nur möglichkeit diese änderungsfunktionen aufzurufen (link button, event,..)

haillo

Es gibt nur ein ganz kleines problem bei der ganzen Sache,
ich kann kein javascript!
Ich hatte gehofft dass das kein großes Ding ist und mir jemand das zusammenbastelt! Jetzt habe ich wohl 2 Möglichkeiten entweder ich stelle es ins Jobforum oder lerne Javascript!
Trotzdem hier mal der Quelltext:

Code

#wrapper {
margin: 0 auto;    
width: 960px;
max-width: 100%;
}


#content-wrapper {    
width: 590230px;
max-width: 100%;
float: left;
}


#header {
clear: both;
background: green;
width: 700px;
height: 233px;
}


#navi {
clear: both;    
}


#content {
float: right;
width: 360px;    
height: 730px;
background: #C1EAFF;
}




#hauptnav {
float: left;    
width: 230px;
height: 730px;
background: #DDFFA6;
}


#sidebar {
float: right;    
width: 370px;
height: 730px;
background: #DDFFA6;
}


#footer {
clear: both;    
width: 1050px;
background: #FF8ACD;
}

Alles anzeigen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Basis-Vorlage - Modernes Webdesign</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content=" ... " />
<meta name="keywords" content=" ... " />
<meta name="description" content=" ... " />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="print" href="druck.css" />
<style type="text/css" media="screen">
@import url( css.css );
</style>


<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion ändert die X- und Y-Ausdehnung des DIV-Elements
function set_dimensions (width, height) {
  // Breite des DIV-Elements setzen
  document.getElementById ('sidebar').style.width = width;
  // Höhe des DIV-Elements ändern
  document.getElementById ('sidebar').style.height = height;
}
// -->
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion ändert die X- und Y-Ausdehnung des DIV-Elements
function set_dimensions1 (width, height) {
  // Breite des DIV-Elements setzen
  document.getElementById ('content').style.width = width;
  // Höhe des DIV-Elements ändern
  document.getElementById ('content').style.height = height;
}
// -->
</script>


</head>
<body>
<!-- - - - - - - - - - - Seitenwrap - - - - - - - - - - -->
<div id="wrapper">


<!-- - - - - - - - - - - Kopfbereich - - - - - - - - - - -->
<div id="header">
</div><!-- Ende  Kopfbereich -->


<!-- - - - - - - - - - - contentwrap - - - - - - - - - - -->
<div id="content-wrapper">


<!-- - - - - - - - - - - Linker Bereich mit Navigation - - - - - - - - - - -->
<div id="hauptnav">
</div><!-- Ende  Linker Breich -->


<div id="content"><!-- - - - - - - - - - - Hauptbereich - - - - - - - - - - -->
<a href="javascript:set_dimensions ('150px', '730px')" title="">Gr&ouml;&szlig;e des DIV neu setzen1</a><br>
<a href="javascript:set_dimensions ('370px', '730px')" title="">Vorherige DIV-Ausdehnung setzen1</a>


<a href="javascript:set_dimensions1 ('590px', '730px')" title="">Gr&ouml;&szlig;e des DIV neu setzen2</a><br>
<a href="javascript:set_dimensions1 ('350px', '730px' style="@import url( css.css );")" title="">Vorherige DIV-Ausdehnung setzen<2/a>
</div><!-- Ende Hauptbereich -->
</div><!-- Ende contentwrap  -->


<div id="sidebar"><!-- - - - - - - - - - - Seitenleiste - - - - - - - - - - -->
</div><!-- Ende  Seitenleiste -->


<div id="footer"><!-- - - - - - - - - - - Seitenfuss - - - - - - - - - - -->
</div><!-- Ende Seitenfuss -->
</div><!-- Ende Seitenwrap  -->


</body></html>

Alles anzeigen

synaptic

also du kannst das ganze so machen, indem du ne eigene klasse für die bereiche schrebst sagen wir einmal die klassen .main_normal .main_modified, side_normal, side_modified das machste für alle betroffenen divs

Code

function setBigDim(){
var main = document.getElementById("ID_Deines_main-Div");
var side = document.getElementById("ID_Deines_seiten-Div");
if(main.className=="main_normal"){
 main.className="main_modified";
side.className="side_modified;
}
else{
 main.className="main_normal";
side.className="side_normal;
}




}

Alles anzeigen

die modified-klassen ergeben den grossen style und die normal-klassen eben den normalen style.
der teil hier:
var main = document.getElementById("ID_Deines_main-Div");
var side = document.getElementById("ID_Deines_seiten-Div");
kann eben beliebig um weitere divs erweitert werden, jedoch musste dass dann auch entsprechend in den geschweiften klammern bei if und else reinschreiben...

haillo

Du meinst ich füge den betroffenen div`s jeweils zwei class hinzu einmal .main_normal und einmal .main_modified und und gebe im dann in css einmal das größer maß und einmal das kleinere?
Und wie verbinde wie löse ich mit dem Link die Vergrößerung aus?
Ich hoffe das du mir da nocheinmal helfen kannst!
MfG
haillo

synaptic

nee nee du fügst den betroffenen divs nur 1 mal class hinzu und trägst dort die normale klasse ein.
die klassen mit den vergrösserten zuständen schreibste ganz normal in die css-datei, die werden dann erst vom javascript aktiviert.

und wie du das aufrufst hängt davon ab, wie es generell funktionieren soll...
im link ginge es so:

Code

<a href="javascript:setBigDim()">hier klicken</a>

oder

Code

<a href="blabla.html" onclick="setBigDim(); return false;">hier klicken</a>

onclick="setBigDim(); kannste aber in jedes tag schreiben, das man anklicken muss um die aktion durchzuführen

div per javascript vergrößern und verkleinern

Tags

Benutzer online in diesem Thema