ComputerBase Menü
Aktuelles

Noscript Aktion (alternatives Bild) wenn Javascript deaktiviert ist?

M

maddoccc

Lieutenant
Registriert
März 2009
Beiträge
562
Hi Leute.

Ich habe auf meiner Webseite ein Bildwechsel (slideshow) mittels Javascript ( Slideshow Lite plugin for jQuery) eingebaut.

Nun wollte die Seite mit deaktiviertem Javascript testen und habe festgestellt das die Bilder nun alle samt untereinander angezeigt werden und man garnicht mehr an den Inhalt der Webseite heran kommt.

Am günstigsten wäre so eine noscript aktion. Im Netz habe ich schon etwas gefunden was genau das macht was ich möchte.

Mein Quelltext sieht so aus.
HTML: 
<div id="slideshow-wrapper"> 
  <div id="slideshow"> 
     <img src="templates/<?php echo $this->template ?>/images/slide1.jpg" alt="image1" />
     <img src="templates/<?php echo $this->template ?>/images/slide2.jpg" alt="image2" />
     <img src="templates/<?php echo $this->template ?>/images/slide3.jpg" alt="image3" />
     <img src="templates/<?php echo $this->template ?>/images/slide4.jpg" alt="image4" />
     <img src="templates/<?php echo $this->template ?>/images/slide5.jpg" alt="image5" />                  
  </div>
</div>

Das habe ich im Netz gefunden.
HTML
HTML: 
<div id="carousel"> 
<div id="altContent">Lorem Ipsum (nur zum Testen, hier kommt dann ein Bild rein..)</div> 
 <div id="slider">[ ..hier würde ich meine slideshow hinsetzen.. ]</div> 
</div>

CSS
HTML: 
#slider {display: none;}

Javascript
HTML: 
$("#slider").show(); $("#altContent").hide();

Und damit habe ich probleme. Wo trage ich das Javascript ein? Habs schon im Header der index.php probiert. Und auch in der slideshow.js. Aber es zeigt mir immer nur das alternative DIV "altContent" an egal ob Javascript an oder aus ist.

Wäre schön wenn jemand einen Tipp für mich hätte..

Gruß Maddoc
 
1.
Ich nehme an, dass du bereits jquery eingebunden hast. dann im header einen folgenden tag:

Code: 
<script type="text/javascript">
$(document).ready(function() {
  $("#slider").show();
  $("#altContent").hide();
});
</script>

Besser wäre noch anstatt show und hide das per $("#slider").attr("display", "block"); zu regeln, da show und hide Animationen sind.

2. für alle inhalte, die angezeigt werden sollen, sofern kein js aktiviert ist, gibt es den <noscript></noscript> tag.
 
Zuletzt bearbeitet:
Irgendwo im Quelltext und bitte schließ den Code in ein
Code: 
$(document).ready( function() {
...
} );

// bzw.

$(function() {
...
} );
ein (falls jQuery). Der Code wird dann beim vollständigen Laden der Seite ausgeführt und nicht dann, wann auf ihn getroffen wird. Falls du es auch mit Chrome kompatibel machen willst, musst du ggf. auf onload im body-Tag ausweichen, anstatt obiger Variante, da dieser die Bilder versetzt lädt und das DOM als ready markiert, bevor die nötigen Bilder geladen sind (Höhe und Breite der Bilder sind dann nämlich 0, anstatt der richtigen Maße).

edit:
thes33k schrieb:
Besser wäre noch anstatt show und hide das per $("#slider").attr("display", "block"); zu regeln, da show und hide Animationen sind.
Zum Vergrößern anklicken....
http://api.jquery.com/show/ schrieb:
The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
Zum Vergrößern anklicken....
 
Ok, dann hatte ich das falsch in Erinnerung. .css ist natürlich auch richtig, nicht .attr. Dann sind .show und .hide doch die beste Wahl.
 
Danke für eure Antworten.

Chrome macht sowieso noch Problem. Das wird aber ein Thema.

Ich habe jetzt herausgefunden das der Javascript Code den ich gepostet hatte in das slider DIV im Quelltext gehört. Doch wie du schon richtig bemerktest wird der Code erst geladen und dann ausgeblendet. Das funktioniert im Firefox recht gut und schnell sodass man es nicht merkt . Im Chrome und im IE dagegen sieht man erst das alternativbild und drunter die Slideshow bevor es richtig angezeigt wird.

Würde also auf deinen Vorschlag ausweichen wollen.

Wie aber stelle ich das genau an?

Quasi den Code in den Body Tag? Und im Chrome sollte es auch laufen...

HTML: 
$(document).ready( function() {
...
} );

Bin leider nicht so firm in Sachen Javascript...
 
Das kommt irgendwo in den Quelltext, die Position ist egal. ready() wird nämlich erst ausgeführt, wenn die DOM vollständig geladen ist. Dass man erst das Alternativbild sieht kannst du nicht umgehen, außer du fügst deinen obigen Code direkt hinter das entsprechende Element ein (nachdem es also in die DOM aufgenommen wurde). Kannst dich nur für eines entscheiden, der saubere Weg geht allerdings über ready().
 
Ok. Und was kommt bei den 3 Punkten (...) rein?
 
Muss nochmal doof fragen. Welchen Code meist du? Da sind ja mehrere Fragmente..

So sieht der Head aus.
HTML: 
<head>

	<jdoc:include type="head" />
	<?php JHTML::_('behavior.framework', true);
	$app                = JFactory::getApplication();
	$templateparams     = $app->getTemplate(true)->params;
	$csite_name	        = $app->getCfg('sitename');
	?>

	<?php //SETTING SLIDE IMAGES
    $pause = $this->params->get("pause", 5);
    $longueur= $this->params->get("longueur", 850);
    $hauteur = $this->params->get("hauteur", 347);
    ?>

	<?php  # main width#
    $mod_left = $this->countModules( 'position-5' );
    $mod_right = $this->countModules( 'position-7' );
    if ( $mod_left && $mod_right ) {
    $width = '';
    } elseif ( ($mod_left || $mod_right) ) {
    $width = '-mid';
    } else {
    $width = '-full';
    }
    ?>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/antesate1.6/css/tdefaut.css" type="text/css" media="all" />
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/slideshow.js"></script>
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.ico" />

<!--[if IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>

Oder meist du den Code
HTML: 
$("#slider").show(); $("#altContent").hide();

Und muss der dann ins DIV oder in den Body oder in den Head?
 
Warum eigentlich so umständlich?
Fang mti einer Version für Nicht-JS an und baue darauf auf. Mit anderen Worten: Bau dir deinen Slider gemäß deinem zuerst geposteten Code und gib allen Elementen eine gemeinsame Klasse, die das Zeug "display:none" setzt. Danach packste ins CSS einfach .klassenname:first-child {display:block;}. Somit lädt erstmal alles korrekt ohne JS. Danach machste als allererste JS-Aktion sinngemäß ein "entferne Klasse .klassenname von Sliderobjekten".
 
Klingt noch umständlicher für mich..

Habs jetzt so gemacht. Hat sich aber nicht viel geändert. PS: Wie kann ich das mit dem onload im Body machen wegen dem Chrome? Momentan wird das erste bild rechts total zusammengequetscht angezeigt..

HTML: 
<div id="slideshow">
		   <img src="templates/<?php echo $this->template ?>/images/slide1.jpg" alt="image1" />
		   <img src="templates/<?php echo $this->template ?>/images/slide2.jpg" alt="image2" />
                    <img src="templates/<?php echo $this->template ?>/images/slide3.jpg" alt="image3" />
                    <img src="templates/<?php echo $this->template ?>/images/slide4.jpg" alt="image4" />
                    <img src="templates/<?php echo $this->template ?>/images/slide5.jpg" alt="image5" />
                                 </div>
			        </div>
				</div>
			<script type="text/javascript" charset="utf-8">
                         $(document).ready( function() {

				var $j = jQuery.noConflict();
				    $j(document).ready(function(){
					    $j("#slideshow").slideshow({
			             pauseSeconds:<?php echo $pause ?>,
						 width:<?php echo $longueur ?>,//default 850,
			             height:<?php echo $hauteur ?>,//default 347,
						 fadeSpeed: 0.7,
			            caption: false
		            });
		        }); } );
Ergänzung ()

Noch mal kurz Reset.

Das Hauptproblem konnte ich mittels dem Code "$("#slider").show(); $("#altContent").hide();" im slider DIV lösen.

Das Google Problem was ich eben ansprach konnte ich lösen in dem ich den Javasript Code der unter den Bildern Body Tag war in eine Funktion in den Head bereich packte und mittels Onload im Body startete.

Nun habe ich aber immer noch das Problem das wenn Javascript an ist zusätzlich kurz das DIV angezeigt wird was kommen soll wenn Javascript aus ist. Quasi sieht man am Anfang kurz zwei Bilder untereinander wo bei das obere nach einigen Millisekunden wieder verschwunden ist. Sieht aber nicht toll aus...
 
Tja, und genau dieses Verhalten wirst du über meine Lösung komplett los. Da beginnt dein Slider, egal ob JS aktiv ist oder nicht, immer mit dem ersten Slide. Je nach Geschwindigkeit von Browser und Leitung aktiviert sich der eigentliche Slider dann etwas verzögert, aber ohne irgend einen störenden Übergang.
 
Klingt gut, bin aber totaler noob auf dem Gebiet. Hättest du vielleicht eine kleine Anleitung für mich? Konnte mit dem was du geschrieben hattest nicht viel anfangen..
 
Du hast doch folgenden Quelltext:
PHP: 
<div id="slideshow-wrapper"> 
  <div id="slideshow"> 
     <img src="templates/<?php echo $this->template ?>/images/slide1.jpg" alt="image1" />
     <img src="templates/<?php echo $this->template ?>/images/slide2.jpg" alt="image2" />
     <img src="templates/<?php echo $this->template ?>/images/slide3.jpg" alt="image3" />
     <img src="templates/<?php echo $this->template ?>/images/slide4.jpg" alt="image4" />
     <img src="templates/<?php echo $this->template ?>/images/slide5.jpg" alt="image5" />                  
  </div>
</div>

Wie wird der Code erstellt? Hast du selbst ein Template angelegt, indem du slide1-5.jpg definiert hast, oder wird über ein CMS einfach nur gesagt: Hier, nimm das und das Bild?
Im ersten Falle isses ganz einfach, da packst du allen außer dem ersten Bild meinetwegen die Klasse "wegmitdir" dran. Im 2. Fall musst du allen diese Klasse anhängen und dann entsprechend kreative Selektoren verwenden für dein CSS. .wegmitdir:first-child zum Beispiel. Das klappt aber wiederum nicht im IE7 (8er weiß ich grad nicht).

So, im Zweifel hast du jetzt ein Ruden <img class="wegmitdir" ... /> nacheinander.
Ins CSS packst du jetzt:
Code: 
.wegmitdir{display:none;}
.wegmitdir:first-child{display:inline;}  /* oder Block, je nachdem, was besser geht */
Jetzt lädt er ohne aktivem JS zwar alle Bilder, zeigt aber nur das erste (eben das first-child) an.

Jetzt hängst du in den DOM-Ready - Handler (wurde ja schon mehrfach drauf eingegangen) erst einmal eine Funktion, die von allen Bildern im Slider die Klasse "wegmitdir" wieder entfernt. Wie du das im Framework deiner Wahl machst verrät dir die Dokumentation.
Danach lädst du deinen Slider-Code und fertig isses.
 
WOW. Es geht! Geniale Anleitung die selbst ich verstehe. Danke dir!! Hammer!

Nun habe ich aber wieder das Problem im Chrome, da das Script nicht im Body onload geladen wird, das das erste Bild total zusammengequetscht ist und erst das zweite die richtigen Maße hat..

Könnte ich da das Script in eine Funktion packen und diese verschachteln? Quasi erstelle eine Funktion mit dem Script und dem OM-Ready - Handler in einem und starte diese über das onload?

Oder wie würdest du es machen??
 
Mach es, wie es verschiedene Optimierungstools empfehlen (z.B. Yahoo's YSlow oder Google Page Speed): Gib JEDEM Image innerhalb deiner Seite width und height im Quelltext mit. Auf die Weise wird die Größe des Bildes korrekt gerendert, bevor das Bild selbst überhaupt geladen ist.
Chrome arbeitet so, dass er von optimiertem Code mit Größenangaben ausgeht. Daher zündet er DOM-Ready eher als andere Browser. Im Prinzip ist das auch clever, es verbessert die Ladezeit von optimierten Seiten deutlich, dafür "flackern" Seiten ohne Größenangaben etwas, wenn die Bilder geladen werden.
 
Daaron schrieb:
Im Prinzip ist das auch clever, es verbessert die Ladezeit von optimierten Seiten deutlich, dafür "flackern" Seiten ohne Größenangaben etwas, wenn die Bilder geladen werden.
Zum Vergrößern anklicken....
Oder es funktioniert gar nicht, weil width = height = 0 ist. ;) Ich finde es eher lästig und will nicht jedem Bild seine Angaben mitgeben. Jeder Browser schafft es auf Anhieb, bis auf Chrome. Aber ich glaube eher, dass dies eine Webkit Eigenart ist, denn Epiphany (auch Webkit) verhält sich exakt gleich.
 
wieso baut man die HP nicht so das sie komplett ohne JS richtig angezeigt wird und wenn JS aktiviert ist passt es die seite entsprechend an ?
 
Funktioniert auch nicht. Habs so gemacht.
<img src="templates/<?php echo $this->template ?>/images/slide1.jpg" alt="image1" width="850px" height="347px" />

Was aber am eigenartigsten ist ist das das Template wenn ich es beim Anbieter im Chrome öffne das erste Bild korrekt dargestellt wird. Habe mir auch schon das Template nochmal heruntergeladen und den CSS Ordner, sowie den Scriptordner und die Index.php ausgetauscht. Jedoch ohne erfolg...
Ergänzung ()

Habs jetzt Leute.

Habe aus der CSS Datei unter .slideshowlite img das width="100%" und das height="100%" gelöscht und nun tut die Webseite mit oder ohne JS und in egal welchem Browser was sie sollt.

Danke euch für eure tolle Unterstützung. Bin immer wieder begeistert vom CB Forum.

PS: Was kleines ist mir aber noch aufgefallen. Wenn JS aus ist, egal in welchem Browser, fängt das Bild was geladen wird unten rechts in der Ecke an anstatt schön mittig. Als wenn der Browser keine CSS informationenn mit dem Bild bekommt.

Hat noch jemand einen Tipp für mich wo ich da ansetzen könnte??

Gruß Maddoc
 
Zuletzt bearbeitet:
Yuuri schrieb:
Oder es funktioniert gar nicht, weil width = height = 0 ist. ;) Ich finde es eher lästig und will nicht jedem Bild seine Angaben mitgeben. Jeder Browser schafft es auf Anhieb, bis auf Chrome. Aber ich glaube eher, dass dies eine Webkit Eigenart ist, denn Epiphany (auch Webkit) verhält sich exakt gleich.
Zum Vergrößern anklicken....
width/height = 0 ist ja auch nicht Sinn der Sache, meinste nicht?

