Slider Bar‏

[Tobster619]

I have an app that utilities the HTML5 slider function. The slider works in BBUI, but the Javascript doesn't appear to. The Javascript works outside of BBUI, but when in Ripple it doesn't. Is there something I need to change in the index.html, like I had to remove //Fires "before" styling is applied and "before" the screen is inserted into the DOM. To get the Title Bars to work. Also, on my Tab overflow menu the text is really small, and I don't know why. Any help would be greatly appreciated. (I have attached my app in .Zip format)

https://www.dropbox.com/s/nztxk6yuk2gbe22/Tipper%21.zip

[splatterb0y]

You sir, should start to learn HTML before developing applications with HTML5.

You don't need to include the bbUI.js files twice. If you want to debug bbUI.js include bbui.js and bbui.css an if you just want to use it try bbUI-min.js and bbUI-min.css.

Oh and all the stuff you build around the bb.init function is not needed, just listen for the webworksready event.

[Tobster619]

Sorry, I didn't realize that I had put both lots of bbui in there, I'll take that out now

[tneil]

So is this issue resolved?

[Tobster619]

No, the problems are  still occurring  From: Tim NeilSent: Thursday, 23 May 2013 17:36To: blackberry/bbUI.jsReply To: blackberry/bbUI.jsCc: Toby ClenchSubject: Re: [bbUI.js] Slider Bar‏ (#871)So is this issue resolved?

—Reply to this email directly or view it on GitHub.

[tneil]

Can you break out and explain the issue you are having with the sliders. I unfortunately don't have the time to dig into your application itself. As far as tab overflow fonts being displayed incorrectly.. my guess is that you have some CSS that is applying to all elements that is overriding the styling in the tab overflow.

There have been 4 or 5 other cases of this reported, and in each case it was a global CSS declaration that was overriding the bbUI styling

[Tobster619]

When I just open the .html document for menu.html (The file in which the slider is located) the slider works fine, as the slider is javascript. But when I open index.html and test it on Ripple, I can move the slider along, but my percentage doesn't change. As for the CSS, I have no additional CSS other than BBUI.CSS.

Here's my javascript code to operate the slider:

[Code]

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

h2>Tip Calculator Enter the bill amount for your meal: £ input type="text" id="bill">
Tip Percentage: input type="range" min="0" max="100" value="0" step="1" onchange="tipCalculate(this.value,'bill')" style="width:400px;"> span id="slidevalue">0% h2>Tip to leave =

script

function tipCalculate(slider,bill){ var tip = document.getElementById('tip'); var slidevalue = document.getElementById('slidevalue'); var bill = document.getElementById('bill').value; var percent = slider * .01; tip.innerHTML = "£"+(bill * percent).toFixed(2); slidevalue.innerHTML = slider+"%"; } End script[/Code] Here are screen shots of menu.html and index.html (Opened in Ripple)

[tneil]

Does it work on the actual device?? there are some controls that do not work properly in Ripple because of the way Ripple mimics touch events.

[Tobster619]

I will test it on my Z10 now, and I'll reply back when I have tested it. Also, how is it that you can get the blue underlining on text as I haven't been able to work it out (The blue underlining in the pictures - https://github.com/blackberry/bbUI.js/wiki/Screen-Menus) Thanks

[tneil]

The blue underlining is using the control group control. If you specify a header you will get that effect.

[Tobster619]

Thanks, I now have that effect, although it would be good if there was an ability to change the text colour. But I still cannot get my slider to function. Therefore, is there a webworks sample for the current blackberry calculator, on the Z10, that features the tip tab? Thanks

[tneil]

I don't think I understand your question on a "webworks sample for the Z10 tip tab". Can you be more specific on what you're looking for?

[Tobster619]

The calculator app on the Z10 has a tab which changes from the calculator into a tip calculator. And as my tip calculator doesn't seem to work with BBUI, I was wondering if there is a Webworks version of the application available to look at?  From: Tim NeilSent: Saturday, 25 May 2013 19:44To: blackberry/bbUI.jsReply To: blackberry/bbUI.jsCc: Toby ClenchSubject: Re: [bbUI.js] Slider Bar‏ (#871)I don't think I understand your question on a "webworks sample for the Z10 tip tab". Can you be more specific on what you're looking for?

—Reply to this email directly or view it on GitHub.

[tneil]

No, there isn't a webworks version of the application as a sample

[Tobster619]

I have changed my code, for the slider by removing a majority of the code and minimized the javascript. Unfortuntely, even the simplest code will not work with the BBUI slider. The slider still moves, but the number underneath the slider does not function when in Ripple, or when tested on a Z10.

Here is the code:

form onsubmit="return false" oninput="level.value = flevel.valueAsNumber"> label for="tip">Tip Amount</label input name="flevel" id="tip" type="range" min="0" max="100" value="0" output for="tip" name="level">0/100 </form

[tneil]

I just tested the slider in Ripple and it works fine for me. If you try the sample you will see that it works. I believe the issue you are having is that you are using Chrome's Zoom/Scaling that is throwing everything off

[Tobster619]

Okay, where is the sample?

[tneil]

All the samples can be found here: https://github.com/blackberry/bbUI.js/tree/master/samples

Open up the sample in Ripple and go to the Slider sample

[Tobster619]

Okay, I can see that the slider works fine, as it does in my app, but the javascipt doesn't work for my app on a Z10, or in Ripple

[tneil]

Have you checked the code attached to the slider moving in the sample? It is changing the opacity of the image above it based on the value of the slider. It works in both Ripple and on the Z10

[Tobster619]

Yeah, I looked at that. But what I'm trying to do is to get the numbers underneath my slider to change based on how far the slider goes. So, if the slider was to be moved half way, it would say 50% or 50/100, this works fine outside of Ripple. But when I'm testing it in Ripple and on my Z10, the Javascript doesn't function and the numbers do not change. Therefore, do you have any idea what could be causing the Javascript to not function? Thanks 

[tneil]

I honestly don't know why it isn't working for you... The slider in the example is doing exactly what you have described.

onchange="document.getElementById('lightning').style.opacity = 1 - (parseInt(this.value)/100);"

[Tobster619]

Okay, currently it is

input type="range" min="0" max="100" value="0" step="1" onchange="tipCalculate(this.value,'bill')" style="width:400px;"

And yours is:

onchange="document.getElementById('lightning').style.opacity = 1 - (parseInt(this.value)/100);"

But when I replace mine with yours and change 'lighting' to 'bill' it just changes the opacity of the number in the text box above it

[tneil]

Your result is expected. My code changes the opacity, it doesn't set the value of a control. If you are trying to set the value of an input box based on the slider it would be.

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

[Tobster619]

I think we're really close to resolving this. With onchange="document.getElementById('bill').value = this.value" the slider will change the number in the text box above, what I'm trying to do is get the slider to change the number underneath the box.

[tneil]

Right, if it is a different control/div that you are looking to update then you need to get that element and set its value.