zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery Bildposition in Abhängigkeit der Größe ändern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2014, 19:03
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard jQuery Bildposition in Abhängigkeit der Größe ändern

Hallo ins Forum,

ich habe ein Logo in einem <div> mit 50% Breite und einem darin liegenden Bild, das sich beim vergrößern des Browserfensters entsprechend anpasst. Der Ansatz ist "mobile first", so dass ich beim Wert top:31px von der kleinsten angepassten Bildgröße (280px) ausgehe und es dann da sitzt wo es soll.

Habe ich nun einen größeren Vieport und das Bild vergrößert sich (bis max 350px), müsste auch der Wert für top entsprechen höher werden. Unten habe ich ein script, das mir genau einmal den Wert neu einstellt. Ich müsste aber mehrere Bildbreiten (von 280 bis 350px) abfragen, um beim Wert vom Ausganswert top:31px (bei der Bildbreite von 280px) bis zum Endwert top:36px (bei einer Bildgröße von 350px) zu gelangen. Wie macht man das?

Danke für n Tipp und Gruß
mimii

Code:
<div id="logo">
  <h1>
     <img class="logo" width="350" border="0" height="116" title="test" alt="test" src="Logo.png">
  </h1>
</div>
Code:
img {
    height: auto;
    max-width: 100%;
} 
#logo {
    width: 50%;
}
#logo img {
    position: relative;
    top: 31px;
}
Code:
$(document).ready(function(){
	var breite = $('#logo img').width();
	if(breite >= 300 ) {
		$('#logo img').css('top','36px');			
	}
});

Geändert von mimii (15.10.2014 um 20:27 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.10.2014, 10:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.092
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Vergiss das mit dem Javascript. Ja, du hast da schon Arbeit reingesteckt und man könnte doch... Nein, vergiss es.
Dafür gibt es CSS Mediaqueries, mit denen du das unkompliziert umsetzen kannst. Verabschiede dich auch von festen Pixelwerten sondern platziere deine Elemente in Relation zueinander. Sprich: Positioniere dein Element zB immer 20% von links und lass es immer 40% Größe haben mit einer min-width und min-height von xyz-Pixeln.
Das, was du mit jQuery machen willst ist kein mobile-first sondern ein zusammenpfuschen von Dingen, die dir nur Probleme machen können.
zB um nur eines zu nennen: Du schreibst von "mobile first". Dreht dein Benutzer sein "mobile" dann müsstest du wieder alles neu per JS berechnen. Aber da wird kein document.ready abgefeuert.
Zusammenfassung: Vergiss das mit jQuery wirklich, auch wenn du jetzt einiges löschen musst. Und verwende CSS Mediaqueries, dafür sind sie da.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.10.2014, 16:57
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke für die Antwort. Das mit den Mediaqueries hatte ich schon und fand es recht unschick, ca. alle 50 px Viewportvergrößerung abfangen zu müssen, um das Bild dann um 1px nach unten zu setzen.

Hier mal ein rudimenäres fiddle, um zu verdeutlichen was ich eigentlich erreichen will. Die Schrift vom Logobild soll immer auf den Rand vom Content aufsitzen, das "g" soll in den Content hineinragen.

Nun verkleinert/vergrößert sich das Logobild natürlich mit seinem übergeordneten div. Im Beispiel habe ich jetzt keine Breakpoints gesetzt, spielt aber für's Verständnis aber auch keine Rolle, denke ich.

Danke und Gruß
mimii
Mit Zitat antworten
  #4 (permalink)  
Alt 17.10.2014, 17:20
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.375
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Vielleicht solltest du dir einfach mal überlegen, ob diese Vorgangsweise und der Sinn dahinter einfach unerschließbar sind?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 17.10.2014, 17:32
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
Die Schrift vom Logobild soll immer auf den Rand vom Content aufsitzen, das "g" soll in den Content hineinragen.
Und warum ging / geht es nicht mit Inline-Blocks und Vertical-Align?
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #6 (permalink)  
Alt 17.10.2014, 20:21
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Die inline-Blocks laufen (fast) so wie es sein soll. Hier geht es lediglich darum dass die Schrift vom Logo auf dem content aufsitzt und das immer, egal welche Größe das Logo grad hat.

Vielleicht denke ich ja zu verquert, ich wollte die position - top jeweils anpassen.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.10.2014, 21:08
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
Vielleicht denke ich ja zu verquert, ich wollte die position - top jeweils anpassen.
Ja, tust Du.
Wie wäre es mit einem negativen unteren Margin für das Bild selbst oder für das div ums Bild?
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 17.10.2014, 21:11
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

So in etwa:
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>mimii :: xhtmlforum.de</title>
<style>
img {
  height: auto;
  max-width: 100%;
} 
header {
  position: relative;
  white-space: nowrap;
}
#logo, #navi {
  width: 50%;
  display: inline-block;
}
#logo {
  vertical-align: bottom;
}
#logo img {
  vertical-align: bottom;
  margin-bottom: -20px;
}
#navi {
  vertical-align: top;
  background-color:#abc;
}
#navi p {
  white-space: normal;
}
#content {
  background-color:#ccc;
  height:200px;
  padding:20px;
}
</style>
<header class="clearfix">
  <div id="logo">
    <img src="http://www.dj-macomar.de/images/test.png" alt="test">
  </div>
  <div id="navi">
    <p>Navigation </p>
  </div>
</header>
<div id="content">
    <p>Content</p>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? papalapap Javascript & Ajax 8 13.08.2012 23:00
jQuery (coda slider) und prototype (Lightbox) konflikt computernerd Javascript & Ajax 3 21.09.2011 20:04
jquery Plugins in Wordpress nutzen? hdwolle Javascript & Ajax 2 10.01.2010 17:15
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 17:03
iframe Größe bei Laden des Inhalts an dessen Größe anpassen wiseguy Javascript & Ajax 0 24.06.2007 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:48 Uhr.