Hey, ich habe das Problem, das wenn ich 4 Spans die alle in einer Reihe sind verschwinden lasse mit Jquerry, dass dann automatisch der Span Container welcher übrig ist, die Width von den anderen 4 Spans übernimmt.
Span 1 = 20%
Span 2 = 20%
Span 3 = 20%
Span 4 = 20%
Span 5 = 20%
Nachdem Span 2-5 verschwinden :
Span 1 = 100% width
Also Span 1 übernimmt automatisch die width von den verschwundenen Spans und wird also immer größer.
Das ist auch das was ich wollte, nur wollte ich dies selber machen zbs. mit einer Animation in Jquerry, damit es nicht so laggy aussieht.
Hier ein paar Bilder um das Problem besser darzustellen :
Vorher :
Nachdem auf ###TEXT1### geklickt wurde.
Hier ist noch der Code :
CSS
HTML
Jquerry
Ich hoffe jemand kann mir helfen, danke im voraus
Hab die Lösung jetzt selber heraus gefunden
einfach bei ".Kategorie" "max-width:20%" setzten.
Dann wird es nicht größer als 20%, falls wer anders mal das Problem hat
Span 1 = 20%
Span 2 = 20%
Span 3 = 20%
Span 4 = 20%
Span 5 = 20%
Nachdem Span 2-5 verschwinden :
Span 1 = 100% width
Also Span 1 übernimmt automatisch die width von den verschwundenen Spans und wird also immer größer.
Das ist auch das was ich wollte, nur wollte ich dies selber machen zbs. mit einer Animation in Jquerry, damit es nicht so laggy aussieht.
Hier ein paar Bilder um das Problem besser darzustellen :
Vorher :
Nachdem auf ###TEXT1### geklickt wurde.
Hier ist noch der Code :
CSS
Code:
#kategorien
{
position:absolute;
width:100%;
height: 100%;
margin:0;
padding:0;
border:0;
display: flex;
}
.kategorie
{
position:relative;
height:100%;
margin:0;
padding:0;
border:0;
flex: 20;
-webkit-flex: 1;
-ms-flex: 1;
}
#kategorie1
{
background-color:green;
}
#kategorie2
{
background-color:yellow;
}
#kategorie3
{
background-color:gray;
}
#kategorie4
{
background-color:brown;
}
#kategorie5
{
background-color:#446353;
}HTML
HTML:
<div id="kategorien">
<span id="kategorie1" class="kategorie">###TEXT1###</span>
<span id="kategorie2" class="kategorie">###TEXT2###</span>
<span id="kategorie3" class="kategorie">###TEXT3###</span>
<span id="kategorie4" class="kategorie">###TEXT4###</span>
<span id="kategorie5" class="kategorie">###TEXT5###</span>
</div>Jquerry
Code:
$(document).ready(function()
{
$("#kategorie1").click(function()
{
slideandHide("kategorie2");
slideandHide("kategorie3");
slideandHide("kategorie4");
slideandHide("kategorie5");
});
function slideandHide(value){
var fullwidth = $("#kategorien").css("width");
$("#" + value).css({"left": 0}).animate({"left":fullwidth},1000);
$("#"+ value).hide(0);
};
});Ich hoffe jemand kann mir helfen, danke im voraus
Ergänzung ()
Hab die Lösung jetzt selber heraus gefunden
einfach bei ".Kategorie" "max-width:20%" setzten.
Dann wird es nicht größer als 20%, falls wer anders mal das Problem hat
Zuletzt bearbeitet:
