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

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Tabula_Rasa

Mitglied
12 Mai 2017
186
2
18
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.425
284
83
66
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.
 

Tabula_Rasa

Mitglied
12 Mai 2017
186
2
18
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?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
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.
 

Tabula_Rasa

Mitglied
12 Mai 2017
186
2
18
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?
 

scbawik

Senior HTML'ler
14 Juli 2011
2.542
448
83
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:

Tabula_Rasa

Mitglied
12 Mai 2017
186
2
18
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:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.425
284
83
66
wie man mit Media Queries eine Klasse hinzufügen bzw. ändern kann?
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;
    }
}
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
186
2
18
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 :)
 
Werbung:

Latest posts