2 Fragen zu Pagebutton

[paul79]

Hallo

ich will mein Tablet UI mir Pagebutton neu aufbauen und bin dabei auf 2 Probleme gestoßen, vielleicht kann mir einer helfen.

1. Ich nutzte, aus einer Demo, ein Script in einer Seite wo aller 5 Sekunden eine andere Wetterkarte angezeigt wird. Dieses Script funktioniert nicht mehr unter Verwendung von Pagebutton.

Weiß jemand wie ich das Script zum laufen bekomme oder hat jemand eine andere Lösung?

Code Auswählen Erweitern


<!-- ============ Wetterkarten ============ -->
<!-- ====================================== -->
<li class="semitransparent3d" data-row="1" data-col="1" data-sizex="10" data-sizey="8">
<header  class="semitransparentheader">DWD Wetterkarten</header>
<div class="cell" style="display:inline-block">
<a class="img-shadow shadow"><img id="imgmap" src="http://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_brd_akt.jpg"  width="460" height="425" alt="Wetterkarte"></a>
</div>
   <script>
$(document).ready(function() {
setInterval(function() {
var n = $("#imgmap").data("number");
var newsrc;
var newsrckey;
switch(n) {
case 0:  newsrckey = 'dwd_hessen';          newsrc = "http://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_hes_akt.jpg"; break;
case 1:  newsrckey = 'dwd_sachsen';         newsrc = "http://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_sac_akt.jpg"; break;
case 2:  newsrckey = 'dwd_morgen';          newsrc = "http://www.dwd.de/DWD/wetter/wv_allg/deutschland/bilder/vhs_brd_start.jpg"; break;
case 3:  newsrckey = 'dwd_trend';           newsrc = "http://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/pic_schnee.jpg"; break;
case 4:  newsrckey = 'kontor_de';           newsrc = "http://www.dwd.de/DWD/wetter/sat/bilder/meteosat/satbild_hrvir_akt.png"; break;
default: newsrckey = 'dwd_de';              newsrc = "http://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_brd_akt.jpg"; n=-1; break;
}
$("#imgmap").attr('src', newsrc);
$("#imgmaplink").attr('href', 'aussen-iframe.php?content='+newsrckey);
$("#imgmap").data("number", n+1)
}, 5000);
});
</script>
</li>


2. Ich möchte gerne dass sich beim Pagebuttonstatus "on" der Schatten von schwarz in rot ändert.(siehe Bilder)

Wie kann ich den Pagebuttonstatus "on" in meiner user.css einbinden?
Ich schaffe es nur für den Status :active oder :hover bzw über einen Button "Click me!).

In der user.css steht drin:

Code Auswählen Erweitern


.shadow {
    -webkit-filter: drop-shadow( -5px -5px 5px rgba(0,0,0,0.8) );
            filter: drop-shadow ( -5px -5px 5px rgba(0,0,0,0.8) );
}
div[data-type="pagebutton"]:active {
          -webkit-filter: drop-shadow( -5px -5px 5px rgba(255,0,0,0.8) ) !important;
            filter: drop-shadow ( -5px -5px 5px rgba(255,0,0,0.8) ) !important;
}

#btnControl {
    display: none;
}

#btnControl:checked + label + [data-type="pagebutton"] {
          -webkit-filter: drop-shadow( -5px -5px 5px rgba(255,0,0,0.8) ) !important;
            filter: drop-shadow ( -5px -5px 5px rgba(255,0,0,0.8) ) !important;
}


In der Tablet UI Seite steht:

Code Auswählen Erweitern


<li class="semitransparent3d" data-row="1" data-col="6" data-sizex="2" data-sizey="2">
<header   class="semitransparentheader">Wetter</header>


<input type="checkbox" id="btnControl"/>
<label for="btnControl">Click me!</label>

<div data-type="pagebutton" data-url="#content_sub_wetter.html" data-load="#content9" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern="(.*/||.*content_sub_wetter.html||.*#content_wetter.html)" data-icon="oa-weather_cloudy" class="prefetch bigger shadow" data-device="UWZ" data-warn="WarnCount"></div>


</li>


Danke!

Gruß Paul