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 !!!
Related
I made a BlackJack game using only php, and html of course for the layout. But what im trying to say is I need to only use PHP. So no javascript or something else.
My game is near completion, all that's left is the buttons.
I have 3 buttons, Start, Hit and the Stand button. These buttons work with forms, If you click Start it will submit a form where the player draws 2 cards and the dealer 1. Then if you click hit it submits a form where the page will give you 1 card. And by clicking Stand it lets the dealer play, drawing cards untill he hits => 17.
I hope you understand how my system works. (If not please tell me!)
Now when i start the program all buttons except Start needs to be disabled, when i submit the start form (Click the start button) it needs to disable the start button and enable all the others. I find this complicated to achieve since I've never done anything like this before without javascript.
I tried the following:
if (!isset($_SESSION["buttons"])){$_SESSION["buttons"]='disabled';}
This runs at the very start of the form, and in the buttons i echo the session out, so when i start it for the first time it disables all buttons, this works fine.
But when i click start, and run this:
if(FORM_start("Start")){
buttons();
}
And buttons(); being the following:
function buttons() {
$_SESSION["buttons"] = '';
}
It doesn't work the first time i click on Start, however if i click start again the other buttons get enabled suddenly.
So this way seems to work, only i need to press start twice, meaning i got 4 cards and the dealer 2.
Is there any way i can let it happen immediately or maybe there is some other way to disable/enable buttons using only PHP.
Thanks in advance!
Well, the easiest way to to do is setting up a numeric variable.
Lets say, it is $hands_played;
thus, the starting hand will be 0;
so, set your session to check is $hands_played = 0, if so, then add attribute disabled="disabled" to the button, if more than 0, don't.
but, to be honest, please use Javascript.
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
I don't think I asked the question very well, so let me elaborate what I'm doing.
I'm building a simple website for a project my niece is working on. She wants to implement a ticket ordering system for their class graduation (this is all just for the project, it won't actually be used for anything in a production setting). She wanted a "map" of seats available and a way to distinguish seats that have been sold and seats that are open.
My vision for implementing this is creating three tables, one for each section. I'm using PHP to build the sections, and at the moment they contain an image that indicates if the seat is taken or not that is wrapped in an anchor tag that points to the same page with the url:
<a href='index.php?section=$section&row=$i&seat=$j' class='order'><img src='open.png'></a>
So my grand plan was, when they click on the image for a particular seat to have a modal dialog pop up that does one of two things.
If the seat is already taken, it will simply display the buyer's information. If the seat is not taken, it will contain a form that will allow the user to input their information and submit it, which will then write to a MySQL database table that stores this data.
I was using the jQuery UI dialog for modal forms (http://jqueryui.com/dialog/#modal-form) to accomplish the modal dialog before I tried adding the index.php?section= etc to the anchors, and now that I've added that part it flashes up the dialog but then the page refreshes and the dialog disappears.
My question is, is there a way to store the section/row/seat information in the anchor in such a way so as not to refresh the page when it's clicked on? Could I add some code before the HTML tag on index.php to handle when the anchor has been clicked? The last time I worked with PHP was several years ago and I'm very rusty and not certain how to tackle this problem.
You need to cancel the click event. That is, tell the browser to do some Javascript work (like open a dialog), and then cancel the click so as not to load a new page. Most simply, you just return false in the onclick event.
<img src="...">
or better yet, you could invoke the dialog from the onclick event
<img src="...">
A better implementation would be to make each seat a "button" (you can change the UI accordingly) and use AJAX to 'submit' a button click.
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.
I'm doing a system where the pages are displayed by tabs (easytabs Plugin http://os.alfajango.com/easytabs/#tabs1-js)
At one point in the process it performs a query in the database, where we
see all the details of each item that appears. I'd like to go into the details of the item, click back to the (on broswer or a button) the page to return to the list displayed by the SQL query, just as with any single page, but currently it only displays a blank page.
I wonder how can I do to implement this solution using the layout tabs.
Thank you.
There are various ways to maintain UI state. One of them is using a "url hash". For example, you click tab 2, change the url hash to:
mypage.php#tab=2
Then if someone presses BACK and goes FORWARD, you use JavaScript to look at the URL has and determine that the user had previously pressed tab 2, so you run your own bit of code that triggers the same event.
I'm unfamiliar with "easytabs" so I'm sorry I can't help with the specific implementation details, but that's the gist of the technique.