Ändern einer CSS-Klasse in Abhängigkeit von Textumbruch und Fensterbreite (Jquery oder JavaScript)

Ich habe ein responsives Design mit einigen Textspalten. Die Spalten haben h2-Überschriften, und links von den Überschriften sind Bildsymbole - schön vertikal zentriert zum Überschriftentext. Das Problem tritt auf, wenn ich die Fensterbreite einstelle. Wenn die einzelnen Überschriftenzeilen umbrechen, sind sie nicht mehr vertikal mit den Symbolen ausgerichtet.Ändern einer CSS-Klasse in Abhängigkeit von Textumbruch und Fensterbreite (Jquery oder JavaScript)

Im Grunde versuche ich ein Skript zu schreiben, das die Klasse der Überschrift ändert, wenn es in zwei Zeilen umgebrochen wird, so dass ich die vertikale Position davon ändern kann, um zentriert zu werden.

Ich bin wirklich neu zu scripting so dass ich nicht sicher bin, wie es zu schreiben, aber das ist es im Wesentlichen:

if window width > 768 and if lines of text in #services h2 = 1 

#services h2 { 
top:9px; 
} 

else 

if window width > 768 and if lines of text in #services h2 > 1 

#services h2 { 
top:1px; 
}

Könnte mir jemand helfen, diese richtig zu formatieren? Ich benutze bereits jQuery für einige andere Sachen, wenn das möglich ist, wäre das großartig.

Danke!

EDIT: Der wichtigste Teil dieser ist die Änderung einer Klasseneigenschaft, wenn eine Zeile von 1 Zeile bis 2. Wraps Dies ist der kritische Teil ist:

if lines of text in #services h2 = 1 

#services h2 { 
top:9px; 
} 

else 

if lines of text in #services h2 > 1 

#services h2 { 
top:1px; 
}

Quelle

2012-04-09 Sean Tubridy

-1

Ich bin nicht sicher über die 'und wenn Zeilen von Text' aber die linke Seite des UND, wäre:

-EDIT- ich sehe, lassen Sie sehen, ob das was Sie wollen.

$(window).resize(function(){ 
    var h =$('#services h2').css('line-height'); 
    var size = $(window).width(); 
    if (size > 768){ 
      if($('#services h2').height() == h){ 
       $('#services h2').css('top','1px') 
      } 
    }else{ 
      if($('#services h2').height() > 2*h){ 
       $('#services h2').css('top','9px') 
      } 
    } 

});

Quelle

2012-04-09 19:46:16

Wenn Sie den Code zeigen können, gewinnen Sie ein jsfiddle.net oder etwas, das es einfach zu verstehen wäre –

Danke Toni. Ich sah woanders, dass Sie die Höhe eines Containers mit Javascript erkennen konnten und dass, wenn Text in 2 Zeilen umgebrochen wird, er offensichtlich die Höhe ändert. Vielleicht ist das ein Ansatz? –

Auch könnte ich jsfiddle verwenden, aber was ich schrieb, ist kaum Code. :) –

Kein JavaScript (mit jQuery) benötigt werden, verwenden reine CSS: http://www.css3.info/preview/media-queries/.

Eine längere Erklärung kann bei http://css-tricks.com/css-media-queries/

Quelle

2012-04-09 19:48:24 Bergi

Bergi - Danke, aber ich weiß, wie Medienabfragen zu verwenden, aber wenn ich falsch liege, kann ich eine Klasse nicht ändern, wenn Text umbricht Medien-Anfragen. Das ist es, was ich hauptsächlich versuche - die Ausrichtung eines Elements zu ändern, basierend darauf, wie viele Textzeilen es gibt. Das Javascript zur Erkennung der Fensterbreite ist zusätzlich zu den Medienanfragen, die ich verwende, weil ich nicht möchte, dass irgendwelche der Skriptänderungen wirksam werden, wenn das Fenster unter 768 liegt - Sinn machen? –

In der Verteidigung von @Bergi klingt es wie Media-Abfragen der richtige Weg, dies zu tun. Ich sehe wirklich nicht, warum du JS benutzen solltest! –

Ah OK. Zeilen mit JS zu zählen ist keine gute Idee, denke ich. Du könntest es mit berechneten Werten von Höhe und Zeilenhöhe und Schriftgröße machen, ja, aber es wird unangenehm werden. Haben Sie ein Tabellenlayout probiert (kein Scherz), das am besten zu Ihrer Anforderung passt? – Bergi

Könnten Sie nicht nur stellen Sie die vertikale Position des Hintergrundbildes gefunden werden 50% sein? Anstatt js zu einer relativ kleinen kosmetischen Veränderung hinzuzufügen.

Quelle

2012-04-09 19:53:26 matpol

Matpol es ist kein Hintergrundbild - es ist schwebte auf der linken Seite der h2. –

positioniere es absolut?gleiche idee setze die vertikale position auf 50% – matpol

hmmm, vielleicht - ich werde es versuchen. Vielen Dank. –

Ändern einer CSS-Klasse in Abhängigkeit von Textumbruch und Fensterbreite (Jquery oder JavaScript)

Antwort

Verwandte Themen