BBUI.JS Slider Help
Results 1 to 5 of 5

Thread: BBUI.JS Slider Help

  1. #1
    Tobster's Avatar
    Tobster is offline BlackBerryOS Friend Follow Tobster On Twitter Add Tobster on Facebook Add Tobster on Google+ Add Tobster on Linkedin Visit Tobster's Youtube Channel
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Device
    Z10
    OS
    10.2
    Carrier
    O2 UK
    Posts
    20

    Exclamation BBUI.JS Slider Help

    Hi, I'm currently developing a tip calculator using BBUI.JS. I'm having a slight problem with the slider in Ripple though. The problem I am having is that when you slide the slider across, it changes the number in the box above it - I would like it to change the percentage underneath it, as attached in the image below. Hopefully, someone can help me out here, as I'm not too sure on which element I should be defining, when I put
    Code:
    <input type="range" min="0" max="100" value="0" step="1" onchange="document.getElementById('bill').value = this.value">
    It defines the box above the slider and I'm not sure which Element is the percentage below. Also, if anyone knows how link it all together, so the price + tip + sharing between how many people, to equal into the total box at the bottom, that would be very helpful! Thanks in advance

    BBUI.JS Slider Help-percentage2.png

    Here is my code:
    <meta name="viewport" content="width=device-width" />

    <div data-bb-type="screen" data-bb-effect="fade">

    <div data-bb-type="title" data-bb-caption="Calculate Tip" ></div>

    <div data-bb-type="menu">
    <div data-bb-type="menu-item" data-bb-img="images/ic_help.png" data-bb-pin="left" onclick="bb.pushScreen('help.html', 'Help');">Help</div>

    <div data-bb-type="menu-item" data-bb-img="images/ic_settings.png" onclick="bb.pushScreen('settings.html', 'Settings');">Settings</div>

    <div data-bb-type="menu-item" data-bb-img="images/ic_info.png" data-bb-pin="right" onclick="bb.pushScreen('about.html', 'About');">About</div>
    </div>

    <div data-bb-type="round-panel">
    <div data-bb-type="panel-header">Tip Calculator</div>
    </div>

    <script>
    function tipCalculate(slider,bill){
    var tip = document.getElementById('tip');
    var slideval = document.getElementById('slideval');
    var bill = document.getElementById(bill).value;
    var prcnt = slider * .01;
    tip.innerHTML = "$"+(bill * prcnt).toFixed(2);
    slideval.innerHTML = slider+"%";
    }
    </script>

    Enter the bill amount for your meal: $
    <input type="text" id="bill"><br>

    Tip Percentage:
    <input type="range" min="0" max="100" value="0" step="1" onchange="document.getElementById('bill').value = this.value">
    <span id="slideval">0%</span>

    <h2>Tip to leave = <span id="tip"></span></h2>

    <h2> Sharing Between: </h2>
    <select>
    <option value="1" selected="true">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
    </select>

    <h1>Total<Input type="Text" id="bill" + "tip"></h1>


    <!--BOTTOM PAGE MENU BAR -->

    <div data-bb-type="action-bar">
    <div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-img="images/148.like.png" onclick="bb.pushScreen('attribution.html', 'Attribution');">Attribution</div>


    <div data-bb-type="action" data-bb-style="button" data-bb-img="images/185.Pocket1.png" onclick="bb.pushScreen('menu.html', 'Menu');">Tip</div>
    <div data-bb-type="action" data-bb-style="button" data-bb-img="images/ic_share.png" onclick="bb.pushScreen('recommend.html', 'Recommend');">Recommend</div>
    <div data-bb-type="action" data-bb-style="button" data-bb-img="images/ic_bbm.png" onclick="bb.pushScreen('feedback.html', 'Feedback');">Feedback</div>


    <div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/ic_cancel.png" >Close</div>
    <div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/150.Utensils.png" onclick="bb.pushScreen('nearbyrestaurants.html', 'Near-by Restaurants');">Near-by Restaurants</div>
    <div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/058.Notes.png" onclick="bb.pushScreen('shazam.html', 'Shazam');">Shazam</div>
    </div>
    </div>

    I have also attached my app, so that the code is easier to look at, thanks again

    https://www.dropbox.com/s/nokypfqaz675edr/Tipper.zip




  2. #2
    mikelcal's Avatar
    mikelcal is offline BlackBerryOS Inspired Follow mikelcal On Twitter Add mikelcal on Facebook Visit mikelcal's Youtube Channel
    Join Date
    Nov 2009
    Location
    California
    PIN
    24DA6893
    Device
    Z10 (STL-3)
    OS
    10.2.0.1803
    Carrier
    AT&T
    Posts
    232
    I think the issue is that right now you have the slider to change the bill value here

    onchange="document.getElementById('bill').value = this.value"

    you want to have it instead change the percent, so change the ID to

    onchange="document.getElementById('slideval').value = this.value"

    try that and let me know if that works for you...
    I'm doing more development in the cascades side of things, but im still learning...as we all are.

  3. #3
    Tobster's Avatar
    Tobster is offline BlackBerryOS Friend Follow Tobster On Twitter Add Tobster on Facebook Add Tobster on Google+ Add Tobster on Linkedin Visit Tobster's Youtube Channel
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Device
    Z10
    OS
    10.2
    Carrier
    O2 UK
    Posts
    20
    Hi, I tried this - doesn't seem to work in Ripple either. Thanks though - the problem I am having is that the only element that the slider works on, in Ripple, is: onchange="document.getElementById('bill').value = this.value"
    but this is the wrong element, and none of the other ones work

  4. #4
    nrnr31's Avatar
    nrnr31 is offline Forum Moderator Follow nrnr31 On Twitter
    Join Date
    Jan 2013
    Location
    Canada
    PIN
    PM me :)
    Device
    Z30
    OS
    OS 10.2.1
    Carrier
    Rogers
    Posts
    163
    Have you asked the BBdev twitter account? (@BlackBerryDev)
    Thanks for visiting and enjoy using your BlackBerry!
    Please my post if it has helped you. Much appreciated!


  5. #5
    Tobster's Avatar
    Tobster is offline BlackBerryOS Friend Follow Tobster On Twitter Add Tobster on Facebook Add Tobster on Google+ Add Tobster on Linkedin Visit Tobster's Youtube Channel
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Device
    Z10
    OS
    10.2
    Carrier
    O2 UK
    Posts
    20
    I did ask them, and they said to ask on the Blackberry Support Forums. I did manage to work it out in the end though - needed to change a few things round. It works now:

    Enter the bill amount for your meal: $
    <input type="text" id="bill"><br>
    Tip Percentage:
    <input id="slider" type="range" min="0" max="100" step="1" value="0" style="position: relative; left: 5%; width: 90%;" onchange="document.getElementById('percentbox').in nerHTML = this.value" />
    <br>
    <a id="percentbox">0</a>%

Similar Threads

  1. BBUI.js actionBar and actionMenu
    By Tobster in forum App Developers
    Replies: 6
    Last Post: 01-29-2013, 11:21 AM
  2. Replies: 30
    Last Post: 04-20-2010, 10:13 PM
  3. slider theme
    By animalchick in forum Theme Developers
    Replies: 3
    Last Post: 02-14-2010, 10:57 AM

Tags for this Thread

Posting Permissions

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