medien-werkstatt

Home


Über medien-werkstatt

17FreitagNov2017

Die Firma medien-werkstatt – It-Dienstleistungen und Softwareentwicklung wurde 2001 mit Begeisterung für Web-Technologien, Wissen aus der Softwaretechnik und Berufserfahrung aus vielen Jahren in der IT-Branche gegründet.

Selbstverständlich sind alle von uns entwickelten und betreuten Webseiten "full responsive" gestaltet. Das heißt das unsere Webseiten auf jedem Gerät, welches in der Lage ist diese anzuzeigen, ansprechend und korrekt dargestellt und ausgeführt werden.

Wir haben uns hier für das Twitter Bootstrap Framework entschieden und arbeiten nach dem Prinzip "mobile first".

Dies setzt einen Browser der neueren Generation voraus.

Ältere (und unsichere Browser) werden nur noch bedingt unterstützt.

Am I responsive? Testen Sie hier!

Geben Sie hier die URL der Webseite im Format "http://www.test.seite" ein. Durch anklicken des schwarzen Rahmen der Geräte werden diese vergrößert oder verkleinert. Das Handy kann durch anklicken des Zeichen gedreht werden.

Ausführen

Dieser Test vermittelt nur einen ersten Eindruck wie eine Webseite auf unterschiedlichen Ausgabegeräten aussehen kann. Sie ersetzt nicht den Test auf tatsächlichen Ausgabegeräten!

Die Idee für diesen Test ist ursprünglich von Justin Avery . Den original Code finden Sie auf Github . Der hier verwendete Code wurde dieser Webseite angepasst und geändert.


Die Änderungen am Code

Da im Original bereits mit CSS "transition" und "transform" gearbeitet wird nutzen wir das natürlich auch für die Vergrößerung der Elemente. So erfordert das Ganze nur wenige Zeilen Code.

Als Erstes erhält jedes Gerät eine "id" über welche wir den umschließenden "<div>" mit dem Hintergrundbild und den zugehörigen "iframe" per JQuery ansprechen können.

<div id="idmobile" class="mobile">
	<iframe id="mobile" src="http://www.andre-cosmetic.de"></iframe>
</div>

Dann benötigen wir in unserer CSS-Datei eine neue Klasse welche wir mit JQuery per Klick auf das Hintergrundbild des jeweiligen Gerätes zuordnen.

Über "transition: 0.9s" steuern wir die Animationsdauer. Mit "transform: scale(3.5)" steuern wir die Transformation. Es wird mit "scale" also skaliert. Der Faktor wird in der Klammer mit (3.5) festgelegt. Ist nur ein Wert angegeben so wird proportional Skaliert. Mit zwei Werten (3.5, 1.5) würde unproportional Skaliert werden.

Mit "transform-origin" geben wir die Achse an von welcher die Transformation ausgeht. Die Position muß immer "position: relative" sein! Zusätzlich soll das jeweilige Gerät in den Vordergrund gebracht werden was mit "z-index: 9 important!" erledigt ist.

.mtrans {
	-webkit-transition: 0.9s;
	transition: 0.9s;
	transform: scale(3.5);
	-webkit-transform: scale(3.5);
	-o-transform: scale(3.5);
	-ms-transform: scale(3.5);
	-moz-transform: scale(3.5);
	transform-origin: -25% 100%;
	-webkit-transform-origin: -25% 100%;
	-o-transform-origin: -25% 100%;
	-ms-transform-origin: -25% 100%;
	-moz-transform-origin: -25% 100%;
	margin: 0;
	padding: 0;
	position: relative;
	background-color: transparent;
	z-index: 9 !important;
}

Was noch fehlt ist der JQuery Code. Auch das ist mit wenigen Zeilen erledigt.

Um Konflikte mit dem Code der Webseiten welche wir in die IFrames laden zu vermeiden ist es wichtig JQuery einen Namespace zuzuweisen.
Das machen wir mit "var mwh = {};"

Dann rufen wir JQuery.noConflict auf: "mwh.query = jQuery.noConflict( true );"

Nun wird JQuery nicht mehr über das $- Zeichen angesprochen sondern mit "mwh.query".
Dem Rahmen (also das Hintergrundbild) des jeweiligen Gerätes weisen wir nun die "click" Funktion über seine "id" zu.
Dann ändern wir einfach die Klasse des zugehörigen IFrame.
Mit "toggleClass" weisen wir mit dem ersten Klick unsere neue Klasse zu und der zweite Klick stellt die original Klasse wieder her.
Fertig ist die kleine Animation.

var mwh = {};
mwh.query = jQuery.noConflict( true );

mwh.query(document).ready(function () {
	mwh.query('#idmobile').click(function () {
		mwh.query('.mobile').toggleClass( 'mtrans' );
	});
});

Telefon

0152 341 371 12