Skip to main content

Posts

Showing posts with the label html5

Is it possible to upload file via $.ajax(options) or xhr.send(file) only?

By User
I'm using file api and xhr2 spec. I created an uploader (backed by flash for older browsers) that was using FormData and $.ajax(options) where the FormData object with File was part of options.data object. Everything was working. Now I decided to remove FormData because of weak browser support. And I can't figure a way to upload the file other than var xhr = new XMLHttpRequest(); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.name); xhr.send(file); Which doesn't return Promise that I can use in the recursion function. My code is like this : startUpload: function() { var that = this; that.recurseSend(that.queue); }, _initProgressListener: function (options, file) { var that = this; var xhr = $.ajaxSettings.xhr(); options.contentType = 'multipart/form-da...
3 comments
Read more

HTML5 script element - async attribute - when (and how best) to use?

By User
Can you confirm my understanding of HTML5's <script async> attribute? Any libraries referenced by other code in the page should not specify the async attribute. For example, my script references might appropriately look like: <script src="jquery..." /> <!-- async not used - ensure that this is loaded before JQuery UI and my code --> <script src="jquery.ui..." /> <!-- async not used - ensure that this is loaded before my code --> <script src="my_code1.js" async /> <!-- async used, for page load performance --> <script src="my_code2.js" async /> <!-- async used, for page load performance --> For any code in a $(document).ready(function () { } block, I can be assured that all async script have already loaded. Do I have this right? Source: Tips4all
Post a Comment
Read more

Best way to play sound with HTML5 and Javascript

By User
I'm trying to play a sound and i have found two ways that works for me. Which is the better way and why? is a good idea add a "load" event listener? First way: $(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'sound.ogg'); audioElement.addEventListener("load", function(){ audioElement.play(); }, true); audioElement.play(); }); Second way: $(document).ready(function() { audioElement = new Audio('sound.ogg'); audioElement.play(); }); Source: Tips4all
1 comment
Read more

When Profiling Javascript in Chrome how do I know I"ve handled Memory Leaks?

By User
I've been working on a game in for HTML 5 using the canvas tag, and I've build up quite a code base to cover my requirements. I also want to make sure I'm covering up all my memory leaks. I have doubts I'm doing it correctly because the feedback I'm getting from Chrome's task manager and profiling tools seem to suggest my cleanup is having no effect in the end. Here's an image so you can see what I mean: So as you can see, once I do my cleanup memory usage just freezes and doesn't drop. Is this a memory leak? When I ran my webpage in the Profiler and checked the heap before and after cleanup it does appear to remove all the references to my objects (and they disappear) but my usage only drops by only a few kilobytes leaving about 1.3mb of arrays, strings, and other objects behind. Is it impossible to catch all this or is there something majorly wrong? Thanks. Source: Tips4all
2 comments
Read more

Html5 Canvas vs SVG vs div

By User
What is the best way for element creation on the fly and being able to move it around? Let's say I want to create rectangle, circle and polygon then I want to select the objects and move it around And how is the performance of those three while in use for showing a web page? Let's say I want to create three visually identical web page and have header, footer, widget and text content in them. The first one is created using full canvas, the second is created using svg, and the third is created using plain div html and css. Thanks in advance Source: Tips4all
1 comment
Read more

HTML5 inline video on iPhone vs iPad/Browser

By User
I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser. However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff. That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated. Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad? Cheers
2 comments
Read more

Iphone runs ONLY from cache even when online

By User
I am having a bit of trouble. I am making a mobile version of our website, and want to cache some of the more important pages, not just for use offline, but for added speed in some cases. First question: Do I have to manually cache the pages to speed up performance? I am using AJAX calls to bring in content, and it obviously doesn't work offline without manually caching, but while online is Safari going to request a page via ajax if it's already in the cache? I currently have it working correctly. My pages cache and work both online and offline. But if I don't specify all pages I want cached, it appears with every ajax call, those pages are requested again, not loaded from cache. Second Question (My actual problem): When online or offline, and using a .manifest file to manually cache files, it appears that the iPhone sets itself in a "offline" mode, even when online. So when I run my ajax call, if the page is not cached, I get an error. $.ajax({ url: p...
Post a Comment
Read more

JQuery code not working

By User
I am trying to find a cell in a table that has a class of 'empty', i am then using a bit of code to find the id(cell number) so i can the find out what cells are next too it. just too see if it works, i am trying: console.log($('.empty').attr('id')); but Firebug just returns 'undefined' each cell has the class of 'box' and only one has empty as well so 'box empty'. Any asssitance would be much appreciated.
2 comments
Read more

Input type=range does not update its value

By User
I have the following: <input id="slider-min" type="range" min="0" max="55" value="0" step="5" onchange="sliderMinUpdate(this.value)">, <div id="min_input">0</div> <input id="slider-day" type="range" min="0" max="10" value="0" step="0.5" onchange="sliderDayUpdate(this.value)"> function sliderDayUpdate(value){ $('#slider-min').val(0); } function sliderMinUpdate(value){ $('#min_input').text(value); } When I focus in slider-min using keyboard and select keypad right or left it updates values in min_input correctly. When I change slider-day it fires onChange and updates the value from slider-min to 0 and I can see it working in my page (the slider returns to 0). The problem occurs when I select the first increment of slider-min , in this case 5. When the onChange from slider-day is cal...
Post a Comment
Read more

The best way to write Javascript / jQuery

By User
I'm not new to web dev but I was just wondering if you guys have some advice for me to improve: Always when I write js or jQuery I write all the code like this in the <head> on my page: <script> $(document).ready(function() { //All my functions and animations goes here… }); </script> Now, when I look around the web I see that most people have their functions and animations in a separate ".js"-file. And they often create classes aswell. How does that work? What is the advantage of creating classes and have your functions in a separate file? Thanks, VG
5 comments
Read more

HTML5 JavaScript canvas animation class method called within function

By User
I am having trouble drawing an animation on a HTML 5 canvas inside a loop. I have created a javascript animation function/class that stores frames and duration information and provides a get function to getFrame()[returns image] sub-function to retrieve the relevant frame. This works perfectly fine so i haven't included the full script. If anyone wants or needs it i will send to you. When i call the following code it displays the animation as intended. canvas.drawImage(tile1a.getFrame(),50,60); canvas.drawImage(tile1a.getFrame(),50,90); canvas.drawImage(tile1a.getFrame(),50,120); //etc This isn't very efficient as i want to draw a lot of tiles is column so it would be better to use a for loop. Therefore i tried the following code but the page just keeps crashing. for (i=1;i<=10;i++) { canvas.drawImage(tile1a.getFrame(),FIELD_WIDTH,i*30); } However, i then tried the following which worked: var temp = tile1a.getFrame(); for (i=1;i<=10;i++) { ...
1 comment
Read more

Where and how the iBooks page flipping effects is programmed?

By User
As far as I can read, ibooks format is similar to epub format http://iphoneincubator.com/blog/apple-events/thoughts-on-ibooks-author , a bunch of html/js files. But where/how the page flipping is programmed ? I have downloaded iBooks Author on my mac http://itunes.apple.com/fr/app/ibooks-author/id490152466?mt=12 , when testing on iPad iBooks 2, I can't get this flipping page effect whereas when I download iBooks from official library it has that page flipping effect. So could I modify the html/js generated by iBooks Author by hand to get that effect ? If yes how because I can't find any documentation searching the Internet.
2 comments
Read more

Need help controlling audio object volume in iE8

By User
I'm very much a noob at this but I've got my .wav files playing sound effects and even overlapping when I need them to in Safari, Chrome, IE and FireFox but the only problem I still have is I can't set the volume in IE8. It just plays at the same loud level of the original file. Here is the code I have (with things I've tried commented out). this.load = function( audiofile ) { var i; for ( i=0; i<overlapMax; i++ ) { var object = null; if ( ie8 ) { object = document.createElement('div'); var iesound = ''; // adding volume here didn't do anything // iesound = iesound + '<object id="'+soundID+'track'+i+'" type="audio/x-wav" volume=2 data="'+audiofile+'" width="200" height="16">'; iesound = iesound + '<object id="'+soundID+'track'+i+'...
1 comment
Read more

Is Titanium 1.8 finally free from the memory starvation issue from release 1.6 and 1.7

By User
Hi there Im new to mobile application development. I had developed Android apps using Java and is just starting to get the hang of Cocoa Touch and Objective C. Now I am curious on mobile web application development to create cross platform/device applications which would at least run on Android and iOS(Apple devices: iphone, ipad). I tried Titanium and developing applications with this framework seems very promising. Although it is very powerful, popular, mature, documented and very easy to learn I had doubts investing time and to commit on using this framework for my projects after reading this blog which many Titanium users seems to agree with Why you should stay away from appcelerators titanium . It seems that release v1.6 sdk and v1.7 sdk have the issue which they describe, the negative comments stopped right after the v1.8 sdk release was out. My question is, is Titanium v1.8 sdk free from the memory starvation issue and other issues which were discussed on the blog post? ...
1 comment
Read more