Probleme mit dem bewussten Platzieren von Elementen

onpoint · 23.07.2012

Guten Tag,

ich knobel zur Zeit an einem für mich kompliziertem Problem. Ich hoffe, dass Ihr schneller auf eine einfache Lösung kommt als ich.

Es geht um folgende Seite, die sich gerade im statischen Aufbau befindet:

Vorab:

Der Content soll von zwei Teslaspulen umschlossen werden. Von diesen führt jeweils ein animierter Blitz zum Logo. Dies werde ich wahrscheinich mit Javascript und Zeitverzögerungen lösen.

Nun das Problem:

Die beiden Spulen habe ich in den Hintergrund fixiert und diesen mit "background-size:cover" angepasst. Somit bleiben die Spulen immer an der rechten und linken seite des browserfensters.

Wenn ich nun jedoch das Browserfenster kleiner ziehe schiebt sich der Content logischerweise in die Säulen. Kann ich irgendwie einen Wert angeben, um zu bestimmten, an welchem Punkt dieser maximal stehenbleiben soll? Zusätzlich wäre da noch das Problem mit den Blitzen, die zum Logo führen. Da diese von den Säulen kommen sollen, finde ich keine optimale Lösung, da die Säulen wie gesagt im BG fixiert sind und logischerweise ihre Position wechseln.

Die einzige Möglichkeit wäre also: Die Säulen nicht in den BG fixieren, sondern separat in die Seite einfügen. Schön und gut, nur gibt es da photoshoptechnisch Probleme mit den Blitzen. Diese stehen im Ebenenmodus "Strahlendes Licht" und dieser ist auf einen Background angewiesen. Also kann ich die Säulen mit den Blitzen schonmal nicht als transparentes PNG exportieren, weil ich dann Farbverfälschungen hätte.

Könnt ihr meine Verzweiflung nachvollziehen?

Ich hoffe ihr habt einen guten Tipp für mich!

Viele Grüße und einen schönen Start in die neue Woche!

Myhar · 23.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

Um einmal deine Verzweiflung zu lindern: Arbeite mit min-width (oder auch max-width). Dann kannst du eine Mindest- und Maximalbreite definieren. (Das geht auch mit height)
Zu dem Blitz: Du kannst die aktuelle Position eines Elements ermitteln, aber nicht von einem HG-Bild. Auch würde ich dir raten, lass den Blitz weg. Animationen lenken einen Besucher nur ab

Außer, du hast keinen interessanten Inhalt, dann verwenden den Blitz. Dann sieht der User den Inhalt nicht.

onpoint · 23.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

Myhar schrieb:
Um einmal deine Verzweiflung zu lindern: Arbeite mit min-width (oder auch max-width). Dann kannst du eine Mindest- und Maximalbreite definieren. (Das geht auch mit height)
Zu dem Blitz: Du kannst die aktuelle Position eines Elements ermitteln, aber nicht von einem HG-Bild. Auch würde ich dir raten, lass den Blitz weg. Animationen lenken einen Besucher nur ab
Außer, du hast keinen interessanten Inhalt, dann verwenden den Blitz. Dann sieht der User den Inhalt nicht.

Hallo Myhar,

der Blitz ist ein Wunsch des Kunden, den er als sehr wichtig unterstreicht.

Zu min- und max-width / height:

Logisch, aber bringt mir das in dem Fall was? Es verändert sich ja nicht die Höhe / Breite des Contents, dieser wird nur anders platziert, wenn man das Browserfenster kleiner zieht / bzw. man sich die Seite auf einem kleineren Monitor anschaut.

Oder habe ich nen´ Denkfehler?

Danke für deinen Post!

Viele Grüße!

ADcosmos · 23.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

Hi,

doch es bringt etwas. Wenn du deinem html-Element eine min-width von 1100px gibst. Probier es aus!

MFg ADcosmos

mindraper · 23.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

hi

zunächst einmal eine frage: bis zu welchem browser / welchen browserversionen soll denn optimiert werden? falls der IE in deiner liste mit vorkommt (und das wird er

), müsstest du:

a)
einen polyfill einbauen, der das skalieren von hintergrundbildern in browsern ermöglicht, die background-size nicht verstehen

b)
auf das skalierende hintergrundbild verzichten, was dir beispielsweise das problem mit der positionierung des blitzes direkt mit abnimmt, weil die beiden teslaspulenköpfe immer auf der gleichen höhe von oben herab wären

solltest du dich für variante a) entscheiden, ist die positionierung des blitzes eine relativ leichte aufgabe, wenn du in relativen maßangaben arbeitest. damit meine ich:

die köpfe der spulen haben im verhältnis gesehen ja immer den gleichen abstand nach oben, korrekt? bei einer fensterbreite von 1100px z. b. 80px von oberer browserkante bis zur mitte der köpfe, bei 1300px -> 93px, etc...

damit wäre das verhältnis 13,75:1 (1100 / 80 = 13,75).

dein script muss also den blitz immer nur richtig positionieren, sobald die seite aufgerufen wird. und wo? nun, der mittelpunkt muss immer 1/13,75tel der gesamtfensterbreite von oben positioniert werden. und wie? z. b. so:

JAVASCRIPT

PHP:

/* 	1) gesamtbreite des fensters auslesen
	2) 1/13,75tel errechnen
	3) blitz positionieren
*/

// liest die gesamtbreite aus
function getWindowWidth () {
	return (typeof window.innerWidth !== 'undefined' ? window.innerWidth : document.documentElement.offsetWidth);
};

// rechnen und positionieren
function arrangeElement (node) {
	// positionierung auf der y-achse, auf ganzzahl runden
	var posY = Math.floor(getWindowWidth() / 13.75);

	// positionierung des elementes
	node.style.top = [posY, 'px'].join('');
};

// kurzform von $(document).ready(...)
$(function () {

	// blitzelement holen
	var lightning = document.getElementById('lightning');

	// initiales positionieren und neu positionieren bei browser-resize
	arrangeElement(lightning);

	$(window).on('resize', function () {
		arrangeElement(lightning);
	});

});

un ferddisch is die laube

die breite des blitzes lässt sich – wie gesagt – mit relativen angaben im css lösen. die logik ist mehr oder weniger die gleiche (z. b. 1100px breite):

abstand spule 1 bis spule 2: ~790px
in prozent: 790 / 1100 * 100 = ~72% = gesamtbreite blitz
linker/rechter abstand zum browserfenster: (100 - 72) / 2 = 9%

damit könnte das css für den blitz so aussehen (beispielwerte mit stern):

Code:

#lightning {
   position: absolute;
   left: 9%;
   width: 72%;
   height: 30px; *
   margin-top: -15px; * 
}

beachte, dass du dem blitz dabei einen negativen margin-top wert geben musst, weil das script den blitz gemessen an der oberen linken ecke des blitzes selbst positioniert. ohne negativen margin würde die mitte des blitzes sonst kurz unterhalb der spulenköpfe sitzen.

hoffe das hilft

onpoint · 25.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

Yeah! Ich dank dir! Werde ich im Laufe der nächten Stunde direkt mal ausprobieren!

Eine Frage hätte ich dazu noch:

Du steuerst mit dem Javascript ja den Div-Container an, in dem sich auch der Blitz befindet. Wie könnte ich das Deiner / Eurer Meinung nach am besten lösen? Ich dachte zuerst an einen Blitz, der aus 3 verschiedenen, transparenten PNG´s besteht. Per Javascript lasse ich sie einfach millisekunden nacheinander einblenden, so dass es eine Wahrnehmung eine Blitzes gibt. Funktioniert das dann jedoch mit deiner Methode? Er berechnet sich die Größe des Blitzes ja dann quasi aus einer Prozentzahl..doch Hintergrundbilder können nicht einfach vom Browser skaliert werden. Gibt es da eventuell eine geschickte CSS-Möglichkeit, Blitze zu erzeugen?

Viele Grüße!

mindraper · 25.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

hi

nö. gibt es nicht

der findige schlawiner bastelt sich eine liste, die in dem positionierten <div>-container liegen. sodann gibt er jedem listenpunkt ein hintergrundbild. ist auch dies geschafft, so schnappt er sich die listenpunkte und positioniert sie übereinander (position: absolute) und lässt keinen einzigen davon anzeigen (display: none). via eines scriptes werden die listenelemente dann zeitgesteuert ein-/ausgeblendet. das ergebnis des besagten schluries könnte dann z. b. so aussehen:

HTML

HTML:

<div id="lightning">
	<ul id="lightning-list">
		<li id="first-flash" class="flash">&nbsp;</li>
		<li id="second-flash" class="flash">&nbsp;</li>
		<li id="third-flash" class="flash">&nbsp;</li>
	</ul><!-- /end lightning-list -->
</div><!-- /end lightning -->

CSS

Code:

#lightning {
	/* hatten wir schon */
}

#lightning .flash {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent no-repeat 0 0 scroll;
}

#first-flash {
	background-image: url(PFAD/ZUM/ERSTEN/BLITZ);
}
#second-flash {
	background-image: url(PFAD/ZUM/ZWEITEN/BLITZ);
}
#third-flash {
	background-image: url(PFAD/ZUM/DRITTEN/BLITZ);
}

.displayAtAllCosts {
	display: block !important;
}

JAVASCRIPT

PHP:

/*	********************************************************************************************************
	ANMERKUNG: 	dieses script arbeitet mit setTimeout() statt mit setInterval(), da sich ansonsten die zeit-
				spanne zwischen dem ersten erscheinen der blitze und dem späteren wiedererscheinen bei jedem
				durchlauf verkürzen würde. ist dieser effekt gewünscht, könnte auch anstelle des (globalen!)
				setTimeout() ein setInterval() gesetzt werden. dieses müsste dann in der mimicRealLightning-
				function NICHT gecleart und neu gesetzt werden!

	FUNKTION: 	die zahlen innerhalb der timeouts geben an, nach wie vielen millisekunden das timeout ausge-
				löst wird. das bedeutet in diesem fall, dass alle 8 sekunden die blitze sichtbar werden, ein
				jeder davon für 0.15 sekunden. die länge der sichtbarkeit wird durch die timeouts innerhalb
				der while-schleife gesteuert. durch das miteinbeziehen der schleifenvariablen "i" verschiebt
				sich das ein-/ausblenden der nachfolgenden blitze nach hinten, damit sie sequentiell darge-
				stellt werden. das abschließende addieren von 10 millisekunden schafft ein kleine zeitliche
				lücke zwischen den blitzen, die den effekt natürlicher wirken lässt.

	WICHTIG: 	das globale timeout sollte erst am ende des scriptes (aber innerhalb von jQuery.ready()) ge-
				setzt werden.
	
********************************************************************************************************* */

// ein-/ausblenden der listenelemente
function mimicRealLightning (node) {
	var flashes = node.getElementsByTagName('li'),
		i = 0, 
		len = flashes.length,
		curFlash = null;

	// listenelmenttimeout setzen
	while (i < len) {
		curFlash = flashes[i];

		// blitz sichtbar machen
		setTimeout(function () {
			curFlash.className = [curFlash.className, 'displayAtAllCosts'].join(' ');
		}, (150 * (i + 1)) + 10);

		// blitz wieder ausblenden
		setTimeout(function () {
			curFlash.className = curFlash.className.replace(/\sdisplayAtAllCosts$/g, '');
		}, (300 * (i + 1)) + 10);

		i = i+1;
	}

	// globales timeout clearen
	clearTimeout(lightningTimeout);

	// globales timeout neu setzen
	lightningTimeout = setTimeout(function () {
		mimicRealLightning(lightning);
	}, 8000);
};

// GLOBALE VARIABLEN
var lightningTimeout = setTimeout(function () {
	mimicRealLightning(lightning); // lightning ist ja schon definiert
}, 8000);

hoffe das hilft nochmal

onpoint · 27.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

Hallo mindraper,

danke für die sehr sehr gute Hilfe! Hut ab dafür!

Ich habe das mal so umgesetzt, jedoch führt der Browser den zweiten Javascript nicht aus. Bei mir sieht das so aus:

JAVASCRIPT:

PHP:

<script type="text/javascript">
// liest die gesamtbreite aus
function getWindowWidth () {
    return (typeof window.innerWidth !== 'undefined' ? window.innerWidth : document.documentElement.offsetWidth);
};

// rechnen und positionieren
function arrangeElement (node) {
    // positionierung auf der y-achse, auf ganzzahl runden
    var posY = Math.floor(getWindowWidth() / 13.80);

    // positionierung des elementes
    node.style.top = [posY, 'px'].join('');
};

// kurzform von $(document).ready(...)
$(function () {

    // blitzelement holen
    var lightning = document.getElementById('lightning');

    // initiales positionieren und neu positionieren bei browser-resize
    arrangeElement(lightning);

    $(window).on('resize', function () {
        arrangeElement(lightning);
    });

});  
</script>
<script type="text/javascript">

// ein-/ausblenden der listenelemente
function mimicRealLightning (node) {
    var flashes = node.getElementsByTagName('li'),
        i = 0, 
        len = flashes.length,
        curFlash = null;

    // listenelmenttimeout setzen
    while (i < len) {
        curFlash = flashes[i];

        // blitz sichtbar machen
        setTimeout(function () {
            curFlash.className = [curFlash.className, 'displayAtAllCosts'].join(' ');
        }, (150 * (i + 1)) + 10);

        // blitz wieder ausblenden
        setTimeout(function () {
            curFlash.className = curFlash.className.replace(/\sdisplayAtAllCosts$/g, '');
        }, (300 * (i + 1)) + 10);

        i = i+1;
    }

    // globales timeout clearen
    clearTimeout(lightningTimeout);

    // globales timeout neu setzen
    lightningTimeout = setTimeout(function () {
        mimicRealLightning(lightning);
    }, 8000);
};

// GLOBALE VARIABLEN
var lightningTimeout = setTimeout(function () {
    mimicRealLightning(lightning); // lightning ist ja schon definiert
}, 8000);  
</script>

HTML

HTML:

<div id="lightning">
    <ul id="lightning-list">
        <li id="first-flash" class="flash">&nbsp;</li>
        <li id="second-flash" class="flash">&nbsp;</li>
        <li id="third-flash" class="flash">&nbsp;</li>
    </ul><!-- /end lightning-list -->
</div><!-- /end lightning -->

CSS

HTML:

#lightning {
   position: absolute;
   left: 9%;
   width: 72%;
   height: 172px; 
   margin-top: -15px;  
}

#lightning .flash {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent no-repeat 0 0 scroll;
}

#first-flash {
    background-image:url(Bilder/first-flash.png);
}

#second-flash {
    background-image:url(Bilder/second-flash.png);
}

#third-flash {
    background-image:url(Bilder/third-flash.png);
}

.displayAtAllCosts {
    display: block !important;
}

Ich habe versucht testweise nach der "function mimicRealLightning (node)" einen alert zu setzen. Dieser wird nicht mehr ausgeführt. Deshalb geh ich davon aus, dass aus irgendwelchen Gründen das Script nicht ausgeführt wird. Hast du ne Idee?

Viele Grüße!

-Edit-

Das alert wird doch ausgeführt, undzwar wie geplant nach 8 Sekunden und danach alle 8 Sekunden. Mit dem Script ist also alles in Ordnung. Nur warum zeigt er die Blitze nicht an?

Link:

mindraper · 27.07.2012

AW: Probleme mit dem bewussten Platzieren von Elementen

hi.

einmal hat dein <ul>-element keine höhe. gib ihm einfach eine höhe von 100%;
danach kannst du immer noch keine blitze sehen, was daran liegt, dass die background-deklaration in

#lightning .flash

leider die deklaration des hintergrundbildes in

#flash-first/-second/-third

überschreibt (seltsam, id-selektoren haben eigentlich ein höheres gewicht als klassen o_O

). lösung wäre, in #lightning .flash {} keinerlei background-angaben zu machen und diese in die entsprechenden #flash-first/-second/-third zu setzen. dann geht's

wenn du dann sieht, wie hoch der blitz ist, musst du den negativen margin-top-wert in #lightning noch anpassen. das hatte ich im script vergessen. du musst diese berechnung im script warscheinlich im script machen, das sich hier die positionierung von #lightning ändert, wenn das browserfenster verändert wird. falls du nicht weißt wie, kann ich dir das auch entsprechend vorbereiten. einfach via pm oder per mail melden. allerdings bin ich das we unterwegs, wird also frühestens sonntag was werden.

war das verständlich?

danke für das danke. gerne.

gruß

EDIT: beinahe vergessen: pack' ruhig alle scripte in ein <script>-tag. die zeile:

PHP:

var lightningTimeout = setTimeout(function () {
    mimicRealLightning(lightning);
}, 8000);

muss an das unterste ende von $(document).ready(function () { /* CODE */ }), aber noch innerhalb davon!