seufZ: versuch eines j-scriptes zum auswechseln eines div-inhaltes

SELF-Forum

versuch eines j-scriptes zum auswechseln eines div-inhaltes

seufZ
– Informationen zu den Bewertungsregeln

hallo leutZ,

versuchsweise wollte ich mal ein j-script basteln zum wechseln des div-inhaltes und villeicht sagt ihr mal etwas zu meinen gedankengängen,

also so das prinzip:

Bildbeschreibung

zwei divs: oben das menue - div darunter wo das jeweilige foto ausgegeben wird in der fotobox

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bildmenue</title>
    </head>
    <body>
        <div id="fotobox"></div>
        <a id="fotonummer" href="#">Foto 1</a>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript"> 
            $("#fotonummer").click(function(){
                $("#fotobox").load("foto1.html"); 
            });
        </script> 
    </body>
</html>

foto1.html : dort ist ein foto + untertitel + ein möglicher erklärungstext

morgentliche grüsse

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber seufZ,

    versuchsweise wollte ich mal ein j-script basteln

    nein, Du wolltest ein JavaScript basteln. Das ist nicht JScript (Microsoft), sondern JavaScript (ECMA-Script).

    zum wechseln des div-inhaltes

    Du willst also die Funktionalität mit Vor- und Zurück-Button kaputt machen. Wozu denn das?

    und villeicht sagt ihr mal etwas zu meinen gedankengängen,

    Lass es bleiben. Solcherlei Spielereien haben eher dort etwas zu suchen, wo eine Webanwendung Teilinhalte auf einer Seite aktualisieren soll. Für eine Bildershow verwendet man andere Techniken. Links solltest Du jede Menge selber finden.

    Wenn Du JavaScript genauer kennenlernen willst, kannst Du auch die Bilder-Slideshow aus dem Wiki-Artikel untersuchen.

    $("#fotobox").load("foto1.html");

    Was passiert wohl, wenn "foto1.html" ein vollständiges HTML-Dokument ist? Dann enthält das <div>-Element ein <html>-Element als Kindelement. Was für ein Blödsinn! Und dabei wolltest Du nur ein Bild anzeigen...

    foto1.html : dort ist ein foto + untertitel + ein möglicher erklärungstext

    Tja, wenn Du das schon JavaScript-gesteuert machen möchtest, dann binde doch diese Teile alle (mit HTML5-Mitteln!) ein, die es da schon gibt, und nutze das JavaScript dazu, diese zu einer Bildershow zusammenzufassen! Der Wiki-Artikel zeigt ein Beispiel wie man das (bezogen auf die dort erarbeitete Lösung) machen könnte.

    Liebe Grüße,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

      seufZ
      – Informationen zu den Bewertungsregeln

      hallo felix,

      tut mir leid, dann habe ich mich wegen meiner unkenntniss villeicht falsch ausgedrückt,

      rein gedanklich, ich weiss das das schnippsel NICHT funzt, es drückt nur meine idee aus:

      $('div.content').replaceWith('<?php include("fotobox_foto1.php"); ?>');

      so hatte ich es mir gedacht, weil ja noch zum foto (in dieser fotobox) ein untertitel (mit name , datum , entstehungsort....) und (wenn meine freundin lust verspürt noch jeweils ein ein 5-∞ zeiligen "erläuterungstext" unter jedes foto zu schreiben, dieses dann auch noch........

      und dann wäre es villeicht angebracht wenn jedes foto eine unterseite ist das wie mit include eingefügt wird........ so mein gedankengang.....

      alles so kompliziert........

      seufZ

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. versuch eines j-scriptes zum auswechseln eines div-inhaltes

    JürgenB
    – Informationen zu den Bewertungsregeln

    Hallo Tassilo,

    lass es mich so kommentieren:

    Du versuchst mit einer dir noch unbekannten Technik etwas zu machen, was du, wenn du die Technik beherrscht, so nicht machen würdest.

    Mein Tipp: für jedes Bild eine neue Seite, die dann verlinkt wird.

    Gruß Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@JürgenB

      Mein Tipp: für jedes Bild eine neue Seite, die dann verlinkt wird.

      Mein Tip: Ein Bilderkarussel (Slider). Da gibt’s welche, die nicht nur Bilder, sondern beliebige Inhalte tauschen, Vorschaubilder anzeigen und auch Bilder nicht sofort laden, sondern erst, wenn sie benötigt werden.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

        JürgenB
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        Mein Tipp: für jedes Bild eine neue Seite, die dann verlinkt wird.

        Mein Tip: Ein Bilderkarussel (Slider). Da gibt’s welche, die nicht nur Bilder, sondern beliebige Inhalte tauschen, Vorschaubilder anzeigen und auch Bilder nicht sofort laden, sondern erst, wenn sie benötigt werden.

        da muss der Anwender aber darauf achten, das er sich mit solchen "Inhaltswechslern" nicht die gleichen Probleme holt, die er mit Iframes hätte, und er muss wissen, das es solche Probleme gibt.

        Gruß Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. versuch eines j-scriptes zum auswechseln eines div-inhaltes

    seufZ
    – Informationen zu den Bewertungsregeln

    hallo @ all, mache jetzt mal kein neuen thread auf,

    ich hab jetzt eine genaue vorstellung wie ich meine seite möchte,

    und das OHNE java-script <piep> sch....e........ </piep> :o)

    habe mir dazu html5 näher angeschaut, aber sicherlich ist mein code noch nicht korrekt....

    Linkbeschreibung

    <!DOCTYPE html>
<html dir="ltr" lang="de-DE">

	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


<head>
	<meta charset="UTF-8" />
	<meta name="description" content="Waldfrieden -- Tassilo Sturm" />
	<title>Waldfrieden -- Tassilo Sturm</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<link rel="icon" href="img.ico" />
	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="css/TEST.css"/>
	

	<script>
		document.createElement('article');
		document.createElement('section');
		document.createElement('aside');
		document.createElement('hgroup');
		document.createElement('nav');
		document.createElement('header');
		document.createElement('footer');
		document.createElement('figure');
		document.createElement('figcaption');
	</script>
</head>


<body>

<div id="wrapper">  <!-- Anfang vom wrapper-Bereich -->

	<header class="page_header"> <h1 class="ueberschrift">Waldfrieden  --  Tassilo Sturm </h1></header>

		<div id="sidebar_menueblock_li">

			<aside id="block1">
				<p>
						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
						sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
				</p>
			</aside>

			<nav class="block3">
     				<ul>
       				<li> <a href="#">Link 1</a></li>
       				<li> <a href="#">Link 2</a> </li>
       				<li> <a href="#">Link 3</a> </li>
       				<li> <a href="#">Link 4</a> </li>
     				</ul>
  			</nav>

			<aside id="block2">
				<p><b>
						Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
						ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
						magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e
				</b></p>
			</aside>

		</div>

		<section id="main">

			<h5>&nbsp;</h5>

			<article class="sidebar_textblock">

				<h5>&nbsp;</h5>

				<p>
						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 	
				</p>

				<nav class="block3">
     					<ul>
       					<li> <a href="#">Bild 1</a></li>
						<li> <a href="#">Bild 2</a></li>
       					<li> <a href="#">Bild 3</a> </li>
       					<li> <a href="#">Bild 4</a> </li>
       					<li> <a href="#">Bild 5</a> </li>

					</ul>
				</nav>

			</article>

			<article class="sidebar_fotoblock">

				<h5>&nbsp;</h5>

				<span class="bild">
					<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">				
				</span>
				<span class="bild">
					<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">				
				</span>
				<span class="bild">
					<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">				
				</span>

			</article>

			<article class="sidebar_menueblock_re">

				<h5>&nbsp;</h5>

				<p>
						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
						At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
						dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos 
						et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				</p>

			</article>

		</section>


	<footer role="contentinfo"> </footer>

</div>  <!-- ENDE vom wrapper-Bereich -->

</body>

</html>

    und dazu:

    /* CSS Document */




article, section, aside, hgroup, nav, header, footer, figure, figcaption { 
    display: block;
}

*{
		margin: 0px;
		padding: 0px;
		}

body {
		font-size: 100.01% ;
		font-family: 'Ubuntu', sans-serif;
		color: #000000; background-color: #ffffff;
                width: 100%; 
		margin-left: 0px;
		margin-top: 0px;
		}


p.ueberschrift {
		margin: 0; padding: 0; 
		margin-top: 0.2em; margin-bottom: 0.2em; margin-left: 0; margin-right: 0;
		font-size: 1.6em;
		list-style-type: none;
		}

h1.ueberschrift {
		margin: 0; padding: 0; 
		margin-top: 0.2em; margin-bottom: 0.2em; margin-left: 0; margin-right: 0;
		font-size: 1.5em;
		list-style-type: none;
		}

h5 		{
    		margin:0;
    		font-size:0;
 		}

p		{
		margin: 0; padding: 0; 
		font-size: 1.1em;
		list-style-type: none;
		}

img {
		margin: 0; padding: 0;
		width: 100%;
		height: auto;
		max-width: 100%;
		}

.bild 		{
		width: 850px;		
		display:inline-block;
		}


#wrapper {
		min-width: 840px;
		max-width: 1024px;
		margin-right: auto;
		margin-left: auto;
                padding-left: 1em;
		padding-right: 1em;
                background-color:#f1f1f1;
		border: 3px dotted green;
		}

header {
		padding-left: 0.1em;
		padding-right: 0.1em;
		padding-top: 1em;
		padding-bottom: 0.4em;
		border: 3px dotted grey;
		}

aside#block1 {
    		
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 1.5em;
		padding-bottom: 1em;
		border: 3px dotted yellow;
		}

aside#block2 {
    		
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		border: 3px dotted yellow;
		}

nav.block3 {
    		
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		width:65%;
		border: 3px dotted mediumpurple;
		}

article.sidebar_textblock  {
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		width:88%;
		display: inline-block;
		border: 3px dotted red;
		}

article.sidebar_menueblock_li  {
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		width:65%;
		display: inline-block;
		border: 3px dotted cadetblue;
		}

article.sidebar_menueblock_re  {
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		width:80%;
		display: inline-block;
		border: 3px dotted cadetblue;
		}

article.sidebar_fotoblock  {
		padding-left: 1.5em;
		padding-right: 1em;
		padding-top: 2em;
		padding-bottom: 1em;
		max-width:700px;
		overflow: scroll;
		display: inline-block;
		border: 3px dotted cadetblue;
		}



#article {
		width: 76%;
		padding-right: 1.2em;
		padding-top: 2em;
		padding-bottom: 2em;
		float: right;
		border: 3px dotted orange;
		}


footer {
    		padding-left: 0;
    		padding-right: 0;
    		padding-top: 0;
    		padding-bottom: 0;
		clear: both;
    		border: 3px dotted dimgray;
		}

#sidebar_menueblock_li {	
		width:25%;
		float: left;
		border: 3px dotted blue;
		}


section#main {	
		width: 73.5%;
		display: inline-block;
		border: 3px dotted orange;
		}


.nav ul {
		margin: 0;
		padding: 0.2em;
                padding-right: 1.6em;
		float: right;
       	border: springgreen 1px dashed;
		}

.nav li {
		margin: 0;
		padding: 0;
		font-size: 1.1em;
		list-style: none;
		display: inline-block;
		border: darkorange 1px dashed;
		}
     
