Scroll to UI Element in jquery Mobile Framework

  • February 8, 2017
  • Posted by: Vikas
  • Category: Uncategorized
No Comments

I am using jquery mobile framework for last couple of weeks.

Recently it was required to scroll a page to my listview item.

Jquery mobile has a method called $.mobile.silentScroll().

It requires a numeric argument for y position.

Example:

[code:js] //scroll to Y 100px $.mobile.silentScroll(100); [/code]

Now, I need y position of the element.

Jquery has .offset() method. It gets current coordinates of the first matched element.

So my final call would be:

[code:js] $.mobile.silentScroll($("#idofelement").offset().top); [/code]

My next challenge was to find li element with search text.

Again thanks to jquery, it has :contains() selector to search a string or text in HTML elements.

Examples:

[code:js] $("div:contains(‘Vikas’)"); //Search a text in all div $("li:contains(‘Vikas’)"); //Search a text in all list items [/code]

Remember that contains() is a selector, it can return more than one elements. So you should check the number of elements by .size() method.

Instead of specifying element you can also use wildcard charaters.

Example:

[code:js] $(‘*:contains("Vikas")’); [/code]

The selector above selects any element that contains the target string.