Dropping controls to the bottom of the screen - Micro Kiosks

Trying to crank out a customer-specific demo with little time to spare.

I have been successful in having a no-border table that filled the screen and left cells at the bottom for Micro Kiosk buttons to match the MK3000s buttons and supply functionality to the MK4000.  However I have a few screens that have variable content that made the table-technique sloppy or dependent upon all images being identically sized.  There has to be a better way.

This HTML newbie could use some guidance.  Looks like LAYER might be the answer, but alas, time is short.

Carl ~ Texas

Anonymous (not verified)
Hi Carl,I would create a <div

Hi Carl,

I would create a <div> tag with fixed positioning, and align it with the bottom of the screen:

<html>

    <head>

        <style>

            #navigation

            {

                width: 100%;

                position: fixed;

                bottom: 0;

                left: 0;

                right: 0;

                z-index: 100;

                background: #00A0DF;

                color: white;

            }

        </style>

    </head>

    <body>

        <div id="navigation">

            Hello

        </div>

    </body>

</html>

This will put a bar to the bottom of the screen. You just need to put your buttons in this div container and it will always stay at the bottom of the screen, even if the content is scrollable.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Carl Pearson
PERFECT!It is quite the

PERFECT!

It is quite the mindset change going from C# and WinForms to HTML and wanting location control.

Let's see if this old dog can come up to speed before the next turn of the century.

Carl

;^))

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
Haha! Glad to help!I have

Haha! Glad to help!

I have enhanced the previous example with by adding some buttons. These can be styled to match your look-and-feel by changing the CSS (in the <style> tag).

<html>

          <head>

                    <style>

                              #navigation

                              {

                                        width: 100%;

                                        position: fixed;

                                        bottom: 0;

                                        left: 0;

                                        right: 0;

                                        z-index: 100;

                                        background: #00A0DF;

                                        color: white;

                                        text-align: center;

                              }

                              .navbutton

                              {

                                        display: inline;

                                        font: bold 20px Arial;

                                        margin: 0px 20px;

                                        padding: 5px 10px;

                              }

                    </style>

          </head>

          <body>

                    <div id="navigation">

                              <button class="navbutton">Button1</button>

                              <button class="navbutton">Button2</button>

                              <button class="navbutton">Button3</button>

                              <button class="navbutton">Button4</button>

                    </div>

          </body>

</html>

I find this site very useful for HTML and CSS tutorials and reference tables, it may be of some use:

http://www.htmldog.com

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Carl Pearson
Cut/Pasted into web page. 

Cut/Pasted into web page.  Also started a new web page for testing. (2nd image)

Works great on my PC, MK3000 with Pocket Browser 3, it doesn't drop to the bottom.

4000 MK3000s are in play ....

Buttons.GIF

Buttons2.GIF

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Anonymous (not verified)
Oh sorry, I thought it was

Oh sorry, I thought it was for RhoElements which has WebKit at its core. As PocketBrowser uses IE6 as its rendering engine, we need to use more legacy code. James's suggestion should work.

<html>

          <head>

                    <style>

                              html, body

                              {

                                        height: 100%;

                                        margin: 0px;

                                        padding: 0px;

                              }

                              #navigation

                              {

                                        position: absolute;

                                        width: 100%;

                                        bottom: 0;

                                        left: 0;

                                        right: 0;

                                        z-index: 100;

                                        background: #00A0DF;

                                        color: white;

                                        text-align: center;

                              }

                              .navbutton

                              {

                                        display: inline;

                                        font: bold 20px Arial;

                                        margin: 0px 20px;

                                        padding: 5px 10px;

                              }

                    </style>

          </head>

          <body>

                    <div id="navigation">

                              <button class="navbutton">Button1</button>

                              <button class="navbutton">Button2</button>

                              <button class="navbutton">Button3</button>

                              <button class="navbutton">Button4</button>

                    </div>

          </body>

</html>

I won't be able to test on PocketBrowser until tomorrow unfortunately but it works with IE6 so it probably will work in PocketBrowser.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Carl Pearson
I can install RhoElements. 

I can install RhoElements.  Not sure what is already licensed on MK3000s, but will try installing it shortly.  4,000 MK3000s have my attention.  Or maybe a snippet from James while I address other data issues.  They want the DEMO devices delivered tonight.  Grrrrr.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Robert Galvin
Carl – I tested the last post

Carl – I tested the last post by Ben on both PocketBrowser and RhoElements on a MK3000 and they both seem to work.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Carl Pearson
Hmm. I cut/pasted the exact

Hmm. I cut/pasted the exact pages and it pops to the top.  No changes. 

Tried with both the one with the buttons and the earlier version.

Different PB Versions? 

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Robert Galvin
Carl From the log file, it

Carl

From the log file, it looks like I am using PocketBrowser Version: 3.0.7.10 – It was installed already on my MK. Attached is the file that I pointed PB to.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


James Morley-Smith
Hi CarlIf you create a <div>

Hi Carl

If you create a <div> and specify its size to be 100% in height (and potentially in width too if that's what you require), you can than specify your controls bottom in CSS.  Therefore, if you want it to be on the bottom of the screen, specify the bottom to be 0 (zero);

I shall post an example in a few minutes...watch this space...

James.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


James Morley-Smith
Looks like Ben beat me to

Looks like Ben beat me to that sample code!!

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments