Scroll Page

Discussions about Mainlobby running on Apple mobile devices.
User avatar
itanic
Intermediate
Intermediate
Posts: 455
Joined: Tue Jun 15, 2004 10:05 am
Location: Oregon
Contact:

Scroll Page

Postby itanic » Fri Sep 24, 2010 10:36 am

I've taken the Lighting-Room1.html page and attempted to add a third light switch to the page (I'm new to html so please forgive me). This new light now takes the images below the bottom of the page so I need to be able to scroll. How can I get this done?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link href="images/MainLobby.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/styles.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<script src="javascript/iPhone.js" type="text/javascript"></script>
<title>Lighting</title>
<script>
var Sliders = [{min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider1handle"},
{min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider2handle"},
{min:0,max:100,curX:0,minX:0,maxX:240,value:0,handel:"slider3handle"}];

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

function UpdateSlider(sNum, sVal) {
Sliders[sNum-1].curX = sVal * (Sliders[sNum-1].maxX / Sliders[sNum-1].max);
$(Sliders[sNum-1].handel).style.webkitTransform = 'translate3d(' + Sliders[sNum-1].curX + 'px,0,0)';
}

function StartupMacro() {
$('slider1handle').addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
if(Sliders[0].curX < Sliders[0].minX) {
Sliders[0].curX = Sliders[0].minX;
};
if (Sliders[0].curX >= Sliders[0].maxX) {
Sliders[0].curX = Sliders[0].maxX;
}
el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
}, false);

$('slider1handle').addEventListener('touchend', function(event) {
var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
$('ml__mlhsplugin_z32_value').innerHTML = sVal;
doCommand("MLHSPlugin|HS_ExecX10:z32~DDIM~"+sVal);
}, false);

$('slider2handle').addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
if(Sliders[0].curX < Sliders[0].minX) {
Sliders[0].curX = Sliders[0].minX;
};
if (Sliders[0].curX >= Sliders[0].maxX) {
Sliders[0].curX = Sliders[0].maxX;
}
el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
}, false);

$('slider2handle').addEventListener('touchend', function(event) {
var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
$('ml__mlhsplugin_z29_value').innerHTML = sVal;
doCommand("MLHSPlugin|HS_ExecX10:z29~DDIM~"+sVal);
}, false);

$('slider3handle').addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
Sliders[0].curX = touch.pageX - this.offsetLeft - 19;
if(Sliders[0].curX < Sliders[0].minX) {
Sliders[0].curX = Sliders[0].minX;
};
if (Sliders[0].curX >= Sliders[0].maxX) {
Sliders[0].curX = Sliders[0].maxX;
}
el.style.webkitTransform = 'translate3d(' + Sliders[0].curX + 'px,0,0)';
}, false);

$('slider3handle').addEventListener('touchend', function(event) {
var sVal = Math.floor(Sliders[0].curX / Sliders[0].maxX * 100);
$('ml__mlhsplugin_z28_value').innerHTML = sVal;
doCommand("MLHSPlugin|HS_ExecX10:z28~DDIM~"+sVal);
}, false);
}
</script>
</head>
<body>
<div id="topbar" class="black">
<div id="title">{{Lighting_ActiveRoomName}}</div>
<div id="blueleftbutton"><a href="Lighting.html">Rooms</a></div>
</div>

<span style="z-index:3;position:absolute;top:50px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">Can Lights</span>
<div class="sliderbase" style="z-index:2;position:absolute;top:80px;left:15px;">
<img id="slider1" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
<img id="slider1handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
<span id="ml__mlhsplugin_z32_value" _MLSlider="1" _MLSliderIndex="1" style="visibility:hidden;">{{mlhsplugin_z32_value}}</span>
</div>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z32~DDIM~0');" class="basebutton" style="z-index:2;position:absolute;top:165px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z32~DDIM~100');" class="basebutton" style="z-index:2;position:absolute;top:165px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>


<span style="z-index:3;position:absolute;top:220px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">Under Cabinet Lights</span>
<div class="sliderbase" style="z-index:2;position:absolute;top:250px;left:15px;">
<img id="slider2" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
<img id="slider2handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
<span id="ml__mlhsplugin_z29_value" _MLSlider="1" _MLSliderIndex="2" style="visibility:hidden;">{{mlhsplugin_z29_value}}</span>
</div>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z29~DDIM~0');" class="basebutton" style="z-index:2;position:absolute;top:335px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z29~DDIM~100');" class="basebutton" style="z-index:2;position:absolute;top:335px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

