• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Eine Klasse mittels JQuery hinzufügen - dauert viel zu lange

Tabula_Rasa

Mitglied
Hallo,

ich habe versucht eine Klasse mittels JQuery hinzuzufügen. Verkleinere ich den Browser so geschieht die Anpassung auf PC recht schnellt. Auf dem Handy dauert es einige Sekunden.

HTML:
  <div class="row" style="margin-bottom: 100px;clear: both;">
    @if (count($videos) > 0) @foreach ($videos as $video)
    <div class="col-3 col-md-3 col-lg-4 col-xs-12" style="margin-bottom:8px;padding-top:10px;min-width: 240px;max-width:310px;" onmouseover="this.style.border='1px solid grey';" onmouseout="this.style.border='none';">
      <img data-wert="https://www.youtube.com/embed/{{$video->embed_yt}}" src="{{$video->pic_path}}" style="width:100%;height:150px;min-width: 210px;" alt="time">
      <br><br>
      <h3>{{$video->title}}</h3>
      <p style=" color: #bbbbbb;">{{$video->tag}}</p>
      @if(!Auth::guest()) @if(Auth::user()->id == $video->user_id) {!!Form::open(['action' => ['VideosController@destroy', $video->id], 'method' => 'POST', 'class' => 'float-right'])!!} {{Form::hidden('_method', 'Delete')}} {{Form::submit('Delete', ['class'=>'btn
      btn-danger'])}} {!!Form::close()!!}
      <a type="button" class="btn" href="/videos/{{$video->id}}/edit" style="float:right;">Edit</a> @endif @endif
    </div>
    @endforeach
    <script>
    $( window ).resize(function() {
   if($(window).width() <=768) $('.row').addClass("justify-content-center");
  else $('.row').removeClass("justify-content-center");
});
</script>

Warum dauert das auf dem Handy einige Sekunden bis die Klasse hinzugefügt wird und die Videos zentriert werden? Wie kann ich das beheben?
 
Werbung:
Das Lauschen auf resize ist performance-intensiv, da dieses Event häufig triggert. Daher kann es sein, dass es auf mobilen Geräten, wo die Rechenleistung begrenzt ist, bewusst ausgebremst wird. Ich empfehle, statt mit Javascript zu arbeiten, Mediaqueries zu verwenden und das nötige CSS direkt zu setzen.
Ich hatte etwas ähnliches mal mit background-attachment:fixed: Dieses wird aus dem selben Grund von iOS nicht unterstützt und Versuche, es mit JS nachzubilden, werden ausgebremst oder ganz blockiert.
Das, was ich bisher gelesen habe, ist, dass man mit Media Queries und Css nicht eine Klasse hinzufügen kann, sondern halt nur zwischen Klassen wechseln kann. Ich möchte nicht zweimal denselben Content mit unterschiedlicher Klasse im Code stehen haben, oder geht es nicht anders? Wie hast du dir das so vorgestellt?
 
Du musst auch nicht zweimal den selben Code hinschreiben. Es wird nur das überschrieben, was in den media-queries drinnsteht.

Beispiel:
CSS:
background: red;
color: green;
height: 100px;
Im media query schreibst du als Beispiel:
CSS:
color: black;
Dann gilt height:100 und background:red immernoch. Nur color hat sich hier verändert.
 
Werbung:
Ja, aber es geht um eine Klasse, die ich überschreiben will... wie soll ich eine Klasse mittels Css überschreiben? Hättest du ein Beispiel wie ich die Klasse "123" zur Klasse "1234" ändern kann?
 
Ja, aber es geht um eine Klasse, die ich überschreiben will... wie soll ich eine Klasse mittels Css überschreiben? Hättest du ein Beispiel wie ich die Klasse "123" zur Klasse "1234" ändern kann?

Dir fehlt es viel mehr an CSS Knowledge als am Rest habe ich so das Gefühl :rolleyes:
Du überschreibst Eigenschaften einer Klasse - keine Klassen an sich.

CSS:
.row {
    color: #CCC;
}

@media all and (max-width: 768px) {
    .row {
        color: #333;
    }
}
 
Zuletzt bearbeitet:
Dir fehlt es viel mehr an CSS Knowledge als am Rest habe ich so das Gefühl :rolleyes:
Das könnte sogar stimmen . Habe mich nie wirklich mit CSS beschäftigt, da für jedes Problem eine Antwort im Internet zu finden war :p. Bei Laravel usw. musste ich ein Verständnis für die Grundlagen entwickeln und habe da etwas mehr Zeit investiert.. wird Zeit Css zu lernen und zu verstehen :)

Edit: Könntest du eine Website verlinken, die zeigt, wie man mit Media Queries eine Klasse hinzufügen bzw. ändern kann? Finde da wirklich nichts Brauchbares. Alles was ich lese, ist, dass es nicht möglich sei (englischsprachige Foren)
 
Zuletzt bearbeitet:
Werbung:
w3schools behandelt alles, was es bei CSS und HTML so gibt.
„Media-queries w3schools“ sollte als Suchbegriff reichen.

w3schools bietet im übrigen auch alles über JS, JS-libraries, Frameworks, PHP, etc. an.
Nur so zur Info.
 
Dies ist allerdings nicht möglich. Ich bin jedoch reflexhaft davon ausgegangen, dass Du die Klasse benutzen willst, um CSS-Eigenschaften zu ändern, etwa so:
Code:
.row.justify-content-center {
    text-align: center;
}
In dem Fall hat eine Mediaquery den selben Effekt, ohne dass Du mit Javascript eine Klasse hinzu fügen musst:
Code:
@media all and (max-width: 768px) {
    .row {
        text-align: center;
    }
}
Dann ist nichts mehrfach.
Mit Bootstrap bin ich nicht vertraut, aber dein HTML lässt vermuten, dass Du es einsetzt und dass die Klasse die Flex-Eigenschaft justify-content beeinflusst. Dann müsste das CSS so aussehen:
Code:
@media all and (max-width: 768px) {
    .row {
        justify-content: center;
    }
}
So habe ich das ganze nie betrachtet. Im Endeffekt beinhaltet eine Klasse ja CSS-Code. Diese kann ich dann wahrscheinlich erweitern bzw. überschreiben. Danke für die neue Perspektive. Einen Versuch ist es wert :)
 
Zurück
Oben