I'm familiar with the Ajax/jQuery .load() or php include() which can be used to load other content into a div on a page.
Kindly take a look at this example I've posted: my site with page transitions
How I've set up this page is, the body is 100% of the screen with no overflow. There is the blue section which is 100% height and the red section which is 100% height positioned 100% from the top. When you click the button the blue div is scaled back and the red div is transitioned to top: 0;.
My problem when you hit the back button, it doesn't go back to the blue section, it goes back to the previous page (blue page).
My question is how can I set this up so the red div (2nd one) will actually change the url (and load another php page into it using include(); or some other method)? For example when you click the button on the blue page, the red page will show up (with the included content) and the url will change to: davidfateh.com/red. I realize hitting the back page won't give me the transition, but at least it will go back to the blue page, which is my goal.
Thanks for looking and for any advice! Cheers!
So basically you show the same page, just different part of it. That is why hitting the back goes to the previous page, not the previous section, which is actually on the same page.
You can do what you want like this:
Create 2 different php files. red.php and blue.php
In each file have only the part you want.
the buttons now have to send from one page to the other. How to do this, depends on how you implemented your existing button.
For example, if the buttons are implemented like forms, use something like this:
<form action="red.php"> in one and <form action="blue.php"> in the other.
By pressing the button it will jump from one page to the other.
Related
I would like to show certain image on a page which is open in a tab, only when the other page press a button. I know I can post on the other page, but is it going to be live? Because I am not gonna be refreshing the page at all. My whole plan is to press a button on one page and show live result on an another page without refreshing it. How can I make it possible? I just need the basic idea behind it. Sorry if I made it sound complicated.
Thanks
I need to have a popup window that will overlay a current window such that the user can click back and forth without the popup disappearing behind it. The popup must also be movable. I've tried a few pseudo popups like Zebra. They have a good modal popup, but their displays are not movable and are limited to the current screen only.
Imagine: The user is reading a record and wants to popup more information. Then the user wants to change records on the main screen and bring up a second popup so the two popups display at the same time - and so forth. The user may want to go to another main screen and popup more for further consideration such that there could be multiple popups independent of any main screen and always on top (not of each other, I realize).
In case it matters, I'm on Windows 7 using JQuery along with PHP and MySQL.
Sounds like you are going to want to use the JQuery Dialog Box (http://jqueryui.com/dialog/#default) to create your "popup". With JQuery you'll be able to crete as many "popup" windows as you want.
The difficulty will be "changing the main window" which you would have to load in instead of switching pages in order to keep all your popups. Otherwise you would need to store what popups exist, with all their information in order to re-load them when you switch main windows.
And of course, your popups if you do them through JQuery Dialog Box will always be limited to the Browser window.
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 !!!
I've created a PHP web form which when all the data is present has 2 submit buttons (Continue and Print). Continue calculates details based on the entered information and displays it on the page. Print performs the same calculations, but then creates a PDF in a new window.
When I click Print the original page still loads (which is fine) but the styling is altered.
To see what I mean head to this page and for speed enter "1" in all text boxes except Position (which must be text). After you've clicked Continue, click Print to generate a PDF, then look back at the original web page to see altered styling.
Any ideas would be useful.
Thanks,
Adrian
Assuming you mean the tables overrunning the footer, get rid of the height: 100%; on #prodselector_text, solves the issue for me.
I have a page generated by php which includes two drop-down lists (SELECTs) which contain a lot of items (about 2,000 each). The page is fine, but when it loads in Firefox, there's a delay during the load, and then it seems to refresh the entire page. If a user tries to click on anything before the "reload" occurs, it has no effect.
In Explorer, each drop-down just takes a while (a second or two) to appear, which is fine.
Anyone know what this is? And aside from using AJAX to dynamically fill the drop-down list, is there an easy way to avoid it?
EDIT: Additional information. I have got my PHP script to output to a log file whenever it is called, so I can now see that what seems to be happening is this:
A call is made to the PHP script, and the page starts to load. After a few seconds, another identical call is made to the PHP script, at which point the page starts to load again. This time it completes loading. So I guess it seems like the browser refreshes the page automatically for some reason before the page finishes loading.
Wild shot in the dark: Do you have any images or hidden image submit buttons with BLANK src? I needed to 'fake' a 'default enter' effect for a textbox and used a hidden image button before all the fields. Since it was hidden, I left the src attribute blank. Firefox loaded the page twice! Pointing the src attribute at a single-pixel but real image fixed it.
First, you should use a network sniffer like wireshark to confirm that the page really loads twice.
Then, confirm that it happens only with firefox;
Then, you are on the good way ! I experienced a variant of what n8wrl is proposing; it was in some css declarations with some empty background-image property --> Check your CSS for empty file declarations