<span style="z-index:3;position:absolute;top:390px;left:20px;width:285px;height:34px;text-align:center;font:normal 22px/34px Helvetica;color:rgba(255, 255, 255, 1.0);padding:0px;border:0px;margin:0px;overflow:hidden;text-overflow:clip;">Cabinet Lights</span>
<div class="sliderbase" style="z-index:2;position:absolute;top:410px;left:15px;">
<img id="slider3" src="images/Slider1.png" style="z-index:3;position:inherit;top:16px;left:58px;-webkit-transform:scale(1.45);" />
<img id="slider3handle" src="images/SliderHandle1.png" style="z-index:4;position:inherit;top:16px;left:7px;-webkit-transition: -webkit-transform 0.25s ease" />
<span id="ml__mlhsplugin_z28_value" _MLSlider="1" _MLSliderIndex="3" style="visibility:hidden;">{{mlhsplugin_z28_value}}</span>
</div>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z28~DDIM~0');" class="basebutton" style="z-index:2;position:absolute;top:505px;left:45px;">&nbsp;&nbsp;Off&nbsp;&nbsp;</span>
<span onclick="doCommand('MLHSPlugin|HS_ExecX10:z28~DDIM~100');" class="basebutton" style="z-index:2;position:absolute;top:505px;left:220px;">&nbsp;&nbsp;On&nbsp;&nbsp;</span>

<span onclick="doCommand('Macro|MLHSPlugin|HS_ExecX10:z32~DDIM~0!MLHSPlugin|HS_ExecX10:z29~DDIM~0!MLHSPlugin|HS_ExecX10:z28~DDIM~0');" class="basebutton" style="z-index:2;position:absolute;top:570px;left:45px;">&nbsp;&nbsp;All Off&nbsp;&nbsp;</span>
<span onclick="doCommand('Macro|MLHSPlugin|HS_ExecX10:z32~DDIM~100!MLHSPlugin|HS_ExecX10:z29~DDIM~100!MLHSPlugin|HS_ExecX10:z28~DDIM~100');" class="basebutton" style="z-index:2;position:absolute;top:570px;left:190px;">&nbsp;&nbsp;All On&nbsp;&nbsp;</span>


<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<script language="javascript">
autoupdate = true;
pagevars = getvars();
StartupMacro();
UpdateVariables();
</script>
</body>
</html>

rileydog
Expert
Expert
Posts: 667
Joined: Wed Jun 02, 2004 12:25 am
Location: Kalamazoo, Michigan
Contact:

Re: Scroll Page

Postby rileydog » Fri Sep 24, 2010 11:01 am

Try adding the one line in your body section below (i copied your code and added it to where I think it should go):


<body>
<div style="width: ???px; height: ???px; overflow: scroll;"</div>
<div id="topbar" class="black">
<div id="title">{{Lighting_ActiveRoomName}}</div>
<div id="blueleftbutton"><a href="Lighting.html">Rooms</a></div>
</div>


replace ??? with your pixel width and height requirements

I am not an expert so there may be a better way to do it and I didn't test if it would work either.

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: Scroll Page

Postby CinemarDave » Fri Sep 24, 2010 3:43 pm

No don't try message around with trying to adjust page heights. I'll provide a demo page that will show more than 2 lights on it. That page needed to scroll vertically and I took the lazy way out.

User avatar
itanic
Intermediate
Intermediate
Posts: 455
Joined: Tue Jun 15, 2004 10:05 am
Location: Oregon
Contact:

Re: Scroll Page

Postby itanic » Fri Sep 24, 2010 4:43 pm

CinemarDave wrote:No don't try message around with trying to adjust page heights. I'll provide a demo page that will show more than 2 lights on it. That page needed to scroll vertically and I took the lazy way out.


Thanks

User avatar
CinemarDave
Site Admin
Site Admin
Posts: 10535
Joined: Fri Feb 07, 2003 8:56 am
Location: Planet Earth
Contact:

Re: Scroll Page

Postby CinemarDave » Fri Sep 24, 2010 7:07 pm

I just released version 4.0.1 of the iPhone web app and the Living Room lighting (Lighting-room1.html) page now shows 5 lights on it along with All Off and All On. The page scrolls vertically while keeping the individual lamp sliders. Works ok in simulation here.


Return to “MainLobby on iPhone, iPod Touch”

Who is online

Users browsing this forum: No registered users and 1 guest