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.
Related
I want something like when you click on image on facebook, url changes to facebook.com/photo.php?.... but without redirect. I want exactly the same thing but to open the messages, not photos. Simply, i want when user clicks on displayed messages with other users to open a new popup window without redirecting to new page with all messages with that user. Is that possible and if it is please tell me how to do that.
Example:
Messages with user A
Messages with user B
Messages with user C
And when user clicks on 'Messages with user B', it will open new popup window with all messages with that user, and of course, pulled from database.
I decided to write this as an answer since it is too long for a comment.
To "properly" set up what you want, you need several parts working together:
AJAX: (eg: jQuery.ajax) Retrieve data from the server programmatically with javascript
CSS/HTML dialog: (eg: jQueryUI dialog) Create a fake popup inside your page, usually to give the content some prominence
History State: (eg: SO Q/A) Change the page URL (in addressbar) without reloading the page.
I think I understand what you are looking for!
Use case scenario:
1- User looks at a feed of posts/images/anything.
2- User clicks on one of those posts and, it opens in a box with that same content.
The thing you are looking for is called "Lightbox" or "FancyBox".
I googled and found a few examples:
http://fancyapps.com/fancybox/
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
http://lokeshdhakar.com/projects/lightbox/
you basically need to recreate the loop or make on a onclick function when user chooses the photo, and just call the index of that photo again inside the lightbox.
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.
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.
Say I wanted to create a popup for my website that only showed once (if the user either filled it out or clicked the "do not display again" button), how would I do so. I am creating the popup and form using javascript and html, passing it in php to a database.
The easiest way would be to use a cookie which would be downloaded to the client's computer. When your webpage loaded, it would need to check for this cookie, and if not found, or a flag inside it had a property "noPopup=true" for instance, not display the popup.
I want to open a popup window on client PC where I will show records. The user will click on the selected row, and the popup window will disappear, but the parent Form on my page must get filled with the DB values related to the clicked row on the popup.
This is what I want to do. What is the right approach?
You should be able to send back some response to your parent window from popup window.
There is a specific javascript methods to do this. See this.
You can also use a modal popup type container which will make communication simpler and give you more control of the data. It'll also work flawlessly even if the client has any sort of popup blocker (which most do by default).
It's easy to build from scratch and there are also many jquery plugins that make it even simpler.