Es sieht aber insgesamt so aus: YSlow und Page Speed empfehlen, dass w&h angegeben werden. Wenn man den HTML-Code mit der Hand schreibt ist es kaum ein Mehraufwand, die Werte der Bilder mit einzutragen (zumal die in einem Slider eh höchstwahrscheinlich identisch sind). Wird die Seite serverseitig über ein eigenen Script erzeugt ist es ein Kinderspiel, jedem Bild IMMER die richtige Größe zu geben (z.B. mit getimagesize(...) in PHP). Und ein gutes CMS? Das sollte den Code immer korrekt erzeugen, sonst hat da ein Programmierer derb geschlafen.

Außerdem: Wie du schon sagtest, es ist wohl eine Eigenheit von Webkit. Da Webkit aber aktuell DIE dominierende Engine ist hast du gar keine andere Wahl, als sauber für Webkit zu schreiben.
- Android-Browser
- Chrome/Chromium
- Safari
- Safari Mobile (iPhone, iPad)

Mercsen schrieb:
wieso baut man die HP nicht so das sie komplett ohne JS richtig angezeigt wird und wenn JS aktiviert ist passt es die seite entsprechend an ?
Zum Vergrößern anklicken....
Genau das hab ich ja empfohlen, genau das tut meine Lösung ja.

Genau genommen könnte man einen Slider (ohne komplexe Übergänge) sogar in reinem CSS3 schreiben. Würde aber zum aktuellen Zeitpunkt nur unter einigen wenigen Browsern laufen (hochaktuelle Webkit-Versionen).

maddoccc schrieb:
PS: Was kleines ist mir aber noch aufgefallen. Wenn JS aus ist, egal in welchem Browser, fängt das Bild was geladen wird unten rechts in der Ecke an anstatt schön mittig. Als wenn der Browser keine CSS informationenn mit dem Bild bekommt.

Hat noch jemand einen Tipp für mich wo ich da ansetzen könnte??
Zum Vergrößern anklicken....
Kann mans irgendwo online inspizieren? Dann würde ich bei Gelegenheit mal drüber blättern.
Ansonsten: Browser-Inspector an und gucken, was wann welche Styles erhält. Slider-Scripte fügen gern mal zusätzliche Klassen in die Slider-Elemente ein oder modifizieren die betroffene Element-Struktur komplett.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz