It is using a Javascript code to detect browsers audio status dynamically and show the result.

I also added 5 different audio format sample using html5 audio node, and using this you can test whether any particular format is playing or not

It works for both Desktop browsers and mobile browsers.

Here is the URL:

http://www.sajithmr.me/html5/audio/

Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

Today I tried Angry Birds Welcome Screen in HTML5. Use Latest Safari for HTML5 with Sounds. In my Mozilla Animation works but no sound.

(If you are viewing this post via Email, click the link to see the animation)

Click for FULLSCREEN

I will try to amend this if get time.

Click for FULLSCREEN

You can download Adobe Edge Trail Version here.

Also see what others did with Adobe Edge here:

http://labs.adobe.com/technologies/edge/resources/

If you are using https pages or some of the pages (payment pages etc) in your website, keep the following in your mind. In some browsers especially IE shows warning of non-secured content in secured page. This cause user the feeling that the website is not secured.

1. Use relative url always. Relative URL means those without starting with http:// or https://, instead use relative url.
2. If you need to use full url, use dynamic base name in with your programming language.For example in PHP, define BASE_URL = http://www.yoursite.com and use this variable in every links and forms. Change the BASE_URL value between http and https depending upon the protocol ($_SERVER['HTTP_HOST'])
3. Check  inside javascript function whether it is calling any non-secured url. (For example, sometime you may use full url inside Javascript). Check using if condition to decide, which protocol to use, like what Google Analytic does.
   eg:  (“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
4. Check if there is any flash content which tries to load data from non-secured url. There is a chance to load some xml configuration files using http protocol
5. Also change the codebase parameter value in object tag (flash or other media) whether it is pointing http or https url. There is a chance for this url in flash content.
   codebase=”http://download.macromedia.com/pub/shockwave /cabs/flash/swflash.cab#version=9,0,115,0″
   Change this url to https://downoad…
   
   
6. If you are using facebook connect or such integration, check the javascript initialisation code.
   FB.init(“78bc8ffb87c41eabb6395a2045c76021″, “/xd_receiver.htm“);
   Inside the xd_receiver.htm file, the cross platform callback will be non secured url (http)
   Change this to xd_reciver_ssl.htm and use new code, which is available in Facebook documentation

Tools like Fiddler can be used to check which url is non-secured. Firebug cannot show all non-secure connections. If the above steps do not solve your problem, try disabling javascript files one by one to point out which call is making the problem. Also try this by disabling Flash objects one by one.

Good luck guys

Cheers

Sajith

You can create iPhone style flip using jQuery.

Visit: http://lab.smashup.it/flip/ for more details

http://sorgalla.com/jcarousel/

jCarousel uses both javascript array and structured html  for inputing data. The data can be modified with html using post callback functions. For example, you can show flicker images using jCarousel by importing the images as an javascript array. To format the appearance and style , you can use html in callback function.

If you need to you fully html based Carousel, use  jCarouselLite

Recently I created a sliding menu for a project using jQuery and ScrollTo functions.

See demo: Slider  Menu

We can use the jQuery function $(“.menubar”).scrollTo(id_of_element) to scroll any scrollable area to a particular location.

The idea behind every smooth sliding is using scroll function with overflow:hidden mode.

You can download the source code from : http://www.sajithmr.me/downloads/slider/slider.zip

Here div menu-bar is the scrollable div with overflow:hidden mode contains set of menu and a duplicate as a  buffer

At the bottom of the code, you can see a filler div, this is for filling the menu one by one to the right side menu-bar to make the sliding very smooth

The function setMotion(this) calls  the scroll function and it moves till the called DOM object’s id reaches

If you use an ajax call after the motion to load the content at the bottom, you can make this sliding menu for proper navigation purpose.

Thanks

Sajith

In sometimes onchange = “document.formname.submit()” won’t submit the form, while it works on other html pages.

There is hidden truth of this problem is , there may be some other input having the name “submit”. This cause problem in IE and some other browsers. So rename the input field name from submit to any other name (In most case we use the name of submit button as “submit”).

It is a rare tip,  you may  face this someday !!!

Go here to find it : http://fancybox.net/

You need to add the below javascript in addition to the jquery js file.

<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

To create a link to open in fancybox, call the function fancybox. For example, if you have a link pointing an image <a href=”myimage.gif” id=”imglink” />

Call

<script>

$(“#imglink”).fancybox();

</script>

The window automatically resize with image. If you put title attribute, it shows the title below with the light window.

Instead of image, you can point a file. If you need to open that file in iframe, use class=“iframe”

Visit http://fancybox.net/howto for more usability.