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
Contributor
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers
Accepted Solution

JQuery ScrollTo() does not work

The ScrollTo() JQuery Plugin will not work on the BlackBerry PlayBook. Refer to http://flesler.blogspot.com/2008/02/jqueryserialscroll.html for information on the plugin.

 

It works great in Chrome/FF and IE, but the PlayBook simply ignores it. Its coming to a point where I one would rather create a web app accessible from PlayBook/iPad/Xoom rather than trying to perfrom workarounds when widely used JQuery plugins are not supported.

 

Simulator : 0.9.4

WebWorks SDK: 1.0.0.13

JQuery version: 1.5 (also tried 1.3.2)

 

Following is the code:

 

<style>

#contentLeft ul{

 

overflow:auto;

white-space: nowrap;

}

 

#contentLeft li {

 list-style: none;

 display:inline-block;

 padding: 20px;

 background-color:#eee;

}

 

 

</style>

 

 

<div id="contentLeft">
  <ul>
 <li>element 1</li>
 <li>element 2</li>
 <li class="playing">element 3</li>
  </ul>
</div>
<script>

 

 $('div#contentLeft ul').scrollTo( 'li.playing', 800);

</script>

 

Any help would be appreciated.

Developer
Posts: 123
Registered: ‎03-22-2011
My Device: curve 8900
My Carrier: Rogers

Re: JQuery ScrollTo() does not work

scrollTo works fine for me...

 

have you tried creating a link and making it scroll on a click event to see if that works?

 

Also from your example, I don't see why anything would scroll since technically the entire list would fit in the viewport, unless you're just giving us a basic example. Your script should look like this

 

 

$(document).ready(function() {
   $('div#contentLeft ul').scrollTo( 'li.playing', 800);
});

 

 

--
Bitbox
Contributor
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers

Re: JQuery ScrollTo() does not work

I have been fighting with this for hours, still no luck, I updated my simulator to .23, and nothing.

The example I have given  is a basic example. Heres the actual code:

 

<script>
$(document).ready(function() {
 $('#nowPlayingTitle').bind('click', function() {
      $('div#contentLeft').scrollTo( 'li.playing', 800);
 });
});
</script>
<style>
#contentLeft {
height:150px;
width:1024px;
overflow:auto;
position:relative;
}
#contentLeft ul{
height:150px;
white-space: nowrap;
}
#contentLeft li {
 position:relative;
 list-style: none;
 display:inline-block;
 width:120px;
 height:150px;
 padding: 20px;
 background-color:#eee;
}
</style>
<div id="contentLeft">
 <ul>
 <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
I am able to scroll the div by dragging, but the scrollTo function is completely ignored. FYI I am doing a horizontal scroll. Could you post a working example please? Thanks.

 

 

Developer
Posts: 123
Registered: ‎03-22-2011
My Device: curve 8900
My Carrier: Rogers

Re: JQuery ScrollTo() does not work

This works perfectly fine for me (just made the li wider to test)

 

you can see my test here

 

http://jsfiddle.net/NTGsH/

 

Make sure you're using jquery 1.5 and not 1.5.1, the simulator doesn't like the latest version

--
Bitbox
Contributor
Posts: 30
Registered: ‎02-04-2011
My Device: BB9900 & PlayBook16GB
My Carrier: Rogers

Re: JQuery ScrollTo() does not work

Nevermind.. My mistake, the Javascript files I was referencing were pointing at a local folder, which worked in the browser, but not on the PlayBook... wow I feel foolish.. Thanks!

Highlighted
Developer
Posts: 123
Registered: ‎03-22-2011
My Device: curve 8900
My Carrier: Rogers

Re: JQuery ScrollTo() does not work

haha I hate it when that happens!

--
Bitbox