So I have a 3 page (Page1.php, Page2.php, Page3.php) registration page that is all completed after over 20hrs of coding. But now I'm working on design. My idea is to put all the forms on one page rather than three different pages (Page1.php, Page2.php, Page3.php).
Here's what the front page looks like:
So when the user clicks the register link I want the form to appear in this region:
I have all the code for the forms so it's just a simple matter of copy pasting. But what I need to do is implement some sort of slider for the form. So the user clicks register, the form appears on the right, they fill in the first page, then at the bottom right they click continue, and it SLIDES to the next page. Note, when they click continue i don't want to go to a whole new page, I want to stay on the same page, I just want to display different content.
I know how to do all the onclick (show/hide) stuff in jquery, but I'm wondering if there's a good plugin I can use to provide a much smoother transition and better expereience. Or if there's a better way to do it (Pure CSS or something)
Just set all content to .hide() and .show() the div which has a unique identifier.
So you have:
Page 1
Page 2
Page 3
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
With the jquery code:
$('a.tab').click(function(){
$('div.tab').hide();
$('div.tab[data-tab=' + $(this).attr('data-tab') + ']').show();
});
Well, that's basically it. You can do the rest, but this should give you a start in the right direction :)
You can make it as complex as you would like. I have some coding who does this with a TabHelper in CakePhp, and with a little bit of javascript I built the same. Because I don't like the jQueryUi tab plugin (hint)
Also, have a look at Php Frameworks, you said you spent 20 hours coding for you registration and login.. Well, I did the same with CakePhp, but now my site is finished and is fully maintainable and sends emails on the right time and has a lot of functionality.
Related
I have created a single page portfolio template using Bootstrap framework from Twitter. I am having an issue that when I click on "Submit" button in the contact form, the page scrolls all the way to top. I have checked that I have not used any internal linking to top so I am not sure why this happening. My intention is to stay on the same page and show user some friendly message. Can anyone help me figure out the issue? Thanks in advance!
Template can be accessed at:
https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html
I have made the template available on my github page: https://github.com/gupta235/portfolio_template_bootstrap
Forms typically send you to a new page. Since your form is all in one page, the "new page" its sending you to is the same one you were already on, and so it sends you to the first part of that page, which is the top.
You can prevent the page from scrolling to the top by giving the form an action ability that instead of sending you to a new page or the top of the current page, will take you to an id that you place somewhere on the page.
Same concept as putting an anchor point on your page and giving people an option to click a link that takes them to a certain part of the page.
For example if you change your form opening code from
<form method="post">
to this instead
<form method="post" action="#error-check" id="error-check">
This should take you to the form when you hit submit, instead of the top of the page.
A form without an action attribute is not a form, according to standards - and will actually cause a page reload in some browsers.. I've found that action="javascript:void(0);" works well.
Hi i am tryng to implement a web application and i was wondering if html offers any page navigation techniques.
My query is Am going like this in my current page navigation,
Page A --> Page B --> Page C --> Page B
if i press back from this Page B position it will go to Page C, I dont want that to happen, instead, i want it to go to Page A.
The reason is that consider
Page A as login page
Page B as home page with some options, when clicked on any one it will go to Page C
Page C corresponding clicked function, say text boxes where i can input name, address etc, and when i fill and click on submit, it will go to page B.
Now if i press on back button from this Page B, i will be navigated to Page C. I dont want this to happen, i just want to stay in that page in this case.
but if the scenario was like this
A->B->C->D->C..
then on pressing back from last C i need to go to B, and if i press back from B, either stay on that page or prompt me to logout.
Hope my question is clear please dont down vote this, i want to learn, only these forums are there to help me
Please help
The browser-back-button belong to the user.
Its a "go back in history"-button.
so ... imo dont touch it.
provide a useful navigation so that user dont even think about using the back-button =)
There are two ways to do this as far as i am aware.
Personaly i would use JS to create a simple logon page, that opens a page containing an iframe, which is linked to your site. If the user hits back, it will take them to the logon page, as the site is contained within an iframe.
The other way is to change the propertys of the back button, rather than removing it with JS. I think this can be done with.history, but i have never used personaly so i dont know.
Hope this helps :)
I would like to make a website with one page that has inside other pages.
To go from one page to another there's a tab or similar menu, so the page doesn't change, only the inner content.
The inner content has a lot of jquery and php: one has a form to make a search on the left and the results are shown in the center with datatables, so you can search inside the results, order them, etc, etc. When you switch from one content to another I don't want the content to be reset ( example: you make a search and then you go to another page/inner content , when you come back the results of the search have to be still there). One of the tabs has a list( a submenu). When you select something from that list every page has to know and to use that selected value.
I thought the I can make all this with a lot of ajax, jquery ui tabs and php.
My questions are: it's good to make something like that? Is there another way to achieve what I want? Would it be better to make a normal menu with a lot of pages( no more inner content, but diffrent pages) and keep the selected value in session?In this case how can I keep the results?(session again?)
I hope that this question is allowed. Thank you all!
EDIT: I'm not asking the code( I know how jquery tabs and I searched google). I'm asking if it's a good practice to make something like that( one page with a lot of content) or it's better to use more pages?
EDIT 2: I'll refrase my question. I have to make something like this: 10 pages with different content that have php, jquery inside with a menu to navigate from one page to another. When you go from one page to another the searches and options selected in the pages that you left have to be still there, so that when you go back you can see them. One menu has a submenu with a list. When you select something from that list the selected value changes things in half of the pages(what you see inside). How should I do this?(don't show me code, tell me only what should I use to accomplish this)
EDIT3: I looked online and yahoo mail has what I want. The top of the page is allways the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts only part of the page changes ( my inner content as I called it) and the same happens when you click on the other voices in the menu. Inside contacts, if you click on one contact you can see details about that contact, then if you click on inbox and again contacts you can still see the contact that you selected before. How can I achieve this?
You can simple achieve this by using jquery Tab plugin .
or you should create your website template in which you replace content through ajax call.
<html>
....
<body>
<div class="tab_container">
<ul>
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
<!-- integrate nested menu here -->
</div>
<div id="content">
onclick on tab selection display appropriate content here
</div>
</body>
</html>
I would suggest you if simply display content on the basis of tab selection than go for Ui-tabs
If you are developing complex website. and you need multiple menu. than try jquery dropdown menu. For displaying content, overwrite content div on the basis of tab selection using ajax as I have mention in my example.
Here is link for jquery drop-down menu
http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501
Live Example
HTML is for structure and some simple data explanation.
If you want to make some data you should use something like PHP, ASP...
If you want to have some nice pages with effects use JavaScript and common this languages.
But you don't have exact question so the answer is the common
this thing is driving me nuts. I'm working on a personal "for my own fun" project involving a quite long sign up form.
What I want to do is to split the form into sections grouping the fields that are relevant for each step, and the ability to navigate back and forth before pressing Submit, which check marks or something to indicate which step is complete or not. I've found some examples around but they don't really fit into my design and can't get around to modify them exactly how I want.
I was aiming at something similar to the slide show in forum http://forum.xtreamer.net/, with the progress bar at the bottom and the clickable steps. I would like to do something like that but for the steps in a form.
Any ideas of where should I start? I tried to look at their code to see if they use a public or commercial (but third party) jquery plugin but no dice.
Anyone can recommend a tutorial or some resources?
Thanks!
I just designed something similar recently using jCarousel. it is a jquery plugin that allows you to easily scroll to certain positions, or ids on the page.
What we did was create a long horizontal page with several divs floated to the left. Each div contained a step or two, and had forward and back buttons at the bottom. When you click the next button on a particular step, it would quickly slide away and then next one would slid in
In addition to this, there were absolutely positioned buttons at the top that could take you to each step individually.
Here is an example of the individual navigation to go back and forth:
<div class="nav">
<a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">← Back</a>
<a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next →</a>
</div>
The #1 and #3 are ids of the prev, next steps -- this code being taken from step 2. 3000 is the milliseconds to scroll to each particular part of the form. 3 seconds is a bit long, but we had some animated images between the steps to make the form a little more fun!
Hope this helps :)
I think you trying develop a form in which user finish personal details and on click go to office details then on click go to address details and at last submit.
Try to use jquery show() hide()
There will be three divs.
when on click you show one div , hide other two divs.
there should be validation in each divs and on completing one details there should be some hidden flag to check that details is completed.
On the final details before submit you should check the flags for each div.
As you are trying to give option to come back to the first div , user can empty details of first and go to final. So this flag check is must
Should work !!!
thanks for coming in and looking at my question.
I have a page that has a bunch of dynamic a tags with ids like aTag1, aTag2 ans so on.
now I need to make these tags open the same lightbox that initially loads a partial page named register.php,
and the user will fill out the form, sumbit it then go to another partial page named payment.php and go on until the registration and payment are all settled.
this process needs to be done using ajax.
I think this should be relatively easy if appropriate ajax plugin is used.
Could you please advise any plugins and tips?
Thanks a bunch!
Check out jQuery and jQuery UI Dialogs. Of particular interest to you would be the modal form demo. If you definitely need to have the content loaded from separate URLs, you could put an iframe in the dialog or do something like this example.