jQuery: Inhalt verschieben, wenn Browser skaliert wird

[brushmaster]

Hallo zusammen, ich bräuchte eure Hilfe bei folgendem Problem:

Ich möchte mit jQuery einen bereits sichtbaren Inhalt (eine Sidebar, welche, die Klasse .newskasten hat) in ein ebenfalls bereits vorhandenes div (hat die Klasse .sidebarmobil) verschieben, wenn die Weite des Browserfensters unter eine gewisse Größe skaliert wird bzw. liegt. Dies klappt mit dem untenstehenden Code ganz gut. Nun möchte ich aber, dass der Inhalt auch wieder in die Ausgangsposition zurückkommt, wenn das Browserfenster wieder größer skaliert wird.

Das ist bei dem Code natürlich noch nicht der Fall, hier bräuchte ich eure Hilfe, da ich auf dem JQuery Gebiet noch recht neu bin.
Der Code kommt in ein Custom jQuery Feld in Wordpress, daher die Syntax des Codes. Vielen Dank im voraus!

$j(window).resize(function() {
  if ($j(window).width() < 800) {
  $j('.newskasten').appendTo('.sidebarmobil');
  }
});

 

[Myhar]

Ich möchte einen Text, wo nicht ab und zu etwas fett geschrieben wird, nur weil der Threadersteller glaubt dass es so besser lesbar ist. Aber das macht den Text nur schlecht lesbar.

Zu deinem Problem: Wie oft glaubst du, vergrößern und verkleinern Leute den Browser während des Surfens? Zu 99.999% gar nicht, also brauchst du dich um dieses Problem auch nicht wirklich kümmern. Auf Desktop-Geräten ist der Browser doch von Haus aus meistens groß genug eingestellt und auf "kleinen" Geräten kannst du den Browser gar nicht größer machen.

 

[brushmaster]

Hallo Myhar, danke für deine Antwort und entschuldige das Fettgeschriebene, jetzt wo ichs sehe...gruselig.

Im Prinzip hast du recht, das skalieren des Browsers kommt nicht so häufig vor, allerdings gibt es immer mal wieder Besucher die Ihr Fenster noch von der letzen Session kleiner skaliert hatten und nach dem laden der Seite größerskalieren. Oder Sie müssen zwischendurch mal das Browserfenster skalieren; Dann steht der Inhalt an der falschen Stelle, was nicht gut ist.

Die andere Situation ist leider das Tablet: Lade ich die Seite im Hochformat und schwenke auf Landscape um, bleibt der Inhalt ebenfalls stehen, das ist dann leider ein großes Problem, was ich vermeiden muss.

 

[Myhar]

Ja, für den Wechsel von Quer- auf Hochformat etc. muss man schon eine Lösung haben.

Du kannst deine Funktion so erweitern (Was du genau an code reinschreiben musst kann ich dir nicht sagen, da ich nicht Hellsehen kann)

$j(window).resize(function() {
  if ($j(window).width() < 800) {
  $j('.newskasten').appendTo('.sidebarmobil');
  }
  if ($j(window).width() < 1000) {
  //Here your code
}
   if ($j(window).width() < 1400) {
//more code? 
}
});

 

[brushmaster]

Erstmal vielen Dank für den Code, in die Richtung hab ich mir das irgendwie auch gedacht; der Code funktioniert auch, allerdings bleibt hier leider beim skalieren des Browsers / wechsel von Hoch auf Landscape immer noch das Problem, dass der Inhalt dann nach Erreichen des jeweiligen if-Statements (z.B width() 800) nicht mehr auf das dann vergangene Statement (width() 1000) reagiert.

Zudem müsste der Code noch so etwas wie ein "on page load" ganz am anfang bekommen, da die Statements sonst nur beim skalieren, nicht aber beim laden der Seite ausgeführt.

Ich glaube, dass ich das ganze heute Abend nochmal kurz visualisiere, sonst bleibe ich zu vage mit meinen Fragen.

 

[Aelfry]

Ich möchte mit jQuery einen bereits sichtbaren Inhalt (eine Sidebar, welche, die Klasse .newskasten hat) in ein ebenfalls bereits vorhandenes div (hat die Klasse .sidebarmobil) verschieben, wenn die Weite des Browserfensters unter eine gewisse Größe skaliert wird bzw. liegt. Dies klappt mit dem untenstehenden Code ganz gut. Nun möchte ich aber, dass der Inhalt auch wieder in die Ausgangsposition zurückkommt, wenn das Browserfenster wieder größer skaliert wird.

Das ist bei dem Code natürlich noch nicht der Fall, hier bräuchte ich eure Hilfe, da ich auf dem JQuery Gebiet noch recht neu bin.
Der Code kommt in ein Custom jQuery Feld in Wordpress, daher die Syntax des Codes. Vielen Dank im voraus!

$j(window).resize(function() {
  if ($j(window).width() < 800) {
  $j('.newskasten').appendTo('.sidebarmobil');
  }
});

Keine gute Idee, den HTML code über JS zu verschieben, um mobile Geräte / kleine Bildschirme zu bedienen...
Sowas würde ich immer versuchen über CSS zu lösen (Stichwort "Media Queries").

Aber um deine Frage zu beantworten:
Wenn der Wechsel von groß zu klein funktionert, warum nicht genauso für die andere Richtung machen?

$j(window).resize(function() {
  if ($j(window).width() < 800) {
    $j('.newskasten').appendTo('.sidebarmobil');
  } else {
    $j('.newskasten').appendTo('.xyz'); // Klasse/Selektor vom ursprünglichen container
  }
});

Und damit es bereits vor einem resize ausgelöst wird einfach in document ready packen (und den code am besten in eine Funktion)

function moveNewskasten() {
  if ($j(window).width() < 800) {
      $j('.newskasten').appendTo('.sidebarmobil');
  } else {
      $j('.newskasten').appendTo('.xyz');
  }
}

$j(document).ready(moveNewskasten);
$j(window).resize(moveNewskasten);