UIWebView performance with JS onclick function - javascript

I have a rather large page showing in a UIWebView (around 150 <article>s with some text, separated in <section>s). I want to do something like this with JS (I use jQuery):
$('article').click(function() {alert('hi');});
The problem is, it takes forever to run that code (around 2 seconds from the tap, on an iPad 3).
How can I improve performance on this?
I'm using the latest version of XCode and iOS 5.1.

I used this answer's class SingleTapDetector, and the following code:
new SingleTapDetector(window, function(e) {
alert($(e.srcElement).text()); //show the text of the element that was tapped
});
Then it's easy to see if the element was an article, or even stuff like $(e.srcElement).closest('article') (because my articles have <p> paragraphs).

I suggest you to try to put a click event on the window object, and then verify if this is the <article> tag. Here's the example:
$(window).click(function(e){
var e = e || event;
if(e.srcElement.tagName==ARTICLE)
alert('hi');
});

Related

How to make a button work when touched using p5 code

I am making a game. In this a button goes to the next screen say from home screen to battle screen when clicked using a mouse.It works on computer/desktop but not on touchscreen device like mobile or tab.How do I make it work on touch screen devices ??? (It would be helpful if the answer is in p5 code, javascript or html). I can't afford to create button using HTML.
Currents I am using:
If(mousePressedOver(button)) {
gamesSate = "BATTLE";
battleScreen();
}
In above code battleScreen(); I am calling a function in function draw() named battleScreen.
I am a web developer. And click event works in all touch screen devices. And it works on every id, name, tag etc of html. you can try. Hope it will work
In javascript you can use addEventListener
document.getElementById("youId").addEventListener("click", function () {
//your action
// you can also use document.getElementsByClassName, document.getElementsByName, document.getElementsByTagName etc in the place of getElementById
})

keyboard appear when ready in mobile browser with using only javascript or jquery?

Is there any way to show keyboard with selected edit text. I used focus() which is perfectly work for in browser. I am able to edit text when browser is ready.
Below is my code
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
$("#main_container").click(function() {
lastSelect.focus();
});
});
but when I load this site in mobile device then it is not appears mobile keyboard unless touch.
please find out the solution.
Thanks in advance
I tried to create a working snippet with your code. I changed a little the syntax to use .on() and .trigger() methods.
Maybe you can use the .trigger() method with touchstart to achieve what you want:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
$("#main_container").on('click', function() {
lastSelect.focus();
$(lastSelect).trigger('touchstart');
});
$("#main_container").trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
</div>
Hope it helps.
Try using:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
lastSelect.select();
$("#main_container").click(function() {
lastSelect.focus();
});
});
If you're using iOS/Safari as your mobile device, it doesn't allow setting focus unless it's in response to a user input event (i.e. touch).
I think this is a feature of mobile Safari rather than a bug. In our
work on FastClick, my colleagues and I found that iOS will only allow
focus to be triggered on other elements, from within a function, if
the first function in the call stack was triggered by a
non-programmatic event. In your case, the call to setTimeout starts a
new call stack, and the security mechanism kicks in to prevent you
from setting focus on the input.
See this post

I want to load a large HTML page with a lot of redundancy as fast as possible. What is the best way?

I want to load a very large HTML page containing nothing but the letter 'x' (let's say 10000 lines of each 100 characters), each of the characters linking to a similar url: the first one to www.example.com/1, the second to www.example.com/2, etc.
Of course I cannot just generate the entire page with php because it would build a very large file for the browser to download. But if I try it with javascript and a simple for-loop, it takes ages for the script to complete.
Any solutions for this problem?
Much better idea:
document.body.addEventListener("click", function (e) {
console.log("Clicked at coordinates ", e.pageX, e.pageY);
// Convert in your own fashion; here's one idea:
var index = (e.pageX % 100) + (100 * e.pageY);
window.location.href = "http://example.com/" + index;
});
Those are pretty much your only options. Only thing I think you can do is use a faster browser (test out the latest versions of the current browsers, recent years have seen lots of javascript optimization) and/or a faster computer.
The biggest issue though is why are you doing this? I can't think of any practical use for this, and most likely there's a better way to do what you're actually trying to accomplish
Even generating it server side, it'll likely take a long time to render. We've recently tried loading a page that hasn't needed paging previously because the dataset has always been small, but with a huge dataset even though the whole page was transferred, it still froze the entire browser for over 5 minutes before we had to kill the process. I suspect you'll run into similar issues if it's really that much stuff.
What you are trying to do is not very clever. 10,000 times 100 is 1,000,000 elements. The most efficient way is use P elements with a minimal id, then use a click listener on the body element to determine which element was clicked on and genrate the URL. So your html looks something like:
<html><title>Silly Page</title>
<style type="text/css">p {display:inline;margin:0;padding:0}</style>
<script type="text/javascript">
function doNav(e) {
var id = (e.target || e.srcElement).id;
window.location.href = 'http://www.example.com/' + id.replace('p','');
}
</script>
<body onclick="doNav(event)"><p id=p1>x<p id=p2>x<p id=p3>x<p id=p4>x...
</body>
If you are trying to associate a link with a location on a page, use an image map, it will be vastly more efficient.
You have two options:
To make a virtual view. In this case you
will load only visible elements and
do scrolling/panning manually
(similar to maps)
To output/populate just text
"xxxxx...." and handle clicks by
coordinates and synthesizing
hyperlink clicks by code. In this
case you will have only one DOM
element - container of x'es
The following chokes for about 20s in FF on my machine, about 6s in Chrome. A good portion of that is spent parsing the injected DOM, and I suspect this would remain the case for a downloaded DOM of the same structure. No matter how you approach this, it's going to foul up the user's browser for a while.
<script type="text/javascript">
//<![CDATA[
$(function() {
var strings=[];
for(var a=0;a<10000;a++)
{
for(var b=0;b<100;b++)
{
var c=a*100+b;
strings.push(
'x');
}
strings.push("<br/>");
}
var megaString=strings.join("");
$("body").html(megaString);
});
//]]>
</script>

Manually trigger 'open file dialog' using plupload

I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.
I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.
Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:
How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).
The former solutions not worked on iPhones with plupload 2.1.2.
The following code did the trick (jquery needed):
$("#id_of_the_second_button").click(function() {
$('div.moxie-shim input[type=file]').trigger('click');
});
Fallback runtimes will become irrelevant as times goes by. This means that sooner or later, we'll be all using HTML5 runtime. In case that you are using HTML5 runtime, but don't use pluploadQueue(), this will work as well:
// Set up and initialise uploader
var uploader = new plupload.Uploader({
'runtimes' : 'html5',
'browse_button' : 'id_of_the_first_button'
// Other options
});
uploader.init();
// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
var input = document.getElementById(uploader.id + '_html5');
if (input && !input.disabled) {
input.click();
} // if
e.preventDefault();
});
If someone is searching for the HTML5 solution, here it is:
var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
var input = document.getElementById(up.id + '_html5');
if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
input.click();
}
e.preventDefault();
});
}
Ok. It doesn't seem possible to do this, so unless someone implements event handles for the silverlight and flash components i'm out of luck
I read your problem.
I found some articles that may help to figure this out. check them. It may help...!
01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript
#Per Hornshøj-Schierbeck
After uploader has been init. It take few time to render input file to select. So you need to wait like below:
this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
var inputArray = $('div.moxie-shim input[type=file]');
var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] :
inputArray[0];
$(input).trigger('click');
});
task.delay(100);
The code in javascript is similar. Worked for me with plupload 2.3.6
Hop this help!

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.

Categories