What Are My Options

Posted on 2012-09-14
Last Modified: 2012-10-05
Hi, i am almost finished designing & coding a new website and i have noticed one small issue...

I have several different buttons that load different js overlays, which pop up and allow users to enter and update certain details - e.g - sign in form & feedback form etc... - so when a user clicks the sign in button or the feedback button, a small js overlay pops into the middle of the screen so that the user can complete the sign in form / feedback form.

This all works fine on all browsers, however it is not ideal for smartphones (iphone and android) and i envisage a lot of my users visiting my site from mobile devices.

The main reason i have used js overlays, is to keep the user on the same page - e.g - so when they go to sign in or leave feedback, they can do so from the same page, instead of having to bring the user to a new page. The main reason i need to change from these js overlays, is because when a user views it on an iphone, the overlays loose focus when a user clicks into a text field (i have done a lot of research on this and everyone seems to agree that i need to drop the,)

(please do not advise on building a separate mobile site or separate code for mobile devices... for now i just want a method / interface that works well across all browsers / platforms)

Here is an example of what i am currently using (click the login button (top left)) -
Here is what i am thinking i might need to use (click the the account login button (top right)) -


What is the best user interface to use on a website, so that when a user clicks a button a small form displays allowing them to input data, which allows them to stay on the current page

Thanks for reading all of this :)
Question by:oo7ml
    LVL 19

    Accepted Solution

    Instead of using overlays include your forms code into your pages design and hide it until users click the button. When form is submitted hide it again.

    Author Comment

    Ok, i think this is probably the best option, i will look for a script on - do you know what i should be searching for, thanks...
    LVL 19

    Expert Comment

    The worst part here is that you'll probably need to adjust your whole design to make the forms to "blend gracefully" into the rest of the page.

    If you can make that design changes you just need to show and hide them through CSS or, if you use jQuery just by using .show() and .hide()

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now