fruit machine reels picker list

**theremotedr** · 01-09-2017, 04:14 PM

Looking for a scroll wheel picker.
Animated in its operation as the picker list looks like it spinning around.

"Original text deleted"

**coothead** · 01-09-2017, 04:56 PM

Hi there theremotedr,

as requested, you did not say what it's functions are.

Nevertheless, test this code...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-image: url(http://theremotedoctor.co.uk/m-images/background.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#chbx {
    position: absolute;
    left: -999em;
 }

#dropdown {
    display: none;
 }

@media screen and (max-width:30em) {
#dropdown {
    display: block;
 }

#dropdown, #dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#dropdown li {
    height: 3em;
    line-height:3em;
    box-sizing: border-box;
    cursor: pointer;
 }

#dropdown label {
    display: block;
    height: 100%;
    margin-bottom: 0.4em;
    font-weight: bold;
    text-align: center;
    background-color: #e6e6e6;
    background-image: linear-gradient(to bottom, #efefef, #9f9f9f);
    cursor: pointer;
 }

#dropdown li:first-of-type {
    border: 0.06em solid #000;
 }

#dropdown div {
   height: 0;
   padding:0;
   opacity: 0;
   background-image: linear-gradient(to bottom, #a2a3a8,#282a39);
   overflow: hidden;
   transition: 0.5s ease-in-out;
 }

#chbx:checked~#dropdown div {
    height:15em;
    padding: 0.5em;
    border: 0.06em solid #000;
    opacity: 1;
 }

#dropdown ul {
    border: 0.06em solid #000;
    border-radius: 0.4em;
    background-image: linear-gradient(to bottom, #ababb5 0%,#fcfcfe 25%,#fcfcfe 75%,#ababb5 100%);
    box-shadow: inset 0 0 1em 0.75em rgba(0,0,0,0.4);
}

#dropdown ul li {
    text-indent: 2em;
    border: 0.06em solid transparent;
 }

#dropdown ul li:first-of-type {
    border:0;
 }

#dropdown ul li:hover, 
#dropdown ul li:active {
    border-top-color: #656982;
    border-bottom-color: #656982;
    background-image: linear-gradient(to bottom, #dfe2eb 0%,#b9bfd7 49.9%,#a3aac7 50.1%,#a9adc8 100%);
 }

#dropdown ul li:first-of-type:hover {
    border-radius: 0.4em 0.4em 0 0;
 }

#dropdown ul li:last-of-type:hover {
    border-radius: 0 0 0.4em 0.4em;
 }
}
</style>

</head>
<body> 
<input id="chbx" type="checkbox">
<ul id="dropdown">
 <li>
  <label for="chbx">Cities</label>
   <div>
    <ul>
     <li>Alaska</li>
     <li>Arizona</li>
     <li>California</li>
     <li>Colorado</li>
     <li>Conneticut</li>
    </ul>
   </div>
  </li>
</ul>

</body>
</html>

...for design and we can work on it's functionality when we know what that might be.

coothead

**theremotedr** · 01-09-2017, 05:19 PM

Evening,

Take this page for example http://www.theremotedoctor.co.uk/acc...llto=selection
I plan to keep the look of the web page version the same for PC & IPAD which shouldnt be an issue due to screen res properties etc.

The difference in appearance would be for mobile devices & maybe iphone only where other mobile devices would see the same as they do now.
On each web page you would see something like,

Code:

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI002.png', 'Audi002','<b>£4.00</b><br>Fix That Damaged Remote<br>Easy To Swap Over<br><span class=noteColor>T5 & T6 Screwdriver Is Required</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">Flip Remote Key Pad</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI006.png', 'Audi006','<b>£8.00</b><br>Key Will Require Cutting<br>Emergency Key<br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">Smart remote uncut key</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI005.png', 'Audi005','<b>£8.00</b><br>Chip Will Require Programming<br>With Diagnostic Tool<br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">Virgin Can Bus Chip ID48</a></li>

<li class="licenter"><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" id="rmfb" target="_blank">Read My Facebook Feedback</a></li>
<li class="licenter"><a href="#home" id="rtm" class="scroll">Return To Menu</a></li>

This would be what is shown on the mobile device as represented by the image below.

Click image for larger version.

Name: 2108.jpg
Views: 420
Size: 20.0 KB
ID: 6034

I am using this test page as we go along http://www.theremotedoctor.co.uk/acc...llto=selection

Currently the iphone screen looks like this.

Click image for larger version.

Name: 2109.jpg
Views: 439
Size: 24.5 KB
ID: 6035

**coothead** · 01-09-2017, 05:42 PM

Hi there theremotedr,

I am finding it extremely difficult trying to find some sort
of connection between this...

...and this...

Also, you do not mention whether the code that I gave
you is a start in the right direction.

I do understand, of course, that it can take a little while
for us to start singing from the same hymn sheet.

coothead

**theremotedr** · 01-09-2017, 05:54 PM

The first photo is what the screen should look like on the mobile.
With the code you supplied and installed the mobile looks like the second photo of which is a screen shot from the phone.

Is that clearer for you ?

**theremotedr** · 01-09-2017, 06:18 PM

Coothead.
Im sorry phone was sleeping.

We are on the correct track.
See correct screen shot from mobile phone.

Click image for larger version.

Name: 1.jpg
Views: 413
Size: 7.2 KB
ID: 6036

**coothead** · 01-09-2017, 06:46 PM

Hi there theremotedr,

so...

is the design close to your requirements?
does it work as you expected?
is it meant to interact with this...

...in some way or other?

coothead

**theremotedr** · 01-09-2017, 07:17 PM

The outcome would be something like this.

Currently i see this on the phone.
CITIES " we will call this header tab "

Then once you click on CITIES i see the following,
ALASKA ARIZONA CALIFORNIA etc etc " we will call this sub categories "

So with my layout it would be then like this.
HOME, SITE HELP, CONTACT,ACCESSORIES etc etc as shown on pc, " this would be the header tabs which currently is CITIES"

Click image for larger version.

Name: 2115.jpg
Views: 418
Size: 36.3 KB
ID: 6039

Then once you make your selection say in this case ACCESSORIES as shown on pc, " this would be the sub categories which is currently ALASKA ARIZONA etc etc"

Click image for larger version.

Name: 2116.jpg
Views: 420
Size: 48.2 KB
ID: 6040

You then click on one of the sub categories say in this case AUDI
The next sub category would as shown below,

Click image for larger version.

Name: 2117.jpg
Views: 428
Size: 38.6 KB
ID: 6041

Clicking on one of these items would then load the relevant page like how it does at present.

With me on this ?

Basically as opposed to having the current selecting option on the phone in respect of horizontal buttons it would be just a fancy scrolling wheel.

Did i explain ok ?

**coothead** · 01-09-2017, 10:49 PM

Hi there theremotedr,

check out the attachment to see a fully working test page.

coothead

**theremotedr** · 01-09-2017, 11:02 PM

Hi,

The items under the ITEM SELECTION heading,can you just duplicate them into the code please.
I need to see what it looks like for when the list is longer.

I did just copy and paste it before asking but it just entered it as blue text & not like for like ?

i can then advise.

Cheers.

Thread: fruit machine reels picker list

Thread Tools

Search Thread