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.
Related
This may sound vague, I apologise for that. But I can't seem to find anything or anyone that's trying to do the same as me.
Although, I've just seen How to trigger open a jQuery UI dialog from a separate page? but I'm not sure that would strictly work.
I have a single profile page for members with the data driven by an XML feed. On the profile page is a link that opens a jQuery dialog box. This is working fine.
Elsewhere on the site, is another page that generates a list of members depending on a filter, with a link to that users profile. Also on this other page, with the list of members, is a duplicate link to the jQuery dialog box.
How can I make this duplicate link go to the profile page and automatically fire the jQuery dialog box to open?
My way to do this is to use Hash part of URL
for example your URL to profile from other page should be like this
profile#showdlg
and in profile page
var hash = window.location.hash.substr(1);
if(hash == "showdlg"){
//Show dialog here
}
And this should do the trick
You cannot (should not) directly trigger some script action in a page "to be loaded in future". Instead the trigger should be part of the page itself.
So if that profile page is generated in a dynamical way an approach would be to implement a conditional feature that adds such trigger (like using jquery to fire the dialog when the dom tree is ready, there are millions of examples for that). The condition would be whether the profile page has been called via such a special reference or not. You could detect that by looking at the HTTP-REFERER. So it boils down to: if called in a specific way, then add a 2-lines-of-code trigger to the profile page that initially fires the dialog.
To answer your comment below here some more detailed description:
There is not much coding involved. The links reference the users profile pages. The profile pages are generated by php I assume. So all you need to add is one detail: inside php check if the request currently processed has a certain referer it was raised from:
<?php .... if ('other_page.php'==$_SERVER[HTTP_REFERER]) { ... } ... ?>
If so you know that the profile page was called from that other page instead of the normal situation, so you want the UI dialog to fire by itself. For this you add a tiny javascript to the generated page which does the trick as soon as the page has loaded:
<script>$(document).ready(function(){$('#mydialog').raise();})</script>
The details obviously depend on what type of dialog and how it is raised. But you should get the idea of what I suggest...
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.
Basically what I'm trying to achieve is a basic back capability. User goes into Girls listing, which shows him a location screen. Selects a location, and the locations are replaced by images of girls from that location using AJAX. User clicks on a particular girl to view her profile. Now the user wants to go back and have a look at a different girl from that profile - he'd have to go through the location selection process yet again.
What I would like to achieve is to save the location screen the user was in using javascript - just simply save the whole contents of the container div, for them to be reinserted into the dom when the back button (the in page back button, not browser) is pressed. Now the way I was thinking of doing it is passing the string onto php, saving the string using php to flashdata, and then when back button is pressed requesting that data.
Anyone got any simpler solution for what I'm trying to achieve? You can go on www.discreetdelights.co.uk to see what im trying to achieve - a word of caution though, loads of adult content on there.
You could save this data in a cookie.
Javascript cookie functions
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.
I am attempting to make a registration-like page for a small forum. To register for an event, I simply want the users to click a 'link'. (It doesn't have to be a link, but I don't want it to look like a button, so fancy CSS is acceptable).
On this page there will be a limited number of openings per event. (Simple database query to populate this list). The users will then select one of the openings by clicking on it. At this point, I'd like that opening to close and the page NOT to reload (just the Div that link is in).
I know PHP/MySQL very well. Actually, DOING the insertion of the data is easy. What I don't know how to do is the clicking the link and not reloading the entire page but still showing that opening is now closed.
I've looked at jQuery. It seems to have the ability to do the autoreload. Can anyone help me out?
The insert in the DB will be the user's forum name (they are logged into the forum, I have access to that variable within my script). That is all that will get inserted into the database.
Look at the Ajax methods. To update the database you probably must do a $.post. Something like this will work:
$("#myButtonId").click(function() {
$.post(serverurl, $("myformId").serialize(), function() {
// This will be called when the post is complete
$("#mydivId").html('update html here');
});
});