Javascript zu ändern, div Breite dynamisch

Kann jemand mir helfen, zu erstellen Sie eine javascript?

Lassen Sie mich erklären, ich habe 2 divs

1) linke div-Breite 85%

2) die Rechte div-Breite 15%

da ist also was ich ändern will Breite für den linken div. wie, wenn ich entfernen oder ausblenden Rechte div Links div-Breite soll 100% dynamisch mit javascrpt.

Ohne den code hier, den Menschen nicht finden, einfach Ihre Frage zu beantworten. "Erstellen" - Demo
Sie die Jungs auch sehen kann was ich versuche zu tun, client-acumenadagency.com/sed
in diesem div werden müssen, um die volle Breite, wenn das andere div hide <div id="Größe" class="content-left"></div> und das andere div ist <div id="button" class="navbar rechts"></div>
Ich würde empfehlen, Sie tun das nicht mit JavaScript. Tun Sie es mit CSS statt. Nur JavaScript verwenden, um die Klassen.
wie kann ich das mit css? können Sie mir helfen plz
Viele Möglichkeiten, Sie könnte es mit CSS. Hier ist eins.

InformationsquelleAutor HMS Designz | 2015-05-18

3

Ich habe es mit JavaScript:

ARBEITEN : Demo 1

AKTUALISIERT : Demo 2

AKTUALISIERT : Demo-3 : Animieren slide in/out mit CSS-übergängen.

HTML
```
<div class="wrapper">
<span class="div1"></span><span class="div2"></span>

</div>
<button>Remove</button>
```
CSS : AKTUALISIERTE
```
html, body {
    width:100%;
    margin:0;
}
.wrapper {
    width:100%;
    display:inline-block;
    height:auto;
    float:left;
}
.div1 {
    display:inline-block;
    width:85%;
    height:40px;
    background:#333;
}
.div2 {
    display:inline-block;
    width:15%;
    height:40px;
    background:green;
}
 /*ADDED BELOW LINES*/

 .div1, .div2
 {
  /* Change Seconds(here it's 0.5s) as per your requirement */
  -webkit-transition: all 0.5s ease-in-out; 
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }

 .addRemoveContent
 {
   width:100%;
 }

 .addRemoveMenu
 {
   width:0;
 }
```
JS
```
$("button").click(function () {
    $(".div2").hide(10);
    $(".div1").css("width", "100%");

});
```
JS:AKTUALISIERT - Bringen Rechte div zurück
```
$("button").click(function () {
    $(".div2").toggleClass("addRemoveMenu");
    $(".div1").toggleClass("addRemoveContent");

});
```
- Sie hat einen netten job, aber können Sie bitte machen es nutzbar für mich, auf klicken Sie auf die Schaltfläche der rechten Seite kommen nochmal zeigen. Können Sie mir helfen?
- Wenn noch irgendwelche Probleme fühlen sich frei zu Fragen!
- Toll, dass es für Sie gearbeitet! Wenn diese Antwort hilfreich war konnte Sie akzeptieren diese Antwort. Dank
- Ja, verdammt, jetzt funktioniert es und es ist nur zu lösen mein Problem
- Sorry für die Fragen wieder und wieder, aber wenn Sie finden diese Antwort hilfreich ist, bitte ich Sie zu akzeptieren diese Antwort(nur wenn hilfreich). Siehe Hier, als Sie neu in hier.
- können Sie mir helfen, um meine Webseite noch attraktiver? Siehe, ich habe getan, mit button ein-und ausblenden auf der rechten Seite, wie Sie mir geholfen vor nun möchte ich es schieben, wie wenn einige einem Klick auf den toggle-button der rechten Leiste zu verstecken und zeigen Sie, wie eine glatte rutschte. Ich hoffe, du hast meinen Punkt. hier ist der JQ, die ich geändert
- lassen Sie mich zuerst sehen, gib mir den link.
- Danke!!! Das ist meine funktionsfähige demo - client-acumenadagency.com/sed
- Check das neue update(No: 3)
- Sie haben erstaunliche Arbeit, aber können wir auch schieben Sie die Rechte Menüleiste reibungslos? Sie können besuchen Sie gleichen link client-acumenadagency.com/sed
- das problem ist in Ihre html - /js-code. Finden Sie diese Bild
- Sehen Sie, dies ist das Skript, was ich mit $("button").klicken Sie auf(function () { var getDivStyle = document.getElementById('div2').Stil.display; if(getDivStyle == 'block') { $(".navbar.rechts").hide(10); $(".content-Links").css("width", "100%"); } else { $(".navbar.rechts").Karte(10); $(".content-Links").css("width", "85%"); } $(".navbar.rechts").toggleClass("addRemoveMenu"); $(".content-Links").toggleClass("addRemoveContent"); });
- Warum brauchen Sie diese? schließlich sind Sie bereits mit toggleClass zwei Zeilen code. Versuchen Sie nach dem entfernen und halten nur diese beiden toggleClass-line
- Sorry, die zwei Linien?
- finden Sie diese Bild
- Ich habe entfernt, aber immer noch Recht Menüleiste bewegt sich plötzlich will ich ihn zu bewegen, geschmeidig wie die linke Seite, so können wir das tun?
- ja, tun Sie mir einen gefallen konnte ich Ihr alle html-und css-Dateien irgendwo, check it out, wenn der freie
InformationsquelleAutor divy3993

Hier ist eine demo für die CSS-Lösung: http://jsfiddle.net/yf3e5bhv/

Der Vorteil dieses Ansatzes ist, dass Ihre Vorlage ist deklarativ. Sie könnten eine einfache HTML-Seite von jedem Zustand der Anwendung. Meiner Meinung nach das deutlich aids-Entwicklung und-Wartung.

HTML

<input type="button" value="toggle" id="button" /><br /><br />
<div id="left"></div><div id="right"></div>

CSS

#left, #right {
    width: 50%;
    background-color: #ff0000;
    height: 50px;
    float: left;
}
#right {
    background-color: #00ff00;
}
body.hide-right #right {
    display: none;
}
body.hide-right #left {
    width: 100%;
}

var state = false;
document.getElementById("button").addEventListener("click", function () {
    var classname = "";
    if (state === false) {
        classname = "hide-right";
    }
    document.body.className = classname;
    state = !state;
});

Können Sie erheblich reduzieren Sie diesen code, wenn Sie verwenden eine Bibliothek wie jQuery:

$("#button").on("click", function () {
    $(document.body).toggleClass("hide-right");
});

Hallo Liebe @Halcyon, vielen Dank, mir zu helfen, aber es gibt ein problem wie so unterteilt man die linke und Rechte div bei 50%, aber ich brauche Links div-85% und Links 15%, so wie kann ich es machen mit dem code?
Ändern Sie einfach die Werte in der CSS.

InformationsquelleAutor Halcyon

0

Können Sie dies mit CSS und JavaScript. Schnelle und schmutzige Art und Weise:
```
.dynamic {
     margin-right: 0;
}
```
Setzen deine divs haben ein margin-right, dann verwenden Sie JavaScript für diesen Klasse wenn das div ausgeblendet ist.
```
function hideDiv(id, outerdiv) {
  document.getElementById(id).style.display = 'none'; //hide the right div
  $("#outdiv").addClass("dynamic"); //make the other div fill the space
}
```
InformationsquelleAutor Glen Despaux Jr

Einer einfachen Lösung, die ohne jQuery aufblasen. Funktioniert in Chrome, FF und IE 5-11, etc.

Nur für float-und width-Stile auf dem rechten DIV. Klicken Sie auf der linken DIV-toggle Breite zwischen 85% und 100%.

HTML:

<html>
<body>
    <style type="text/css">
        div {height: 10em; border: 1px blue solid; }
        #right { width: 15%; float: right; background-color: lightgreen; }
    </style>
<div>
    <div id="right"> </div>
    <div onclick="toggle()">click me</div>
</div>
<script type="text/javascript">
    function toggle() {
        var s = document.getElementById('right').style;
        s.display = s.display ? '' : 'none';
    }
</script>   
</body>
</html>

InformationsquelleAutor Roberto

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.