Page 1 of 11 123 ... LastLast
Results 1 to 10 of 108

Thread: fruit machine reels picker list

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default fruit machine reels picker list

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

    "Original text deleted"
    Last edited by theremotedr; 01-10-2017 at 12:19 AM.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    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
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-06-2017)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default

    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:	41 
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:	37 
Size:	24.5 KB 
ID:	6035

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there theremotedr,

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

    Click image for larger version. 

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

    ...and this...

    Click image for larger version. 

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


    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
    ~ the original bald headed old fart ~

  6. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-06-2017)

  7. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default

    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 ?

  8. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default

    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:	35 
Size:	7.2 KB 
ID:	6036

  9. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there theremotedr,

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

      Click image for larger version. 

Name:	action.jpg 
Views:	35 
Size:	18.0 KB 
ID:	6038

      ...in some way or other?

    coothead
    ~ the original bald headed old fart ~

  10. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-06-2017)

  11. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default

    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:	32 
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:	34 
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:	36 
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 ?

  12. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there theremotedr,

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

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  13. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-06-2017)

  14. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    955
    Thanks
    121
    Thanked 3 Times in 3 Posts

    Default

    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.

Similar Threads

  1. How do I see SSI's on local machine?
    By wkenny in forum HTML
    Replies: 3
    Last Post: 08-29-2011, 04:10 PM
  2. Vending Machine Simulator
    By Luron31 in forum Java
    Replies: 9
    Last Post: 07-21-2011, 08:23 AM
  3. My new machine
    By BLiZZaRD in forum The lounge
    Replies: 4
    Last Post: 01-30-2008, 09:13 PM
  4. *throws fruit cake at coding*
    By euphoriastudio in forum The lounge
    Replies: 10
    Last Post: 01-10-2008, 10:03 PM
  5. Slot Machine Problem
    By IanMarlowe in forum JavaScript
    Replies: 3
    Last Post: 07-06-2005, 03:05 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •