kostenloser Webspace werbefrei: lima-city

Website-Aufteilung mit CSS und JS (JQuery)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   schachfeld

   schachfeld hat kostenlosen Webspace.

   19:12, 29.5.2015

   Ich habe ein keines Problem, welches sich hier befindet:
   http://s.futureweb-berlin.de/home.php
   
   Was man sehen kann ist, dass man wenn man über die zwei tag/rechten teile">rechten Teile hovert, diese größer werden und die anderen minimal kleiner. Wenn man auf eines der kleinen klickt wird dieses groß und die anderen klein.
   Das funktioniert auch super.
   
   Nur wenn ich jetzt das eine groß habe, dann funktioniert dass mit dem hovern nicht mehr richtig. Merkt man ja wahrscheinlich.
   
   So nun dazu wie es funktioniert. Wenn ich auf ein Element raufklicke, dann verändern sich die Klassen und das CSS tut den Rest. Hier die JS funktion
   

   $('.nichtaktiv').click(function () {
               $(this).siblings().removeClass('aktiv');
               $(this).siblings().addClass('nichtaktiv');
               $(this).removeClass('nichtaktiv');
               $(this).addClass('aktiv');
           })
   
           $('.nichtaktiv').mouseover(function () {
               $(this).siblings().addClass('hover');
           })
   
           $('.nichtaktiv').mouseout(function () {
               $(this).siblings().removeClass('hover');
           })

   
   
   Ich denke irgendwie dass das JS, auch wenn es selbst die Klassen nicht verändert später, wenn man drüberhovert noch irgendwie die alten Klassen gespeichert hat, nur woran liegt das? Ich meine die wurden ja geändert.
   
   Falls ihr irgendwas nicht versteht dass sagt es mir bitte :)
   Freue mich auf Hilfe
   schachfeld ;)
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. sonok

   Moderator

   sonok hat kostenlosen Webspace.

   19:38, 29.5.2015

   Ich glaube da liegt einiges im argen. Im Safari funktioniert der Klick bei mir überhaupt nicht (ein schmales Band wird nicht breiter), im FF scheint es so zu funktionieren wie angedacht (soweit ich das gelesene richtig verstanden habe).
   
   Abgesehen davon scheint das Konzept nur mit aktiviertem JavaScript zu funktionieren, deshalb würde ich persönlich davon Abstand nehmen, da Besucher mit deaktiviertem Javascript viele Seiteninhalte nicht erreicht werden. Ein frühzeitiges Überdenken wäre günstig, damit Du jetzt nicht eine Unmenge an Arbeit und Tüftelei hineinsteckst, um das komplette System in 14 Tagen zu verwerfen.
4. Autor dieses Themas

   schachfeld

   schachfeld hat kostenlosen Webspace.

   19:45, 29.5.2015

   Hmm Danke erstmal für die Antwort.
   Ja gerade hatte ich noch was ausprobiert vielleicht lag es daran dass es nicht funktioniert hat weil an sich müsste es auch im Safari funktionieren.
   
   Ja das mit dem JS eingeschaltet habe ich mir auch schon gedacht aber das Design an sich finde ich eigentlich ziemilch gut. Ist es denn auch irgendwie mit nur CSS möglich.
   Ich will halt nicht so eine total statische Seite haben.
   
   Abgesehen davon habe ich auch vor mit viel AJAX zu arbeiten wofür man sowieso JS bräuchte.
   
   Ich bin insgesamt noch nicht ganz sicher ob das alles so gut ist aber mir liegt sehr viel an dem Design.
   
   Beitrag zuletzt geändert: 29.5.2015 19:49:35 von schachfeld

5. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   20:14, 29.5.2015

   schachfeld schrieb:
   Ist es denn auch irgendwie mit nur CSS möglich.

   
   Es ist! Hier ein Beispiel: http://www.hongkiat.com/blog/css-content-accordion/
   
   

   Abgesehen davon habe ich auch vor mit viel AJAX zu arbeiten wofür man sowieso JS bräuchte.

   
   Wenn das System richtig durchdacht ist, sollten die Inhalte, die per Ajax nachgeladen werden, als Fallback auch über Links erreichbar sein. Im Sinne der Barrierefreiheit wäre das vorteilhaft.
   
   Beitrag zuletzt geändert: 29.5.2015 20:14:54 von fatfreddy

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?