.nav a, footermenue span {
		margin: 0;
		padding: 0;
		padding-left: 0.4em;
		padding-right: 1em;
		padding-top: 0.4em;
		padding-bottom: 0.4em;
		font-size: 1.1em;
		display: inline-block;
		border: red 1px dashed;
		}

    Nur eine Frage habe ich, wie bekomme ich es hin das die drei Fotos waagerecht in einer zeile stehen (ja ich weiss, das ein häßlicher scrollbalken entsteht, aber das ist O.K.!)

    ich habe alles ausprobiert: über inline: block; bis diverse floats.......

    aber was mache ich falsch?

    fragende grüsse der einsiedelnde

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@seufZ

      <html dir="ltr" lang="de-DE">

      "ltr" ist Default; die dir-Angbe ist überflüssig.

      Mir fällt kein Fall ein, wo "de-DE" sinnvoll wäre. Verwende "de".

      <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

      Google Code macht dicht. Beziehe html5shim von anderer Quelle.

      <meta name="description" content="Waldfrieden -- Tassilo Sturm" />

      Zur Unsinnigkeit dieses Angabe habe ich mich schon mindestens einmal geäußert.

      <script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script>

      Genau das erledigt (u.a.) der html5shim. Also weg damit.

      <div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->

      Dass der Wrapper überflüssig ist, wurde dir auch schon mehr als einmal gesagt.

      <header class="page_header"> <h1 class="ueberschrift">Waldfrieden -- Tassilo Sturm </h1></header>

      Das der Seitenheader braucht keine solche Klasse; der ist per body > header selektierbar. Und ein h1-Element braucht ganz gewiss keine Klasse "ueberschrift"; auch das habe ich dir bereits gesagt.

      So langsam vergeht einem die Lust dir zu antworten, wenn du sowieso alles in den Wind schlägst.

        	<h5>&nbsp;</h5>

      Was soll das denn? Überschrigt ohne Inhalt? Weg damit! Abstände erzeugst du mit CSS.

      <footer role="contentinfo"> </footer>

      Was kommt da rein? Bist du sicher, dass role="contentinfo" richtig ist?

      CSS:

      *{ margin: 0px; padding: 0px; }

      So einen Reset halte ich für keine gute Idee. Es macht durchaus Sinn, dass Browser per Default Abstände zwischen Elemente setzen.

      body { font-size: 100.01% ;

      Dieser Browserhack gehört der Vergangenheit an. Weg damit.

      p.ueberschrift {

      Es gibt in deinem HTML-Dokument kein p-Element der Klasse "ueberschrift". Und das ist auch gut so. Der Block kann also weg.

      h1.ueberschrift { margin: 0; padding: 0; margin-top: 0.2em; margin-bottom: 0.2em; margin-left: 0; margin-right: 0;

      Wieso setzt du margin erst auf 0, um es gleich danach wieder anders zu setzen?

      Die Angaben kannst du übrigens zusammenfassen, oben angefangen im Uhrzeigersinn:
      margin: 0.2em 0 0.2em 0.

      Und da oben und unten sowie links und rechts jeweils gleich sind, geht’s noch kürzer: margin: 0.2em 0.

        font-size: 1.5em;

      Da bietet sich auch die Angabe des Zeilenabstandes (line-height) an, der bei einer Überschrift durchaus (bezogen auf die Schriftgröße) kleiner sein kann (lies : sollte) als bei Fließtext.

        list-style-type: none;

      Die Angabe ist bei einer Überschrift überflüssig.

      img { margin: 0; padding: 0; width: 100%; height: auto; max-width: 100%; }

      width und max-width auf 100% zu setzen, ist auch wenig sinnvoll.

      #wrapper { min-width: 840px;

      Nei-en! Der Viewport ist bei vielen Nutzern schmaler als 840 Pixel. Keine Mindesbreite angeben!

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. versuch eines j-scriptes zum auswechseln eines div-inhaltes

        seufZ
        – Informationen zu den Bewertungsregeln

        hallo, MEISTER ALLER KLASSEN, ;o) ;o) ;o)

          	<h5>&nbsp;</h5>

        Was soll das denn? Überschrigt ohne Inhalt? Weg damit! Abstände erzeugst du mit CSS.

        ist leider nötig weil ich sonst vom validator folgende meldung bekomme:

        Bildbeschreibung

        Habe das Meiste von dem korregiert, okay!

        Aber die eigentliche Problematik, die Fotos in einer Reihe zu setzen wurde nicht behoben.

        seufZ

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. article ohne Überschrift?

          Gunnar Bittersmann Homepage des Autors (Versionen)
          – Informationen zu den Bewertungsregeln

          @@seufZ

            	<h5>&nbsp;</h5>

          Was soll das denn? Überschrigt ohne Inhalt? Weg damit! Abstände erzeugst du mit CSS.

          ist leider nötig weil ich sonst vom validator folgende meldung bekomme:
          [Article lacks heading]

          Nei-en.

          Zuerst: Eine Warnung ist kein Fehler. Der ValidatorSyntax-Checker weist dich daruf hin, dass etwas nicht in Ordnung sein könnte und du dir die Stelle nochmal ankucken solltest.

          Hier sagt er: article-Elemente sollten eine Überschrift haben. Steht ja auch so in der Spec: “Each article should be identified, typically by including a heading (h1–h6 element) as a child of the article element.”

          Warum das? article-Elemente dienen u.a. Nutzern assistiver Technologien (Screenreader), auf einer Seite von Bereich zu Bereich zu navigieren. Dazu muss ihnen aber schnell mitgeteilt werden, was das jeweils für ein Bereich ist – durch dessen Überschrift.

          Mit einer leeren Überschrift ist das Problem nicht gelöst – das ist Augenwischerei.

          Für einen Bereich, der „complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable“ ist (was laut Spec der Inhalt eines article-Elements sein soll), sollte sich eine Überschrift finden lassen.

          Wenn der Inhalt dieses Kriterium nicht erfüllt – was sich für Außenstehende anhand von „Lorem ipsum“ nicht beurteilen lässt – dann wäre article falsch. Verwende div.

          Selbiges gilt übrigens auch fürs section-Element.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. article ohne Überschrift?

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Gunnar Bittersmann

            Zuerst: Eine Warnung ist kein Fehler. Der ValidatorSyntax-Checker weist dich daruf hin, dass etwas nicht in Ordnung sein könnte und du dir die Stelle nochmal ankucken solltest.

            Kam gerade übern Ticker: Short Note on HTML conformance checking von Steve Faulkner

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln