Klasse immer nur beim Neustart der Seite / des Browsers laden

[.DE]

Hey.
Ich sitze mal wieder vor einem neuen Projekt, welches ich nach Tage langer Recherche bei stackoverflow und google nicht lösen konnte.

Die Überlegung ist es eine bestimmte Klasse (Notfalls auch div) per jQuery zu animieren und diese Animation bei jedem Neustart der Seite zu wiederholen. Sie darf sich aber nicht wiederholen, wenn zu Sub-Seiten gewechselt wird oder wenn man schon auf der Seite war, durchgesucht hat und zu Home zurück kehrt.
Konkret geht es darum, am Anfang die alle Elemente mit der Klasse .kreis zu animieren, sodass sich der Kreis von Radius 0 auf Radius 360 langsam aufbaut. Das an sich ist kein Problem, nur ist es eben das Problem, diesen Effekt immer beim Neustart der Seite aufzurufen.

Nach Tagen des Suchens, habe ich nichts zu diesem Thema gefunden, es scheint schier unmöglich, also habe ich überlegt, wie es anders gehen würde...
Meine Überlegung: Die Seite "www.XYZ-Beispiel.de" wird aufgerufen und alle zu ladenen Elemente animieren sich über das Javascript. Dann gibt es eine Weiterleitung (die man allerdings nicht bemerken soll) zu "www.XYZ-Beispiel.de/index.php". Danach würde das JS ja nicht mehr auf allen weiteren Seiten aufgerufen werden.
Das wäre zwar suboptimal, würde aber gehen, wenn der Nutzer von dem Seitenwechseln nichts mitbekommt (ausser das sich die URL ändert).

Eventuell kennt ja jemand das Problem und hat es gelöst oder kennt einen Lösungsansatz. Evt. ist es ja auch über JS oder PHP möglich.
Alle Lösungsvorschläge sind gern gesehen.
Grüße
.DE

P.S.: Ich bin mir der Tatsache bewusst, das solche "Einleitenden Effekte" auf Webseiten oft nicht gut ankommen, doch der Kunde beharrt auf dem Gedanken und möchte es erstmal animiert sehen, bevor er sich dagegen entscheidet, auch nach langer Beratung. Flash ist keine Option, da die Seite auf i-Devices sauber laufen muss.

 

[torben1]

Du könntest das Ganze auch über Cookies und/oder IP-Adressen lösen, Quick and Dirty. Oder aber auch mittels Sessionids und PHP.Dazu solltest Du aber genug bei Google ect. finden.

 

[hillepille]

Hi, ich würd's auch über eine Sessionvariable lösen, Cookie geht natürlich auch. Wenn das JavaScript-Code ist, ist ein Cookie ggf. einfacher einzubauen und auszulesen.

 

[DubiDuh]

Sowas hab ich auch... ein Logo, welches nur beim Aufruf der Startseite einfliegt:

// Fly in logo on frontpage
if(window.location.pathname == '/')
{
	// First hide it
	$('#logoLink').hide();
	
	// then move it out of view
	$('#logoLink').css({
		'position':'relative',
		'top' : '-200px'
	});
		
	// move it back to position
	$('#logoLink').show().delay(1000).animate({
		top: '0px'
	}, 
	500);
}

 

[Xean]

Hallo .DE,

die Idee mit der Weiterleitung auf /index.php ist schon garnicht so schlecht. Nur ist ja meist die /index.php die Seite, welche aufgerufen wird, wenn du nur den Domainnamen angibst.
Was ich oft gesehen habe ist, dass es eine /index2.php gibt. Den Namen finde ich schlecht gewählt, aber wenn du jeden Link, der auf die Startseite führt, auf /home.php leiten würdest, dann könntest du unter /index.php die Startseite mit dem JavaScript und unter /home.php eine Kopie ohne JavaScript einrichten.

Dann würde die Seite nur noch animiert werden, wenn man die /index.php aufruft und wenn man die selbige neu läd. Ich kenne mich mit jQuery nicht so gut aus, aber man müsste doch den Referer raus bekommen, oder? Wenn der auf die /index.php zeigt, dann kann man die Animation abbrechen, so dass auch beim Neuladen der Seite nicht animiert wird.

Wenn du wirklich nur ein einziges mal die Animation ausführen lassen willst, dann musst du doch mit Cookies arbeiten.

Mit freundlichen Grüßen,
Xean

 

[.DE]

Danke für die zahlreiche, schnelle Hilfe!
Ich nehm die Vorschläge mal auseinander:

Session-ID's
Session-ID's hatte ich mir auch schon näher angeschaut, habe aber nicht rausbekommen wie man es schafft, dass man trotz ID eine saubere URL erhält. Sonst kommt doch immer www.XYZ-Beispiel.de/index?sid=ukq6hd8jksahzi1ufhasb3f3hkadbfa. So darf es allerdings nicht aussehen, es sollte immer noch die saubere URL bleiben.

Cookies:
Bei Cookies kenne ich mich leider überhaupt nicht aus, dem Thema sollte ich mich mal widmen. Habe bei Cookies bisher nicht rausbekommen wie sie sich nach einer bestimmten Zeit, oder nach verlassen der Seite löscht, sodass der Effekt immer wieder kommt.

