Categories
discuss

How to improve website performance on iPad/iPhone?

On an average computer animations work very smoothly. On iPad however jQuery animations like fade in (opacity from 0 to 1 over 0.5 sec) of 1920x1200px image seem to lag a bit.

Is there any way to speed that up? Any acceleration? Maybe I should disable processor consuming jQuery scripts for iPad? Are there any recommendations when coding for iPhone/iPad too?

I would also say that on older iPhones it lags far more.

UPDATE: The answer is CSS3.

Answer

Running Chrome -> Developer tools -> Audits shows many improvements you can make without changing anything about the site’s looks. After you finish those, try it again, then look at things like fewer tiles on iOS/Android, etc…

Looks like a factor of at least 4 there, likely more…

–Tom

Categories
discuss

Google Docs Blinking Cursor “kix-cursor-caret”

I love google docs but I find a blinking cursor very distracting. The new version of google docs doesn’t obey the operating system setting for displaying a solid (non-blinking) cursor.

I see that the cursor is really just a div of class “kix-cursor-caret” where the display property is just from “none” to “inline” on some sort of javascript timer somewhere that causes the cursor to appear to blink.

Does anybody have any idea which javascript line/command is causing the css property to be changed and displaying the blinking. Any help is greatly appreciated.

Answer

Currently, this works for me with Stylebot in Chrome:

.kix-cursor {
  -webkit-animation-iteration-count: 0;
}
Categories
discuss

How to make checkbox checked in the OnItemClickListener()?

I have a checkbox in my ListView row which looks like this.

===========================================
[CheckBox] [TextView] [TextView] [TextView]
===========================================

the xml code is here

<CheckBox
    android:id="@+id/course_search_checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:clickable="false"
    android:focusable="false" />

And I have already made the checkbox not clickable and focusable so that the click event will be passed to the ListView.

What I want to do here is that when the user click the listview, make the CheckBox checked and add the clicked position of listview to an arraylist. So how can I make the CheckBox checked in an OnItemClickListener of ListView?

Help please, thanks.

Answer

You could add this code within your OnItemClickListener:

public void onItemClick(AdapterView parent, View view, int position, long id){
   CheckBox box = (CheckBox)view.findViewById(R.id.course_search_checkbox);
   box.setChecked(true);
}
Categories
discuss

Is there a way to have a masked numeric input field?

I am creating an HTML5 application on an Android and for this specific scenario, we have an input field that is for a credit card’s security code and we want to force the input field to be numberic only and masked.

I have had no luck searching for this specific case and from everything I can tell from researching/trying it out for myself is that this can’t be done purely through HTML5 (since number and password are both options for type and only one type can be used). Am I missing something and there is a way to pop-up the numeric keyboard while having the input be masked through HTML5 or is there another way to force the keyboard input type or masking the input through CSS or JavaScript?

Thanks for any help!

Answer

If it’s only required to work in WebKit based browsers, and CSS is allowed in ‘purely through HTML5’, you could try:

input[type=number] {
    -webkit-text-security: disc;
}

I’m not sure if there’s currently any equivalent for other browsers, in the future this may be controllable through the appearance CSS property. The CSS3 version of appearance has been dropped from the spec, so it looks like you’ll have to wait for the standardization of text-security for a cross browser solution.

Categories
discuss

JavaScript: Is this timer reliable?

Today I was introduced to the world of Web Workers in JavaScript. This made me rethink about timers. I used to program timers the ugly way, like this.

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    $("#timeI").html(time);
}

I know this could be improved by saving the date when you start the timer, but I’ve never been a fan of that.

Now I came up with a method using Web Workers, I did a little benchmark and found it much more reliable. Since I am not an expert on JavaScript I would like to know if this function works correct or what problems it might have thanks in advance.

My JavaScript code (please note I use JQuery):

$(function() {
    //-- Timer using web worker. 
    var worker = new Worker('scripts/task.js'); //External script
    worker.onmessage = function(event) {    //Method called by external script
        $("#timeR").html(event.data)
    };
};

The external script (‘scripts/task.js’):

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    postMessage(time);
}
timerTick();

You can also view a live demo on my website.

Answer

If you’re trying to reliably display seconds ticking by, then the ONLY reliable way to do that is to get the current time at the start and use the timer ONLY for updating the screen. On each tick, you get the current time, compute the actual elapsed seconds and display that. Neither setTimeout() nor setInterval() are guaranteed or can be used for accurately counting time.

You can do it like this:

var start = +(new Date);
setInterval(function() {
    var now = +(new Date);
    document.getElementById("time").innerHTML = Math.round((now - start)/1000);
}, 1000);

If the browser gets busy and timers are erratically spaced, you may get a slightly irregular update on screen, but the elapsed time will remain accurate when the screen is updated. Your method is susceptible to accumulating error in the elapsed time.

You can see this work here: http://jsfiddle.net/jfriend00/Gfwze/

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..