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.

Authoring “Adobe Edge Inspect Starter”…

My book “Instant Adobe Edge Inspect Starter” on mobile web debugging and testing has been published and it is now available online. For more details and to purchase you can visit here.

My book on mobile web debugging and testing.

Mobile web testing is currently a really time consuming and cumbersome process as there are no direct debugging tools available with mobile web browsers. Since mobile devices vary so much it is important to ensure that your web page looks as intended across the multiple mobile devices that you are targeting for your audience. Edge Inspect is a perfect tool for web developers and designers who are developing for mobile devices, allowing them to simultaneously test on numerous devices in real time as they develop without learning anything new.

“Instant Adobe Edge Inspect Starter” is a practical, hands-on guide that provides you with a number of detailed steps, which will help you to get started on testing and previewing all your mobile web projects on multiple mobile devices. This book will also show you how to use all the other available features of Edge Inspect and make the entire testing process on mobile devices very simple, effortless, and faster.

This book starts with an introduction to Edge Inspect and will take you through a number of clear and detailed steps needed to set up a working installation, and get up and running with testing your web pages on mobile devices.

You will also learn why traditional ways of testing mobile web applications are not very helpful and how Adobe Edge Inspect overcomes it. You will have a look at connecting single and multiple mobile devices with your computer and how to browse in sync.You will learn about remotely inspecting and previewing mobile web pages on a targeted device and directly see the changes taking place on the device itself. The book discusses in detail about creating your very own simple mobile web application, running it from a local server and testing it across mobile devices. You will also take a look at how to use the Edge Inspect web inspector window and do some basic HTML, CSS, and JavaScript debugging. And then finally you will have a look at using your own local Weinre debug server with Edge Inspect and some other very important features. If you want to take advantage of Adobe Edge Inspect and make mobile web testing a lot easier, then this is the book is for you.

“Instant Adobe Edge Inspect Starter” will guide you in getting started with Edge Inspect and will make testing on mobile devices a lot simpler and faster. The book is packed with a lot of examples and diagrams that will help you to test all your mobile web projects without any hassle.

Who this book is for?
This book is for frontend web developers and designers who are developing and testing web applications targeted for mobile browsers. It’s assumed that you have a basic understanding of creating web applications using HTML, CSS, and JavaScript, as well as being familiar with running web pages from local HTTP servers. Readers are also expected to have a basic knowledge of debugging web applications using developer tools such as the Chrome web inspector. And of course you need some mobile devices for running the example in this book and testing it.

Reviews

Ben Forta (Adobe Systems Inc‘s Director of Developer Relations): http://forta.com/blog/index.cfm/2013/4/12/Instant-Adobe-Edge-Inspect-Starter

Creative and Codehttp://creativeandcode.com/review-adobe-edge-inspect-starter-ebook/


Handy eBook to have available – by Chris.M
Overall, the book does a great job of getting you up and running with Edge Inspect. The first couple of chapters focus on getting the application installed on your computer, and then getting it set up on your mobile devices. Though the installation is fairly straightforward, the instructions they provide are detailed with plenty of screenshots, so you should have no issues getting set up.
They also give an overview of the best features of Edge Inspect. I’ve been using Edge Inspect for a while now and even I learned a few new things. The application really does make mobile testing incredibly easy with remote inspection and console log.
The eBook wraps up with some great resources for using Edge Inspect. If you are thinking of working on Responsive Web Design, Adobe Edge Inspect is an invaluable tool. I think the eBook is super handy to have as a reference, and for 5 bucks, why not?

worth having it as a reference – by Siddarth Kalyankar
“Instant Adobe Edge Inspect Starter” indeed is a starter for developers who wish to explore the possibilites of using Adobe Edge Inspector tool during their day to day development activity. It talks about Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect (Previously known as “Adobe Shadow” ).
This book assumes that the person who reads this is already into mobile web development and address some of his/her problems which are faced during the development cycle. This book is not intended to help you start doing mobile web development, but if you are web developer and willing to do mobile web development, this could come in handy for you as well.
The books briefs you about what is Adobe Edge Inspect, What are the reasons to use it and What you can do with with it. The main focus is on installation of the required components on your computer, the Edge inspect client on mobile device , how to pair mobile device with your computer and how to debug and preview. I found this information quiet useful as the entire installation process has been very well illustrated with screen shots focusing on Mac/ Windows operating systems, and Android/IOS for mobile device. The author has also provided with the code which can be used by first time developers to get started on their mobile web development venture.
If you are looking at speeding up your mobile web development, Adobe Edge Inspect is the tool and this book is worth having it as a reference.

