Ergebnis 1 bis 6 von 6

Thema: div per javascript vergrößern und verkleinern

  1. #1
    Fortgeschrittene/r
    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard div per javascript vergrößern und verkleinern

    Ich habe ein dreispaltiges layout.

    <div id="wrapper">
    <div id="content-wrapper">
    <div id="content">
    </div>
    <div id="mainnav">
    </div>
    </div>
    <div id="sidebar">
    </div>

    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-Code:
    <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>
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: div per javascript vergrößern und verkleinern

    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,..)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div per javascript vergrößern und verkleinern

    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;
    }

    HTML-Code:
    <!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>

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: div per javascript vergrößern und verkleinern

    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;
    }
    
    
    }
    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...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div per javascript vergrößern und verkleinern

    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

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: div per javascript vergrößern und verkleinern

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. GIF-Animationen vergrößern
    Von hamil im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 12
    Letzter Beitrag: 17.11.2008, 17:39
  2. Vergrößern
    Von Gast im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 9
    Letzter Beitrag: 22.05.2007, 20:43
  3. container mittel css und javascript vergrößern
    Von iskdjim im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 11.01.2007, 18:08
  4. BilDa verGrößerN....
    Von GioVa im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 7
    Letzter Beitrag: 01.08.2006, 08:44
  5. Seitenbreite beim Vergrößern und Verkleinern
    Von im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 15.11.2005, 22:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •