Problem mit PageButton (subpage lädt ausserhalb Seite und springt hoch)

Ronny1979 · 03 Mai 2018, 20:56:03

Hallo Leute,

hab da ein Problem mit dem Pagebutton Menü.
zb. wenn ich die subpage Multimedia laden möchte wird die außerhalb der index ganz unten geladen und springt dann hoch.
Das passiert bei allen Seiten die ich über Pagebutton laden möchte, vielleicht kann mal jemand drüber schauen und mir nen kleinen denk anstoß geben.
Bin nun auch nicht der große Könner was das betrifft, was wiki hab ich schon rauf und runter gewälzt.

Hier mal die Index und die sub Multimedia:

index.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="70">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name='lang' content='de'>
	<meta name="toast" content="0">

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="customfonts/font1/style.css">
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/mystyle.css" />
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>
		    <li class="inline semitransparent" data-row="1" data-col="1" data-sizex="12" data-sizey="1">
				<div class="sheet">
				   <div data-type="clock" data-format="D. d.m.Y" data-shortday-length="2" class="grey big left cell"></div>
				   
				   <div data-type="popup" data-width="290px" data-height="300px" data-mode="animateTop" data-return-time="10">
				   <div data-type="clock" data-format="H:i:s" data-interval="1000" class="orange tall thin inline cell"></div>
				   <div class="dialog"><header>Notdienst Apotheke</header>
				   <div data-type="image" class="top-space" data-url="images/apotheke.jpg" data-size="130px"></div>
		           <div data-type="label" class="top-space orange bigger" data-device="NotdienstApotheke" data-get="NotName"></div>
				   <div data-type="label" class="inline" data-device="NotdienstApotheke" data-post-text=", " data-get="NotdienstAdresse-1"></div>
				   <div data-type="label" class="inline" data-device="NotdienstApotheke" data-get="NotdienstAdresse-2"></div>
				   <div data-type="label" data-device="NotdienstApotheke" data-pre-text="Tel.: " data-get="NotdienstTelefon"></div>
				   <div data-type="label" data-device="NotdienstApotheke" data-pre-text="Bis " data-get="NotdienstBis"></div>
				   <div data-type="label" data-device="NotdienstApotheke" data-pre-text="Entfernung: " data-get="NotdienstEntfernung"></div></div>
				   
				   <div data-type="symbol" data-device="MuellterminDummy" data-get="Abfall-Tonne" data-warn="Abfall-Tonne" data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]' data-colors='["black","black"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-background-colors='["orange"]' class="medium top-space right inline cell"></div>
						
				   <div data-type="symbol" data-device="MuellterminDummy" data-get="Papiertonne" data-warn="Papiertonne" data-icons='["fs-dustbin warn fa-spin","fs-dustbin warn"]' data-colors='["blue","blue"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-background-colors='["orange"]' class="medium top-space right inline cell"></div>
						
				   <div data-type="symbol" data-device="MuellterminDummy" data-get="Gelbe-Tonne" data-warn="Gelbe-Tonne" data-icons='["fs-bag warn fa-spin","fs-bag warn"]' data-colors='["yellow","yellow"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-background-colors='["orange"]' class="medium top-space right inline cell"></div>
						
				   <div data-type="symbol" data-device="MuellterminDummy" data-get="Gruenschnitt" data-warn="Gruenschnitt" data-icons='["fa-tree warn fa-spin","fa-tree warn"]' data-colors='["green","green"]' data-get-on='["0","2"]' data-background-icon="fa-circle" data-background-colors='["orange"]' class="medium top-space right inline cell"></div></div></div>
			</li>
		
			<li class="semitransparent" data-row="2" data-col="1" data-sizex="1" data-sizey="6">
                <div class="sheet">
                    <div data-type="pagebutton" data-url="#main.html" data-load="#main" data-active-pattern="(.*/||.*#main.html)" data-icon="fa-home" data-background-icon="fa-circle" class="default cell"></div>
                    <div data-type="pagebutton" data-url="#multimedia.html" data-load="#multimedia" data-active-pattern=".*#multimedia.html" data-icon="fa-music" data-background-icon="fa-circle" class="prefetch cell"></div>
                    <div data-type="pagebutton" data-url="#temperaturen.html" data-load="#temperaturen" data-active-pattern=".*#temperaturen.html" data-icon="fa-sliders" data-background-icon="fa-circle" class="prefetch cell"></div>
                    <div data-type="pagebutton" data-url="#wetter.html" data-load="#wetter" data-active-pattern=".*#wetter.html" data-icon="fa-lightbulb-o" data-background-icon="fa-circle" class="prefetch cell"></div>
                    <div data-type="pagebutton" data-url="#content_charts.html" data-load="#content5" data-active-pattern=".*#content_charts.html" data-icon="fa-line-chart" data-background-icon="fa-circle" class="cell"></div>
                    <div data-type="pagebutton" data-url="#content_vusolo.html" data-load="#content6" data-active-pattern=".*#content_vusolo.html" data-icon="fa-tv" data-background-icon="fa-circle" class="cell"></div>
                    <div data-type="pagebutton" data-url="#setting.html" data-load="#setting" data-active-pattern=".*#setting.html" data-icon="fa-train" data-background-icon="fa-circle" class="cell"></div>
                </div>
            </li>
		
		
		
          <li class="semitransparent" data-row="2" data-col="12" data-sizex="1" data-sizey="6">
                <div class="sheet">
                    <div data-type="switch" data-device="Fernsehen" data-icon="fa-tv" class="top-space cell" ></div>
					<div data-type="label" class="">WZ</div><div data-type="label" data-device="Wohnzimmer.Temp" data-get="temperature" data-unit="%B0C%0A" data-limits='[	      10,	  18.2,	    18.4,	  18.6,	    18.8,	    19,	    19.2,	  19.4,	    19.6,	  19.8,	      20,	  20.2,	    20.4,	  20.6,	    20.8,		21,	    21.2,	  21.4,	    21.6,	  21.8,	      22]' data-colors='["#6699FF","#6E91F2","#758AE6","#7D82D9","#857ACC","#8C73BF","#946BB3","#9C63A6","#A35C99","#AB548C","#B34D80","#BA4573","#C23D66","#C93659","#D12E4D","#D92640","#E01F33","#E81726","#F00F1A","#F7080D","#FF0000"]' class="cell big"></div>
					<div data-type="label" class="">Kü</div><div data-type="label" data-device="Kueche.Temp" data-get="temperature" data-unit="%B0C%0A" data-limits='[	      10,	  18.2,	    18.4,	  18.6,	    18.8,	    19,	    19.2,	  19.4,	    19.6,	  19.8,	      20,	  20.2,	    20.4,	  20.6,	    20.8,		21,	    21.2,	  21.4,	    21.6,	  21.8,	      22]' data-colors='["#6699FF","#6E91F2","#758AE6","#7D82D9","#857ACC","#8C73BF","#946BB3","#9C63A6","#A35C99","#AB548C","#B34D80","#BA4573","#C23D66","#C93659","#D12E4D","#D92640","#E01F33","#E81726","#F00F1A","#F7080D","#FF0000"]' class="cell big"></div>
					<div data-type="label" class="">KZ</div><div data-type="label" data-device="Kinderzimmer.Temp" data-get="temperature" data-unit="%B0C%0A" data-limits='[	      10,	  18.2,	    18.4,	  18.6,	    18.8,	    19,	    19.2,	  19.4,	    19.6,	  19.8,	      20,	  20.2,	    20.4,	  20.6,	    20.8,		21,	    21.2,	  21.4,	    21.6,	  21.8,	      22]' data-colors='["#6699FF","#6E91F2","#758AE6","#7D82D9","#857ACC","#8C73BF","#946BB3","#9C63A6","#A35C99","#AB548C","#B34D80","#BA4573","#C23D66","#C93659","#D12E4D","#D92640","#E01F33","#E81726","#F00F1A","#F7080D","#FF0000"]' class="cell big"></div>
					<div data-type="label" class="">SZ</div><div data-type="label" data-device="Schlafzimmer.Temp" data-get="temperature" data-unit="%B0C%0A" data-limits='[	      10,	  18.2,	    18.4,	  18.6,	    18.8,	    19,	    19.2,	  19.4,	    19.6,	  19.8,	      20,	  20.2,	    20.4,	  20.6,	    20.8,		21,	    21.2,	  21.4,	    21.6,	  21.8,	      22]' data-colors='["#6699FF","#6E91F2","#758AE6","#7D82D9","#857ACC","#8C73BF","#946BB3","#9C63A6","#A35C99","#AB548C","#B34D80","#BA4573","#C23D66","#C93659","#D12E4D","#D92640","#E01F33","#E81726","#F00F1A","#F7080D","#FF0000"]' class="cell big"></div>
					<div data-type="label" class="">Bad</div><div data-type="label" data-device="Bad.Temp" data-get="temperature" data-unit="%B0C%0A" data-limits='[	      10,	  18.2,	    18.4,	  18.6,	    18.8,	    19,	    19.2,	  19.4,	    19.6,	  19.8,	      20,	  20.2,	    20.4,	  20.6,	    20.8,		21,	    21.2,	  21.4,	    21.6,	  21.8,	      22]' data-colors='["#6699FF","#6E91F2","#758AE6","#7D82D9","#857ACC","#8C73BF","#946BB3","#9C63A6","#A35C99","#AB548C","#B34D80","#BA4573","#C23D66","#C93659","#D12E4D","#D92640","#E01F33","#E81726","#F00F1A","#F7080D","#FF0000"]' class="cell big"></div>
					<div data-type="switch" data-icon="fa-home"></div>
					<div data-type="switch" data-icon="fa-home"></div>
                </div>
            </li>
            <li style="background:transparent" data-row="2" data-col="1" data-sizex="10" data-sizey="6">
                <div class="page" id="main"></div>
                <div class="page" id="multimedia"></div>
		<div class="page" id="temperaturen"></div>
                <div class="page" id="wetter"></div>
                <div class="page" id="content5"></div>
                <div class="page" id="content6"></div>
                <div class="page" id="setting"></div>
            </li>
			
			


        </ul>
    </div>
</body>

</html>

multimedia.html

Code Auswählen

<html>
<head></head>
<body>
<div class="page" id="multimedia">
    <div class="gridster">
        <ul>

		<li data-row="1" data-col="1" data-sizex="6" data-sizey="3" class="semitransparent">
    <!--<header><div data-type="label" class="medium semitransparent">Multimedia</div></header>-->
<div class="inline cell">
        <div data-type="switch" 
			 data-device="Fernsehen" 
			 data-icon="fa-tv" 
			 class="top-space cell" ></div>
        <div data-type="label" class="narrow">Fernsehen</div>
</div>
<div class="inline cell">
		<div data-type="switch" 
		     data-device="Musik" 
			 data-icon="fa-music" 
			 class="top-space cell" ></div>
        <div data-type="label" class="narrow">Musik</div>
</div>
<div class="inline cell">
        <div data-type="push"
             data-device="harmony_33058002"
             data-set-on="VolumeDown"
             data-icon="fa-volume-down" 
			 class="top-space cell" ></div>
        <div data-type="label" class="narrow">Volume Down</div>
</div>
<div class="inline cell">
        <div data-type="push"
             data-device="harmony_33058002"
             data-set-on="VolumeUp"
             data-icon="fa-volume-up" 
			 class="top-space cell" ></div>
        <div data-type="label" class="narrow">Volume Up</div>
</div>

<!--Sendername & Popup Kanalliste-->
<div data-type="popup" data-width="700px" data-height="255px" data-mode="animateTop" data-return-time="10">
		<div data-type="label" 
		     data-device="vu" 
			 data-get="servicename" 
			 class="top-space orange bigger"></div>
		<div class="dialog">
	<header>Kanalliste</header>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:19:8A:8:85:C00000:0:0:0:"
			 data-url="images/tv/disney_junior.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:19:157C:41F:1:C00000:0:0:0:"
			 data-url="images/tv/disney_channel.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
	         data-fhem-cmd="set vu channel 1:0:19:6F:D:85:C00000:0:0:0:"
			 data-url="images/tv/disney_cinemagic.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:16:1C:3:85:C00000:0:0:0:"
			 data-url="images/tv/disney_xd.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:16:13:3:85:C00000:0:0:0:"
			 data-url="images/tv/junior.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:16:193:E:85:C00000:0:0:0:"
			 data-url="images/tv/boomerang.png"
			 data-size="130px"></div>	
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:19:2B98:3F2:1:C00000:0:0:0:"
			 data-url="images/tv/kika.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel 1:0:19:5273:41D:1:C00000:0:0:0:"
			 data-url="images/tv/nick.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel RTL_HD"
			 data-url="images/tv/rtl.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel RTLII_HD"
			 data-url="images/tv/rtl_2.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel ProSieben_HD"
			 data-url="images/tv/pro7.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel SAT.1_HD"
			 data-url="images/tv/sat.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel VOX_HD"
			 data-url="images/tv/vox.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel kabel_eins_HD"
			 data-url="images/tv/kabel1.png"
			 data-size="130px"></div>
		<div data-type="image" class="top-space inline"
			 data-fhem-cmd="set vu channel SUPER_RTL_HD"
			 data-url="images/tv/super_rtl.png"
			 data-size="130px"></div>
		</div>
</div>

<!--Aktuelle Sendung & Popup Details-->  
	    <div data-type="popup" data-width="700px" data-height="250px" data-mode="animateTop" data-return-time="10">
		<div data-type="label" 
		     data-device="vu" 
			 data-get="currentTitle" 
			 class="grey large cell"></div>
        <div class="dialog">
<header><div data-type="label" data-device="vu" data-get="currentTitle"></div></header>
		<div data-type="label" 
		     data-device="vu" 
			 data-get="eventdescriptionextended"
			 class="grey large left-align"></div>	
		<div data-type="label" class="grey top-space inline"
		     data-device="vu" 
			 data-get="eventdescription"></div>
		<div data-type="label" class="grey top-space inline">Läuft noch:</div>
		<div data-type="label"
		     data-device="vu" 
			 data-get="eventremaining_hr"
			 data-unit=" h:m:s"
			 class="grey top-space inline"></div>
		</div>
</li>
		
		
        </ul>
	</div>
</div>
</body>
</html>

Danke schon mal im vorraus.

gruß
Ronny

amenomade · 03 Mai 2018, 22:11:42

In index.html ladest Du das Inhald der Subseite an der gleiche Stelle (row 2 col 1) wie das Menü:

Code Auswählen

<li class="semitransparent" data-row="2" data-col="1" data-sizex="1" data-sizey="6">
                <div class="sheet">
                    <div data-type="pagebutton...

<li style="background:transparent" data-row="2" data-col="1" data-sizex="10" data-sizey="6">
                <div class="page"

Dann schiebt er, was er kann.

Ronny1979 · 03 Mai 2018, 22:34:27

Danke, hab ich komplett übersehen. Hab es geändert aber die Seite ist immer noch von unten nach oben gehopst.

Hab zum Test es jetzt so eingestellt:

Code Auswählen

 <li style="background:transparent" data-row="2" data-col="2" data-sizex="1" data-sizey="">
                <div class="page

Man beachte das bei data-sizey nichts drin steht aber so wird die subpage genau dort eingeblendet wo sie soll, ohne das gespringe.

Versteh zwar den Zusammenhang nicht warum es so geht, und nicht wenn ich dort was angebe. Was ja eigentlich müsste oder?

Gesendet von iPhone mit Tapatalk

amenomade · 04 Mai 2018, 08:13:39

Du musst genau die Koordinaten und grössen von den verschiedenen Blocks kalkulieren, und am besten die Seite von oben links nach unten rechts ausfüllen. Ich würde

Code Auswählen

<li class="semitransparent" data-row="2" data-col="12" data-sizex="1" data-sizey="6">(Fernsehen) z.B erst am Ende laden.
So weit ich weiss, ladet ftui die Stücke nach und nach, versucht die so weit wie möglich nach oben links zu platzieren, und wenn der Platz schon genommen ist, verschiebt er was stört.

Auch in allen Unterseiten prüfen, dass die die Breite (10) und Höhe (6) des reservierten Platzes genau stimmen, sonst muss ftui wieder jonglieren.

FHEM Forum

Problem mit PageButton (subpage lädt ausserhalb Seite und springt hoch)

Ronny1979

amenomade

Ronny1979

amenomade