Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

disable page scroll

I have a strange issue, Please bear with me.

Im using the following code to calculate the screen height and width

function adjustToResolution()
{
var height = screen.height;
var width = screen.width;
document.getElementById("decoyDiv").style.width = width+'px';
document.getElementById("decoyDiv").style.height = height+'px';
var iconContainerH = document.getElementById("progress_div").style.height;
iconContainerH = iconContainerH.split("px");
var iconContainerW = document.getElementById("progress_div").style.width;
iconContainerW = iconContainerW.split("px");
document.getElementById("progress_div").style.left=(width-parseInt(iconContainerW))/2+'px';
document.getElementById("progress_div").style.top=(height-parseInt(iconContainerH))/2+'px';
var innerDivw = document.getElementById("progress_div").style.height;
innerDivw = innerDivw.split("px");
var iconHeight = document.getElementById("waitIcon").height;
document.getElementById("waitIcon").style.marginTop=(parseInt(innerDivw)-parseInt(iconHeight))/2+"px";
document.getElementById("decoyDiv").style.display='';
document.getElementById("progress_div").style.display='';
}
 
This property is applied to the activity indicator div where decoyDiv is the overlay background and progress_div is the loading message.

<!-- This div use only for loading -->
<div style='padding-top:0px; margin:0px; position:absolute; left:0px; top:0px; width:185px; height:70px; z-index:20001; display: none; border: 1px solid #000; border-radius: 10px; background-color: #202328; font-family: Arial, Helvetica, sans-serif; font-size: 25px; color:#FFF;' id='progress_div' align="center">
<img height="24" width="24" src="images/loader1.gif" id="waitIcon" x-blackberry-focusable="false" x-blackberry-onUp='doNothing()' x-blackberry-onDown='doNothing()' x-blackberry-onLeft='doNothing()' x-blackberry-onRight='doNothing()'><span style=" margin-top:15px; float:right; clear:both; margin-right:10px;">&nbsp;&nbsp;Loading...</span>
</div>
<div id="decoyDiv" style="padding:0px;margin:0px;left:0px;top:0px;position:absolute;display:none;"></div>
<!-- loaded end -->

While the activity indicator div shows up fine, it scrolls vertically if the page that triggered the indicator is tall. While the message is being displayed, if you scroll the trackpad, it will actually scroll the page and the decoy message will go out of focus or move around. This pretty much destroys the purpose of an overlay div.

I've tried everything on this and nothing seems to work, I can simply scroll the msg out of focus.

Thanks
Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: disable page scroll

Which platform are you building this content for?

 

If its BlackBerry 7, BlackBerry 10 or Tablet OS, I'd suggest using fixed-position CSS to keep your progress indicator in a fixed position even if you 

 

http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/browser/position.html

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Re: disable page scroll

Unfortunately its OS5+
Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Re: disable page scroll

I just noticed the bookmyshow app on appworld. They seem to be displaying a similar 'please wait' message. While the message is being displayed, the page is active in the background but you cannot scroll the page using the trackpad or touch screen.

This is exactly what I'm looking for. Display the div and disable all scroll & touch events till the processing finishes.

Any way to do this?
Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: disable page scroll

Trap mouse and touch events

 

Set yourself a global var to tell yourself if you want mouse / touch to work and switch it off after you've loaded

 

I've got some code that does exactly this - I mess with touch events in one of mine

 

You can get the basics from the paint example

 

I wrote a much fuller event trap about six months ago that could do exactly what you want

 

I'll try to hunt it down

 

As you're BB5 inclusive you're gonna need the non-JQuery version (JQ is broken on older devices unless you use 1.4 or something like that - can't quite remember the exact release that works)




Click the like button if you find my posts useful!
Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: disable page scroll

Rats - he's dead, Jim

 

i.e. Not got it any more

 

Here's some straight JS

 

var ignoremouse = true;

 

function loaded_it all()

  {

  ignoremouse = false;

  }

 

window.onmousemove(e)
    {
    if(!ignoremouse)

        {

        e.preventDefault();

        }

    }

Repeat this for ontouch if you're targeting touch devices as well

 

This is a very basic, untested, handler that is the basis of what you're after

 

You'll prob need to experiment and modify this a lot but it's a good start for what you need

 

See that like button - click it for me - I'm falling out of the top likes :smileyhappy:




Click the like button if you find my posts useful!
Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900
My Carrier: Vodafone

Re: disable page scroll

Thanks Peardox. I can trigger this function once the div shows and release it once loading is done. How would I handle both touch and trackpad though. A sample stable function would be much appreciated!

Thanks
Please use plain text.