More reviews from – Amazon

Replicating the iPhone Swipe Gesture – Vertical swiping

For those who wanted a vertical swiping feature to the the swipe gesture gallery that I created earlier, this post has a new demo and minimal explanation about a vertical swipe gesture gallery. Now you can swipe the images up or down.
I will not go through the basics once again as I have explained them in details in my previous posts. You can refer them once again in these two tutorials – post 1, post 2. Check out the demo below. Open the link in a webkit browser in either your mobile device or your computer.

Demo link: http://rialab.jbk404.site50.net/swipegesture/vertical/

Below is a screenshot of the gallery in action. You can see that the images are being moved vertically.

Screenshot of vertical swiping through images
Screenshot of vertical swiping through images

Read More »

Replicating the iPhone Swipe Gesture – auto scrolling feature

This is an update to the Replicating touch swipe gesture javascript implementation series that I have been writing for some time now and this time I have tried out the auto scrolling feature. Sometimes users may want a auto scrolling along with the normal swipe gesture feature. This post will talk about it and the changes to code that were made to make it auto scroll. First let’s check out the demo, the demo runs in both computer webkit browsers and mobile webkit browsers.

Demo link: http://rialab.jbk404.site50.net/swipegesture/auto_scrolling/

Now, let’s talk on the implementation,
First the features of this demo-

  • Auto scrolling – the gallery slides change automatically at periodical times. Based on the requirement specify whether auto scroll stops on user interaction or continues.
  • Looping – the gallery loops and is circular.
  • Direction – supports two direction – left or right. Specify which direction the gallery should auto scroll.
  • Click/Tap to URL – click or tap to open URL’s.
  • Swipe gesture – and then the touch based swipe gesture for mobiles is available as well.

Read More »

Adobe Shadow is now Adobe Edge Inspect

In a major move on the 24th of September, Adobe has renamed Shadow to Adobe Edge Inspect and now it has become a part of the Adobe Edge Tools and Services : http://html.adobe.com/edge/
Shadow had been a great success for mobile web developers and designers to remotely debug applications on the mobile device in real time. I had been using the preview version of Shadow for quite a time and has found it really useful, the last one being the Shadow Labs Release 4. So now the preview period of Shadow is ending on the 31st of October and after that Shadow will be invalid. Instead you have to download Edge Inspect and start using it.
You can get Edge Inspect by signing up for a free Creative Cloud membership subscription or a paid subscription. Get a account for yourself at: https://creative.adobe.com/join/starter. The free version allows only one device to be paired with your computer while the paid full version allows multiple devices to be paired simultaneously with your computer. Here’s a video demonstration on the new Edge Inspect release

Read More »

Circular swipe gesture gallery – looping through images

This is another update to the regular swipe gesture gallery that I created in two of my earlier post – post1, post2. This time I have implemented the looping feature for the images. The gallery never ends, instead you swipe it in a circular motion. So, whenever you reach the end of the list, swipe again from right to left across your device’s screen to see the first image and also when you reach the beginning of the list you swipe from left to right of your device’s screen to see the last image again. Try out the demo first and you will get a feel of it. Check out the demo in a webkit desktop browser (Chrome, Safari) or an iOS/Android device’s browser. Click on any image to open a URL as well. So, click/tap to open URL is included.

Demo link: http://rialab.jbk404.site50.net/swipegesture/circular/

An instance of the demo application – with reduced opacity and exposed images, the darker one being the one currently displayed and is inside the wrapper div.

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.

Use your own Weinre server with Adobe Shadow – Step by step

Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my earlier post. So please have a look at it and set up the server. You can check out the “Configuring and running the Weinre debug server” section in the postAssuming that you have the server set it up on your computer, then you need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip&gt;:port where <yourip> is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out the port and the details from the command prompt after you have run the server. The screenshot below shows my instance,


Read More »

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 »