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
    Liked
    2 times

    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
    AgentBlackBerry likes this.




  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
    Liked
    20 times
    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
    Liked
    2 times
    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
    Liked
    31 times
    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
    Liked
    2 times
    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, 12:21 PM
  2. Replies: 30
    Last Post: 04-20-2010, 11:13 PM
  3. slider theme
    By animalchick in forum Theme Developers
    Replies: 3
    Last Post: 02-14-2010, 11: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
  •