Javascript welches nur beim öffnen der Startseite läd:
Hätte den Nachteil, dass es wirklich jedes mal wieder auftaucht, wenn man die Homeseite läd. Das wäre ja relativ simpel, ist aber leider nicht der Wunsch des Kunden. :/

Automatisches Weiterleiten:
Hat natürlich den Nachteil, dass wenn man sich beispielsweise www.XYZ-Beispiel.de/kontakt.php als Lesezeichen setzt, beim Neuaufruf der Seite die Animation nicht mitbekommt. Das würde immer nur funktionieren wenn der Link über Google angeklickt oder direkt und sauber eingegeben wird. Selbst die URL-Vorgabe der Adresszeilen der neueren Browserversionen orientieren sich ja immer daran, wie lang man auf einer Seite war. Da man wohl am meisten auf Home oder einer der anderen Unterseiten rumsuft, würde beim eintippen der Seite noch nicht mal die Seite mit der Animation aufgerufen werden...

Vielleicht könnt ihr mich ja zum Thema Session-ID's belehren (oder sogar zu Cookies?). Diese sind nämlich exakt was ich suche, nur mit dem Haken, dass sie eine sehr unsaubere (und immer wieder neue) URL zurücklassen. Leute die sich nicht mit PC's auskennen würden die Session-ID Links dann komplett markieren und teilen. Die Zielgruppe sind allerdings vor allem solche Leute... Natur statt PC-Verbunden.
Grüße
.DE

 

[MatthiasDohm]

Hi,

das Arbeiten mit Cookies ist Grundsätzlich ziemlich einfach. Es gibt Plugins für JQuery mit denen du einfach Cookies setzen und auslesen kannst (z.B. hier: http://webhole.net/2010/07/10/jquery-cookies-example/). Du kannst dem Cookie eine "Lebensdauer" geben, nach deren Ablauf er automatisch vom Browser gelöscht wird. Falls die Dauer nicht gesetzt wird, ist der Cookie autmatisch nach dem nächsten Neustart des Browsers verschwunden (Session Cookie). Du könntest also einen Session-Cookie setzen, der anzeigt, dass die Animation bereits gelaufen ist. Bevor die Animation ausgeführt wird überprüfst du ob der Cookie vorhanden ist. Wenn ja, wird sie nicht erneut abgespielt.
Das Verfahren ist dann ein Problem, wenn der Browser keine Cookies unterstützt oder erlaubt. Beim Iphone z.B. sind Cookies standardmäßig deaktiviert.

Eine Lösung, die auch auf mobilen Browsern funktionieren müsste ist Local Storage. Damit können Daten Clientseitig gespeichert werden. Auch dafür gibt es jQuery-Plugins (z.B. http://www.jstorage.info/). Dort könntest du beim Laden der Seite einen Zeitstempel abspeichern. Wenn der letzte Aufruf der Seite länger als z.B. 60 Minuten zurückliegt, wird die Animation abgespielt.
Diese Technik funktioniert zwar auch nicht in allen Browsern, allerdings in allen Aktuellen. Auf der Plugin-Seite gibt es eine Liste der kompatiblen Browser.

Wenn du ganz sicher gehen willst, wäre eine Mischung aus beidem möglich. Wenn Cookies unterstützt werden, nutzt du Cookies und sonst Local Storage. Das scheint mir allerdings für die Funktion, die du implementieren willst, sehr viel Aufwand zu sein.

Gruß
Matthias

 

[.DE]

Wenn du ganz sicher gehen willst, wäre eine Mischung aus beidem möglich. Wenn Cookies unterstützt werden, nutzt du Cookies und sonst Local Storage. Das scheint mir allerdings für die Funktion, die du implementieren willst, sehr viel Aufwand zu sein.

Da hast du recht. Der Kunde möchte eigentlich nur, dass bei jedem Neustart der Seite die Elemente mainmenu, section und content eingefaded werden. Nur soll das einfaden nicht nach jedem Unterseiten-Wechsel kommen bzw. nicht bei jedem mal wo die Home-Seite aufgerufen wird...
Dazu soll die Seite aber auch Mobil abrufbar sein und leicht als Lesezeichen hinzufügbar sein (wie 2 Posts drüber beschrieben).

Danke für die kurze Info, ich werde mich mal reinlesen. Weitere Lösungsvorschläge sind gern gesehen!
Grüße
.DE

 

[.DE]

Hey
Ich habe mich mal in die Session-ID's gelesen und bemerkt, dass diese eigentlich perfekt für das Projekt wären (ausser den langen URL's). Dann habe ich gelesen, dass es möglich ist, die Session-ID's auch über Cookies auszulesen / zu setzen und die Cookies könnte man doch nach einer bestimmten Zeit löschen, richtig? Ist es auch möglich Cookies immer beim Neustart der Seite zu erneuern? Das wäre dann die perfekte Lösung, da ich mobile Geräte über Media-Queries auslesen lassen würde und diese dann nur Local Storage verwenden würden.

(Ich hoffe, dass Matthias genau das nicht schon mit den Session-Cookies gemeint hat, sonst habe ich ziemlich lange gebraucht um's zu verstehen ).

Das wäre optimal.
Grüße
.DE