Cooler modal popup example – how to open multiple popups, scrolling pop ups per page

Some time back I came up with a cooler modal pop up window using CSS3 and JavaScript specifically for mobile webkit browsers. The example that I presented had only a single button, a click on it would open a modal pop up window.

In this post I have a similar example but this time multiple pop ups can be opened from the same page. Opening multiple pop up’s from a single page was requested by some of my readers. And here it is. I will not go deep into explaining the bits and parts of how to create a pop up window. You can go through my previous post for that. But first let’s check a demo (meant only for web-kit based browsers):

Demo link (open in iOS or Android’s browser, you can also test this in Chrome or Safari in your computer) :  http://rialab.jbk404.site50.net/coolermultiplemodalpopup/

Open multiple pops from a single page

How to run this in Firefox, IE and other browsers?
For this you need to make changes in the CSS file. Add CSS3 prefixes for other browsers similarly as it is there for -webkit- . CSS3 junkies would already know what I am talking about.

Advertisements

HTML5 Canvas – toDataURL() support for Android devices – working Phonegap 2.2.0 Plugin

Update
Save HTML5 Canvas Image to Gallery – Phonegap Android plugin
I have a Phonegap Android plugin that helps to save HTML5 Canvas Image to the Gallery. See it here.

Back to the actual post,

I have been working on a Phonegap based Android app which involves the HTML5 Canvas. So this is what I had been trying for some time – get a png/jpeg image of the Canvas (its a Canvas paint app, something like this and I want to get an image of the drawing..) and then upload the image to Facebook on a user’s album. Let me tell you, it has been a heck of a task and around 15-20 days of restlessness.

The problem stood tall when I discovered that for Android 2.3 (in general Android < 4.0) devices the native HTML5 Canvas- toDataURL() function does not work, which would otherwise give a base64 encoded string  as image data which then can be used as a source for a HTML <img /> tag. It was working for 4.0 devices as I tested it on a Samsung Galaxy S3 and a Samsung Tab. Hence I Goggled a bit and found out various people had this issue before. So it seemed that older Android web-kits (a Phonegap app runs on the Android webview which is actually the webkit browser inside a native wrapper) does not support that native method of converting a Canvas to an image through toDataURL() generated base64 encoded strings. Guess what I had todo? I had to go for a custom Phonegap plugin as there was no other way. This is how I thought of implementing it – pass the canvas object from javascript side to the Phonegap plugin’s Java class and somehow get the base64 encoded string of the Canvas and return it back to javascript as the callback parameter. This is what the native toDataURL() method actually does – convert the Canvas to a base64 encoded image data string.

Read More »

WEINRE – Web Inspector Remote Video by Patrick Mueller

Patrick Mueller is the man behind the Weinre tool – remotely inspect and debug mobile web applications. Here is a video of him talking about Weinre at PhoneGap Day US 2012.

If you would like to know more about Weinre and how to debug mobile web applications I have a few post on it. You can start from here.

And if you do not like setting up Weinre and working with servers you can have a look at Adobe Shadow which is a tool developed by Adobe on top of Weinre, functions similarly but you do not have to set up the dirty part. You can start from here.

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),

Link: http://rialab.jbk404.site50.net/coverflowtouch/

and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

Read More »

Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh

Let’s talk about creating a sliding panel system that adjusts automatically to any screen size or rather any device resolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. So the app will run on any iOS, Android devices including computer browsers such as Google Chrome and Apple Safari. If you have seen a Sencha Touch app which uses a nested list or the sliding animated panels then you must have noticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demo will do the same. I have a very simple implementation of auto adjusting sliding panels.

In one of my previous tutorials I talked on the same Sliding Panel concept but the problem was that it did not auto adjust. If you check the demo on Google Chrome you will notice that only first time the app adjusts itself to the window width and height. Now resize Chrome on your computer and check– the app goes haywire isn’t it. Same thing will happen if you check the app in a mobile webkit browser and go from portrait to landscape mode or vice versa. The content you are looking is cut off. You have to refresh Chrome again to adjust the app. Now look at the new demo below,

New Demo link – http://jsphkhan.github.io/fluidic_sliding_panel/ (the demo is specifically meant for webkit based browsers)

Open it in the same Google Chrome browser and resize it. You will notice all the contents auto adjusts and even the sliding is now bounded to the new window size. So, by now you must have got an idea of what I am trying to communicate.

Read More »

Cooler modal Popup window with fade effect – gradient colors, border, drop shadow and center position

In one of my earlier post I talked on creating a cool modal pop up window using CSS3 and JavaScript. It had fade effect upon opening and closing of the pop up. Based on the same lines, I have created a much cooler pop up, actually asked by one of my readers. It now has gradient colors, much more eye catching – vibrant color 🙂, it has a header, a content area, border, drop shadow and it is also now centrally positioned always, even if you go from portrait to landscape mode and vice-versa.

Look at the demo first, you can view in both mobile web-kit browsers (iOS ,Android) and desktop browsers (Chrome, Safari):

http://rialab.jbk404.site50.net/coolermodalpopup/

The concept remains the same. I have discussed it in details in my previous post. Just refer that in case it is not clear. In this post, I will just talk briefly on the changes that I have implemented.

HTML changes
No major changes. I just externalized the CSS and JavaScript. So they are now in external files, which I reference in the index.html file. The HTML code is very simple and self explanatory. Download the code and check it out. A download link is provided below.

JavaScript changes
I have made some changes in the architecture of the popup creation. The showPopUpMessage() function now takes a header, main content, width and height parameters.

//show the modal overlay and popup window
function showPopUpMessage(modalWindowHeader,modalWindowContent,width,height) {
     //code goes here
}

Since this new pop up has a header, so I have kept a separate method for the header. You can call a function to create the header content and then set it in the showPopUpMessage() function. This will help if you have multiple instances of pop up to create. Here is the function,

/* Common header for Pop Ups */
function createPopUpHeader(title)
{
  //return the header after creating
  //create header for modal window area
  modalWindowHeader = document.createElement("div");
  modalWindowHeader.className = "modalWindowHeader";
  modalWindowHeader.innerHTML = "<p>" + title + "</p>";

  return modalWindowHeader;
}

Similarly, I have kept a separate function to create the contents of the modal pop up. You can customize the method and change the contents. Again, this will help in creating more than one pop up window. Here is how I have done it for this example,

function createPopUpContent(msg)
{
  //return the content after creating
  //create modal window content area
  modalWindowContent = document.createElement("div");
  modalWindowContent.className = "modalWindowContent";

  modalWindowContent.innerHTML = "<p style='text-align:center; margin-top:10px;'>" + msg + "</p>";
  //create the place order button
  okBtn = document.createElement("div");
  okBtn.className = "redBtn okBtn";
  okBtn.innerHTML = "<p>OK</p>";
  okBtn.addEventListener(endEvent,function(){ hidePopUpMessage(); },false);

  modalWindowContent.appendChild(okBtn);
  return modalWindowContent;
}

And now once I have the header and the content I can call the showPopUpMessage() function to launch the pop up,

showPopUpMessage(createPopUpHeader("This is a cool popup"),createPopUpContent("I am a cool modal pop up. I have gradient colors, border colors, drop shadow and I am always positioned at the center!!"),250,300);

I have passed a width of 250 and a height of 300. You can change it as per your requirement.

Positioning the modal pop up always at the center

This is done by calculating the window width and height and then subtracting it by the popup width and height and then dividing by 2. This is how I did it,

modalWindowElement.style.left = (window.innerWidth - width) / 2 + "px";
modalWindowElement.style.top = (window.innerHeight - height) / 2 + "px";

Now, to keep the window always at the center, even when you resize the browser window or move from portrait to landscape and then back to portrait, I have registered a window resize event listener and then calculate the left and top position again as we did above. You can find this is inside the handleResize() function.

//when window is resized
window.addEventListener("resize",handleResize,false); //resizing is useful only when popups are opened

And finally one more change. In this example, if you see at the top of the javascript file, I have detected if the device browser is touch enabled. And then accordingly I register touch based events for touch devices and mouse events for desktop devices. So this is a common code and you do not have to hardcode anything. I have a separate post for this, you can go through it.

Style changes
Only new class selectors have been added for the modal window header, modal window content, gradient buttons. Rest of them is pretty simple and understandable.

So this is it. This is a much cooler pop up, better looking than my previous boring and dull pop up. Hope you have enjoyed it. Check out the demo or download the code.

Download
Download the source code here.

Updates
1) How to open multiple pop ups from one page – Check this post.

A look at iScroll – native way of scrolling content in mobile webkit

Mobile web kit browsers do not allow you to scroll content inside a fixed size container or a div element. If you are a mobile web developer developing apps for iPhone and Android, you must have faced this problem before. If you use overflow:auto or overflow:scroll and expect to scroll the overflown content then you would rather see your entire web page being scrolled vertically. This happens because it is the default behavior of DOM touch events to scroll the page.

Just to overcome this problem I recently came across a javascript library iScroll which allows native way of scrolling content inside a fixed width/height element for mobile web kit browsers. So using iScroll you can have a fixed header/footer with position:absolute and a scrolling central content area.

iScroll uses hardware accelerated CSS3 transitions and transformations to scroll the content and it behaves exactly like the native way of scrolling in iPhone apps. iScroll is very easy to use – download the iscroll javascript library (which is available for download in the home page) and call it in your html page. Then set up your HTML and CSS and you are good to go. Latest version of iScroll at the time of writing this post was iScroll4, so you can download the library and use that. iScroll4 also supports a whole lot of other features like pinch-to-zoom, pull-to-refresh e.t.c to make mobile web development easier. I will not go into the details of iScroll as the site has all the necessary information and is very well documented. I believe you will find everything there to get you started in 5 mins.

Read More »

Debugging mobile web applications remotely with WEINRE

I started mobile web development around eight months back and at times found it very difficult to debug my apps. Normally everybody would start off with a desktop browser, look up the app in a desktop web inspector and then try to debug it and finally make it ready for the mobile browser. Even I used to do the same. I used to check my mobile app in Chrome’s/Safari’s developer tools. There I used to inspect HTML elements, change DOM style properties and check the result out and also see the java script console log messages in the console tab. This would normally serve my purpose but I had to adjust a lot due to resolution differences. Still there was a frustration and a feeling of had there been a tool to directly debug the app in the mobile device itself. And after a little head scratching and Googling I discovered an open source package called Weinre – Web Inspector Remote. With Weinre I could debug my mobile web app remotely – the app would run on the mobile browser and I could modify the DOM remotely, see log messages of it on the Weinre inspector that runs on my computer. And I must tell you, it has helped me immensely. It’s a wonderful tool to have and in this tutorial I will share my experiences of debugging with Weinre. First I will start off with How to configure Weinre and then talk on debugging a mobile web app, but before that let’s see some basics – Weinre and its components.

The Basics
Weinre is a remote debugger for web pages and if you are familiar with Firefox’s Firebug or Google Chrome’s Web Inspector, then you will find Weinre very similar. What it means is that you can debug a web app that is running on your mobile device remotely i.e on your computer. So, in your computer you can select any DOM node, make changes to style properties of the mobile web app and it will reflect in the mobile device on the fly. You will get more familiar with the things once I talk in details later in the article. First let’s see what Weinre is composed of.
Weinre consists of three basic components/programs – Debug Server, Debug Client and Debug Target interacting with each other. Let’s see what each of them means,

1. Debug Server: This is the HTTP server that you run from the weinre.jar file. It’s the HTTP server that’s used by the Debug Client and Debug Target. I configured the server on a Windows machine so all the steps I will talk about are in reference to Windows. For Mac users details of configuration can be found in the Weinre site.

2. Debug Client: This is the Web Inspector user interface; the web page which displays the Elements and Console panels, for instance.

3. Debug Target: This is your web page that you want to debug running on the mobile device – iPhone, Android phone or iPads.

Both the Debug Client and the Debug Target communicate to the Debug Server via HTTP using XMLHttpRequest (XHR). Typically, you run both the Debug Client and the Debug Server on your desktop/laptop, and the Debug Target on your mobile device. The image below should help you.

Click for larger size
Weinre components

Read More »

Sliding touch photo gallery for iPhone – HTML5, CSS3

This tutorial speaks about a simple sliding touch photo gallery for iPhone. The app is meant to run on the mobile safari web browser. We start off by looking at a demo first and then talk about the code in details. Note that the same logic and implementation will work even on Android devices, you just need to correct the dimensions/positions and place the elements according to screen resolution.

Demo Link: http://jbk404.site50.net/css3/slidinggallery/ (open in your iPhone/iPod or Android device’s web browser)

Gallery with the thumbnail images

The images used in the demo are not of great quality or appeal as I am not a Photoshop expert. Once you have cool assets you are good to go.

The demo is all about having two panels, one with the thumbnail images and the other panel with the corresponding bigger image of the thumbnail selected in the first panel. The two panels have been placed side by side – horizontally and they slide in and out of the viewport to give a sliding effect. The sliding of panels uses the same concept (using CSS3 transitions and transformations) that I discussed in one of my earlier post. Here in this tutorial I will not go into the details of how to create sliding touch panels. You can refer my previous post.Read More »

Coverflow animation using CSS3 3D Transformations – Part1

Update
1) Coverflow for iOS with touch gestures: Sneak Peak at the touch gesture enabled Coverflow for mobiles(iOS) is ready. Have a look at it here. There is a demo and download link.

Back to the actual post:
Recently I worked on the famous Coverflow animation using CSS3 3D Transformations, and I must tell you that the results were very impressive. I was actually working on a mobile web version of the Coverflow animation meant for iPhone,iPod, Ipad. Well, I am still working on it and finishing on adding touch gestures to the animation.

Disappointingly, Android device’s web-kit browser does not support CSS3 3D animations as of now so the coverflow that I am trying to build is not working on Android devices. However, I read it somewhere that the next version-Android 3.0 will have support for it. So till then I could support only iOS device’s web-kit browser.

In this post I am presenting a desktop version of the Coverflow (no touch gestures). Right now it runs only in Safari. I must tell you once again that the app I built is mainly meant for web-kit browsers (since iPhone’s and Android’s run web-kit browsers). I have the link to the demo app below,

Demo: http://jbk404.site50.net/css3/coverflow/ (See in Chrome or Safari for best results)

Click to see demo

The demo has only 7 images as of now and the code has pre-defined values in it but it is fully functional. I am working on making it more dynamic so that any number of images can be used. I am finishing up on some nuances of the app and refining the code further, and till then I am posting only the demo. I will talk about the code in details later (very soon). Also I will come up with a part2 of this tutorial series where I will talk about the mobile version with touch gestures.

For the full code you can view the source of the demo.

Here are some of the features of the desktop version of the demo,

  • Click on any image to bring it to the center.
  • Use the previous and next button to see other images.
  • Image Reflections using CSS3 reflections.
  • CSS3 3D Transforms as I have already mentioned. This gives 3D look and feel.
  • Smooth movement of images using CSS3 Transitions.
  • No third party library or plugins. I have used pure CSS3 and JavaScript.

You can use the code and build on top of that.