Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can remove the <code>-down</code> and <code>-hover</code> CSS styles from the style-sheet for jQuery Mobile. When you scroll a list you are "hovering" your finger over a list-item which triggers it to change it's styling due to the <code>-hover</code> class that is applied. If you change the <code>-hover</code> class to be the same as the <code>-up</code> class then no redraws will occur and scrolling will be much smoother. I have tested this and it worked great on my Android 2.3 device.</p> <p>Here is an example of what I mean, notice the <code>-up</code>/<code>-down</code>/<code>-hover</code> versions of the class rules:</p> <pre><code>.ui-btn-up-a { border: 1px solid #222 /*{a-bup-border}*/; background: #333333 /*{a-bup-background-color}*/; font-weight: bold; color: #fff /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); } .ui-btn-hover-a { border: 1px solid #000 /*{a-bhover-border}*/; background: #444444 /*{a-bhover-background-color}*/; font-weight: bold; color: #fff /*{a-bhover-color}*/; text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */ background-image: -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); } .ui-btn-down-a { border: 1px solid #000 /*{a-bdown-border}*/; background: #3d3d3d /*{a-bdown-background-color}*/; font-weight: bold; color: #fff /*{a-bdown-color}*/; text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */ background-image: -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); } </code></pre> <p><strong>UPDATE</strong></p> <p>So to make the changes I've suggested it's as simple as downloading the jQuery Mobile framework, opening the non-minified version of the CSS style-sheet (also found here: <a href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css">http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css</a>), and deleting the <code>-down</code> and <code>-hover</code> classes.</p> <p>You can download jQuery Mobile here: <a href="http://jquerymobile.com/download/">http://jquerymobile.com/download/</a></p> <p>Basically, look for all of the <code>.ui-btn-***-*</code> class declarations and delete the code inside the ones where <code>***</code> equals <code>hover</code> or <code>down</code>, and there will be multiples because there is one for each theme, that's what the last <code>*</code> is for, <code>a-e</code>.</p> <p>The above CSS would look like this when you're done:</p> <pre><code>.ui-btn-up-a { border: 1px solid #222 /*{a-bup-border}*/; background: #333333 /*{a-bup-background-color}*/; font-weight: bold; color: #fff /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); } .ui-btn-hover-a {} .ui-btn-down-a {} </code></pre> <p>Notice I did nothing to the <code>.ui-btn-up-a</code> class, it is the default class and I don't want to change the look of the page, I just want to stop the browser from redrawing the document when scrolling a list.</p> <p>When you are all done editing the CSS style-sheet, copy the code and paste it into <a href="http://htmlcompressor.com/compressor.html">http://htmlcompressor.com/compressor.html</a>, choose the "CSS" option on the right, and click "Compress." That will create a minified version of your CSS style-sheet that is ready for the production environment (this will greatly reduce the size of the code).</p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery Mobile Listview is too slow with iScroll
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJasper
    1. USJasper
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery Mobile Listview is too slow with iScroll
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks Jasper but i can not understand clearly. Because i'm newbie :). Could you send whole.css file :( Or if you upload somewhere it will be beter. Thanks.
      singulars
      1. PO
      1. USErhan H.
    2. COI'm not going to just make the changes for you (then how would you ever get past being a newbie?), but I will expand on my explanation a bit more. Check-out the **update** I added to my answer.
      singulars
      1. PO
      1. USJasper
    3. COI 'll test it i am now in shuttle so i think it will work. Thanks Jasper
      singulars
      1. PO
      1. USErhan H.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload