window.scrollBy Méthode : window.scrollBy()Déroule les ascenseursCompatible : Syntaxevoid window.scrollBy(Integer x, Integer y) DescriptionActive l'ascenseur horizontal de x pixels et l'ascenseur vertical de y pixels. Voir aussi scrollTo() pour fixer une position aux ascenseurs. Exemple Ascenseur Code source <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>Partie pour allonger la page<BR><BR><BR><SCRIPTlanguage=javascript>function Scroller(){window.scrollBy(0,100);}setTimeout("Scroller()",500);</SCRIPT> Résultat Partie pour allonger la page ExplicationCe script allonge la page en ajoutant des retours à la ligne et fait descendre le scrolling de 100 pixels au bout de 500 millisecondes.
Exploring the HTML5 Web Audio: visualizing sound If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. Update 30-11-2013: Firefox also has support for this API but a couple of API elements have changed. So why do I start with visualizations? There are many interesting examples that use this API. Create a signal volume meterVisualize the frequencies using a spectrum analyzerAnd show a time based spectrogram We start with the basic setup that we can use as the basis for the components we'll create. Setting up the basic If we want to experiment with sound, we need some sound source. Load the dataRead it in a buffer node and play the sound Load the data With the web audio we can use different types of audio sources. In this example you can see a couple of functions.
Moqups · Mockups, Wireframes & Prototyping Windows Phone 8 and Continuous Location Tracking in the Background (Pt.2) The first article talked about how to use the new Location API on Windows Phone 8. In it, I did not talk about background tracking. Today I will modify the prior solution to do that and to log events to the output window as well as prevent the UI from being updated while the app is deactivated. Source is available here. We will start with telling the OS that this app can track location in the background. First thing is to open the WMAppManifest.xml file in the XML editor by right-clicking it and selecting Open With. Now we replace the DefaultTask element with the following: 1. 2. 3. 4. 5. Next we add an event handler for the RunningInBackground event. 1. 2. 3. 4. And add an empty handler to App.xaml. 1.private void Application_RunningInBackground(object sender, RunningInBackgroundEventArgs args) We need a way to tell the app that it is running in the background. 1.public static bool InBackground { get; set; } Now we will add the ability to view the state of the app in the debug window. 05. 06.
A Basic HTML5 Template What follows is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This post was originally published in 2013 and was updated in April 2016. As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself boilerplate, from which you can begin all your HTML5-based projects. We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.[] In this project, however, we want to build our code from scratch and explain each piece as we go along. Let’s start simple, with a bare-bones HTML5 page: <! With that basic template in place, let’s now examine some of the significant parts of the markup and how these might differ from how HTML was written prior to HTML5. The Doctype First, we have the Document Type Declaration, or doctype. And for HTML4 Transitional: Simple, and to the point. The html Element The head Element Note: Encoding Declaration
How to record audio in Chrome with native HTML5 APIs Two weeks ago a new version of Chrome was released. Google switched from the default Adobe’s Flash Player to an in-house developed version called “Pepper Flash”. Unfortunately Pepper Flash has a problem with audio recording, resulting in distorted audio on almost all Macs. This happened right in the middle of our efforts to build the Dubjoy Editor, a browser-based, easy to use tool for translating (dubbing) online videos. We started researching the space and checked a lot of sample code out there, but had limited success. From what you can find on html5rocks, capturing audio seems to be well supported. Everything seems easy and pretty straightforward, right? When clicking the “start recording” button, a permission request to use the microphone appears. Looks like the problem lies in assigning the recorded stream to the native audio source as it’s done in the video sample on html5rocks: audio.src = window.URL.createObjectURL(stream); mediaStreamSource.connect(context.destination);
A Simple Trip Meter using the Geolocation API Introduction The Geolocation API lets you find out where the user is and keep tabs on them as they move around, always with the user's consent. This functionality could be used as part of user queries, e.g. to guide someone to a destination point. It could also be used for "geo-tagging" some content the user has created, e.g. to mark where a photo was taken. The API is device-agnostic; it doesn't care how the browser determines location, so long as clients can request and receive location data in a standard way. The underlying mechanism might be via GPS, wifi, or simply asking the user to enter their location manually. The example here is a trip meter showing the initial location and maintaining a display of the distance they have travelled since the page was loaded. Step 1. You can easily check for compatibility by testing for the presence of the geolocation object: // check for Geolocation supportif (navigator.geolocation) { console.log('Geolocation is supported!') Step 2. Step 3.
HTML, native and hybrid - choosing the best approach | FluidUI - iPhone, Android and Windows8 Mobile Mockups One of the questions we get asked a lot about at Fluid UI is whether to use HTML5 or build "native" apps. We highlight the key talking points you need to know to when choosing the right solution for your project or business needs. HTML5: Write once, work everywhere HTML5 allows developers to create rich, internet enabled content across mobile, web and desktop. Going native: The popular choice Native is the most popular approach to building apps. A native app will always have full access to all of a device’s features – Camera, geolocation, address book and eye tracking to name a few. The third way - hybrid apps Hybrid apps combine many of the benefits of both HTML5 and native by creating an app that displays HTML5 content as part of the app. The benefits of mixing the two approaches include: The ability to get your app in the iOS and Android storesThe ability to display full screen appsThe ability to maintain control over your site and to update it easily. Bringing Fluid UI into the equation
CSS Background Animations Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element. We'll use CSS animations instead of transitions for this effect: With the animation code in place, now it's time to apply it to an element with a background image: The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times. How epic is it that we don't need to use JavaScript to manage these animations anymore?
Las nuevas API de audio en HTML5 Hello Backbone.js Tutorial Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application. The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections. Start the tutorial Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Copyright © Artur Adib [ arturadib.com ]
Tutorial for Accessing Mobile Camera with HTML5 and appMobi's XDK A couple of weeks ago I posted a tutorial for using the appMobi XDK and the company’s API library to tap into a phone or tablet’s accelerometer and barcode scanner. With HTML5 and JavaScript, developers can create mobile web apps that act just like native applications and perform just as well. Most of appMobi’s HTML5 technologies have since been made open-source, including the their JavaScript Bridge API, DirectCanvas accelerator, and HTML5-optimized mobiUs mobile browser. These video tutorials are from a recent webinar hosted by appMobi as part of their HTML5 App School series. If you don’t have the time to watch, here’s the rundown: HTML5, CSS, and JavaScript are all that’s needed to access the camera in the appMobi XDK. An HTML5 app with camera capabilities uses the native camera software on the device, i.e. the normal interface you see when taking a picture outside the application. The first bit of code is the event listener, which is fired as soon as the app is opened.
CSS Background: There's More To Know Than You Think You likely use css backgrounds in every site you build. You give an element a background color and tell another element to let a background image repeat. How much do you know about all the other background properties? Did you know you can control where in the background an image is painted or that you can even specify which part of an element is the background? I’d like to run through the different background properties css3 offers us. Note: As mentioned in the comments below support for some of what’s in this post is less than I originally thought. The space and round values don’t appear to be working (outside of Opera) for the background-repeat property and issues have been reported with background-position. CSS Background The first thing to understand is what does css consider as background and we’ll turn to the css box model with its content, padding, border, and margin for an answer. Backgrounds can be transparent (the default), filled with color, or filled with images. Summary