Automatischer Inhaltswechsel eines div-containers

pfaelzer · 17. Januar 2014

Hallo,

ich bin dabei ein Infoterminal zu erstellen. Gerät Raspberrypi.
Das Gerät hängt an einem TV ohne Maus und Tastatur.
Der Monitor ist folgend aufgeteilt:
header: Überschrift
div1 Info1
div2 Info2/Info3

div1 und 2 sind nebeneinander auf dem Bildschirm aufgeteilt.

Bis hierhin kein Problem.

Ich möchte jedoch, das in div2 der Inhalt Info2 alle 2 Minuten gegen den Inhalt Info3 ausgetauscht wird!
Ich habe Lösungen gefunden die alle ein zutun über die Maus oder Tastatur benötigen, habe ich aber nicht.
Hat jemand eine Idee?

Schon mal danke für Eure Anregungen.

Pfaelzer

cottton · 17. Januar 2014

Weiß jetzt nicht was genau Du planst.
Aber es klingt als ob Du von dem rasp aus eine (offline)Website anzeigen willst.
Um den Inhalt von bestimmten Elementen zu ändern kannst du Javascript nutzen.
Kennst Du Dich denn damit aus?

edit: hatte gerade lange Weile: http://jsfiddle.net/Gtyyk/
und hier nochmal der code =)

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
        <meta name="robots" content="all" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />




    	<style type="text/css"><!--
            /* http://meyerweb.com/eric/tools/css/reset/
               v2.0 | 20110126
               License: none (public domain)
            */
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure,
            footer, header, hgroup, menu, nav, section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol, ul {
                list-style: none;
            }
            blockquote, q {
                quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            /* * * * * * */
            body{
                background:gray;
                color:#EAEAEA;
            }
            h1{
                padding:10px;
                font-size:50px;
                text-align:center;
            }
            h2{
                font-size:30px;
                text-align:center;
            }
            #header{
                width:100%;
                background:blue;
            }
            #left{
                display:inline-block;
                float:left;
                width:50%;
                background:black;
            }
            #right{
                display:inline-block;
                width:50%;
                background:red;
            }
            .content{
                font-size:30px;
            }
    	--></style>




        <script type="text/javascript"><!--
            window.onload = function(){
                var loop = setInterval(function(){key=switchIt()},sec*1000);
            }




            var cont = [
                'content 1 .... bla',
                'content 2 .... bla',
                'content 3 .... bla'
            ];
            var el = 'right';
            var sec = 1;
            var key=0;
            function switchIt(){
                document.getElementById(el).innerHTML = cont[key];
                key = (++key == cont.length)?0:key;
                return key;
            }
        --></script>
    </head>
    <body>




        <header id="header">
            <h1>Überschrift</h1>
        </header>




        <section class="content" id="left">
            <div id="left">
                left
            </div>
        </section>




        <section class="content" id="right">
            <div id="right">
                <!-- will be filled -->
            </div>
        </section>




    </body>
</html>

Alles anzeigen

pfaelzer · 18. Januar 2014

Hallo,
erst mal danke für die Antwort!

Ich habe folgendes vor:
<!DOCTYPE html>

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Vertretungsplan Abteilung Milchzubereitung</title>
</head>

<body>

<header>
<h1>Info-Monitor der Abteilung Milchzubereitung</h1>
</header>

<div id="info1"><iframe src="http://de.wikipedia.org/wiki/Milch" width="1000" height="600"></iframe></div>

<div id="info2"><iframe src="http://www.n-tv.de" width="500" height="600"></iframe></div>

<div id="info3"><iframe src="http://www.t-online.de" width="500" height="600"></iframe></div>

</body>
</html>

Ich habe schon gemerkt das ich ohne java nicht auskomme.
Habe da aber gar keine Ahnung.

Ich werde mir erst mal deine Seite ansehen und versuchen zu verstehen.

mfg pfaelzer
@ cotton

das ist was ich suche!! Danke.
Werde mal versuchen es umzubauen!

cu pfaelzer
@cotton

perfekt!!

Genau das was ich gesucht habe!!

Danke, danke!

cu pfaelzer

PS muss ich dass hier im Forum als erledigt setzen?

cottton · 18. Januar 2014

Musste nicht.
Gern geschehen =)

Der Ablauf is recht einfach: (alles in /* ... */ sind Kommentare)

HTML

<script type="text/javascript"><!--
            /*hier wird alles gestartet: wenn Fenster geladen, dann setze ein Interval ... */
            window.onload = function(){
                var loop = setInterval(function(){key=switchIt()},sec*1000);
            }




            /*der Inhalt: könnte man auch aus Dateien lesen ...*/
            var cont = [
                'content 1 .... bla',
                'content 2 .... bla',
                'content 3 .... bla'
            ];

            /*das Element (die id)*/
            var el = 'right';

            /*die Sekunden zwischen dem Wechsel*/
            var sec = 1;

            /*key ist nur um die aktuelle Position zu merken*/
            var key=0;




            /*die Funktion:*/
            function switchIt(){
                /*~nimm das element soundso und setze den Inhalt auf das, was in cont[Ebene key] steckt*/
                document.getElementById(el).innerHTML = cont[key];




                /*key ist nun: (wenn key+1 genauso groß ist wie die Anzahl der Inhalte cont[])?dann 0 : sonst key*/
                key = (++key == cont.length)?0:key;
                return key;
            }
        --></script>

Alles anzeigen

Wenn was nicht geht einfach Fragen.

Automatischer Inhaltswechsel eines div-containers

Jetzt mitmachen!

Teilen