Geek Answers Handbook

How to display a download dialog when someone clicks on a specific link?

I have a URL that opens a webpage that loads very slowly, and I have no control over it.

I want to display a download dialog when someone clicks on this url or blocks the page using an overlay div when this happens.

Note. This is not the same question as ajax related ones, this is for regular URL clicks that make up the user, and not just for specific ones.

<A href="http://veryslowload.com" onClick="...">slow load...</a>

I believe that what I am looking for is what to wear onClick.

+6
source share
7 answers

You can do it:

 $(function(){​ $('a').click(function(){ $('<div class=loadingDiv>loading...</div>').prependTo(document.body); });​ });

Demo (change the link to a very slow page for a better effect)

But it depends on the page: if the page immediately sends some content, but not all the content, you will not have time to see your div.

+6
source

If you also need animation, this becomes a tricky question as browsers behave differently. Some stop all GIF animations when loading a new page. It basically boils down to something similar if you have jQuery and download the spin.js library.

See here for a working solution :

http://jsfiddle.net/7aJyP/

 <style> #loading { display:none; position:absolute; left:0; top:0; z-index:1000; width:100%; height:100%; min-height:100%; background:#000; opacity:0.8; text-align:center; color:#fff; } #loading_anim { position:absolute; left:50%; top:50%; z-index:1010; } </style> <div id="loading"><div id="loading_anim"></div></div> <a href="http://pangoo.it" class="mylinkclass withanimation">link</a> <script> $(function () { $(".withanimation").click(function(e) { e.preventDefault(); $("#loading").show(); var url=$(this).attr("href"); setTimeout(function() { setTimeout(function() {showSpinner();},30); window.location=url; },0); }); }); function showSpinner() { var opts = { lines: 15, // The number of lines to draw length: 3, // The length of each line width: 4, // The line thickness radius: 30, // The radius of the inner circle rotate: 0, // The rotation offset color: '#fff', // #rgb or #rrggbb speed: 2, // Rounds per second trail: 70, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; $('#loading_anim').each(function() { spinner = new Spinner(opts).spin(this); }); } </script>

If you use animated (GIF), the animation may depend on some browsers. I used the spin.js library ( http://fgnass.github.com/spin.js/ ). While GIFs are frozen, javascript animation seems to work.

Consult with all browsers!

+5
source

Although ajax would be more elegant, it is possible. You must intercept the navigation, preventing the default event, and then force the user interface to be updated, and then change the location to the destination URL. Something like that:

 $('#mylink').click(function(e) { e.preventDefault(); var url = this.href; // Update the UI here setTimeout(function() { // This is a trick to force a repaint window.location.href = url; },0); });
+2
source

Presumably, you want the download dialog to appear immediately, then disappear and be replaced by a new page when rendering a new page?

Three ideas come to mind.

If you have control over the original page, but not for the purpose, use the click event handler to replace the normal behavior of tags with something like this:

  • Show boot animation
  • Leave an AJAX request to the URL indicated by the tag href attribute (alternately create the hidden URL as the source)
  • When the request is complete, replace the contents of the document with the answer.

This can get really hairy since you will not lose the javascript and css defined on the original page. It also does not change the URL displayed in the user browser.

If you control the target and can make the target cache (even for a few seconds): you can load the page in the background via AJAX, and then redirect to it. The first load will be slow, then the redirect will load the page from the cache.

And another alternative: if you control the landing page, you can define an optional parameter, so if this parameter is present, the server returns a page consisting only of the loading animation and the javascript bit that the actual page loads.

+1
source

first store spinner.gif some where in your form and keep it hidden and also put src = ""

thus there will be no src for the image

but later, when making an ajax call, you can set src for the Spinner image, so the page will load

 $(document).ready(function() { // bind 'myForm' and provide a simple callback function $("#tempForm").ajaxForm({ url:'url to be called', type:'post', beforeSend:function() { alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here"); $("#spinner image ID").attr("src","../images/spinner.gif"); }, success:function(e){ alert("do whatever you want with response here"); } }); });
0
source

You can create a hidden iframe and listen for a load event. You will also need to perform a manual check after about 1 second if the destination has prevented the contents of the x-frame.

DEMO: http://jsbin.com/ijofih/1

 $('a').click(function(e) { $(this).text('Loading...'); // do your UI thing here e.preventDefault(); var destination = this.href; setTimeout(function() { window.location = destination; },1000); $('<iframe>').hide().appendTo('body').load(function() { window.location = destination; }).attr('src', destination); });
0
source

You might want to explore Modal Boxes. You can activate the model window when sending an ajax request and possibly close it. https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

-1
source

More articles:


All Articles