I have a link that loads a php page full of processing images and overlays using imagemagick. Is there a way to have the current page you are on have a loading please wait overlay where it overlays or lets user know to wait?
I have seen this attached to an image but not when you click a link to a page. It's not a form submission either which I've seen solutions for.
Thank you
There is a very good Jquery plugin to achieve this. It is called Queryloader. It acts like a page preloader. Refer the below link,
Query loader - Page preloader
try to send a request to the content page through ajax on document.ready function and show the loading image and when the content of that page is received hide the image and show the content.
Related
I am in the process of creating a site where visitors can preview(not THUMBNAILS!) another url on mypage in an input text box and click on"preview" button-
I am using CURL from php to extract the contents of the site
and have divided my page into two halves one for accepting url and the other half which will display the previewed content, basically i do not want image of the url site like GOOGLE.
though the CURL fetches me the contents and I am able to see the content on the preview half what is annoying is the CSS of the previewed html is getting applied across even my page :(
since my knowledge of css is very limited can anyone help me with the following
css of the previewed section must not get applied to my part of the page
How to scale down the previewed site just to fit into the preview section of my page.
thanks,
Jay
Use an iframe to keep the preview site separate from your own. Something like this should work:
<iframe id="preview" src="about:blank"></iframe>
<script>
function previewUrl(location) {
document.getElementById('preview').src = location;
}
</script>
I have a pinterest style gallery. I want to make it so when you click on the images it opens a fancybox with a larger image and then comments and other stuff below it in a box. But I want each image/ image fancybox to have it's own url so people can share the links and stuff. Any Ideas on how to do that?
Thanks in advance
Just use fancybox as default. When the onComplete event is raised, manipulate the DOM and serach for the fancybox container and just append the comments and stuff.
You can change the url in the browser with HTML5 history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
And then on full page load you can get the url with window.location and modify the DOM to fit your need.
There are kinda two ways:
1. like Facebook does: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page
2. like Twitter does:
you can access and change the #-part of url using location.hash
//example.com/
location.hash = 'foo'; //becomes example.com/#foo
I would go about this by creating a PHP script that takes in the id of the image e.g. outputimage.php?id=123 and then outputs the html of the image, comments etx. This script could be called with a jQuery ajax call that requests the html from the script and then places it in the fancybox div.
Another page called image.php?id= that again takes in the id of the image and uses outputimage.php to display the html in a separate page layout. This page would then be your standalone layout.
I have popup modalbox Iframe which can be open by onclick function using jquery. It's open fine. And in Iframe popup dynamic content is displayed. But it takes some time. I want to put preload image until content of Iframe is displayed. For example:
$('#preloadingImgDiv').fadeIn('slow', function() {});
url ='something.php?somethingname='+somethingname+'&somethingid='+somethingid;
$("#iframeId").attr('src',url);
$('#preloadingImgDiv').fadeOut('slow', function(){});
It works. But before coming dynamic content in Iframe popup box, preload image are disappeared.I need preload image is displayed continuously until dynamic content of Iframe popup Modalbox has been come. And another thing, this preload image is needed to display in the middle of content of Iframe popup Modal box.I have design like that
div html, Iframe, dynamic content coming in php. how to fix it.
I need your hand
Thank you
I'm not sure that i get your question clearly but i think you want to display your loading image untill content is fully loaded. You are calling .fadeIn and .fadeOut at the same time so it becomes visible and invisible before your ajax(or any other) request completed, but you need to call .fadeIn when your loading request started and .fadeOut when it's completed.
Here is a question and answer like yours: https://stackoverflow.com/a/4240660/1241723
hey guys i want to create one display form in which at the bottom images with some text are display in a sliding format.
And when user take mouse pointer onto image that time at the top that image look bigger compare to bottom image.& with image some text also appear with "readmore" button.
when you click "readmore" then it redirect to other page which have full info about selected content.
for clear view what i said visit www.yahoo.com
i want to create some like that for displaying news with pics.
Pratickg88: This is what I used in a similar project:
jCarousel combined with jQuery 1.4.2.
Then I did something rolling my own Carousel class in another project:
http://www.phpexperts.pro/demos/graph_sort/
JavaScript source code for that widget.
I have PHP page where users can upload photos (using Ajax & PHP script). Those uploaded photos (thumbs) are shown after upload in DIV below upload field and fancybox plugin (I'm using it for popup window for photos) is working ok then.
Then, after hitting send button I want to clone that DIV at that same page at message board, bellow other messages with or without uploaded photos.
When I try to do that with:
var pht = $("#photos").clone().addClass('p_pht');
and try to display sent photos bellow sent message like this:
$("div#wall").append('<div class=msg>'+ message +'</div><div class=n_pht>'+ pht.html() +'</div>');
Fancybox plugin don't work. Only the link is working but not with popup window as it should be.
What am I doing wrong?
because you've changed the dom the fancybox plugin doesn't know the new elements exist. there are two ways of solving this.
Call the fancybox plugin again when you've finished adding elements
Use jquery live as answered here jquery live & livequery
Hope that helps.