I would like to configure some kind of ajax loader to an action that executes a file upload. Once the file is quite large (Excel with more than 2000 rows), it takes sometime to be processed and its quite unpleasant to the user, wait with no other feedback than the displayed by the browser.
For me, the ideal solution, would be a blocking popup, displaying a message "Processing the file..." (or something like that), to prevent users to upload another file in the meantime.
Well... I've got something like this in place on a Symfony app although this doesn't really relate to Symfony:
TEMPLATE:
<input type="submit" class="jq-upload" value="Upload" /> // submit button
<div class="jq-loader"></div> // empty div for a loader image
JS:
$(document).ready(function()
{
$(".jq-upload").click(function() {
$(".jq-loader").addClass("jq-load-icon");
});
});
CSS:
.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;}
So, basically the click on upload button adds a class to the empty div next to it, which has an animated gif as a background image. In this case, it's a typical loading icon.
That should give you enough to create a popup or adjust it to your needs.
Related
I'm currently making a dropzone to upload photos and it working well on Desktop But in mobile, when i click to the zone, sometimes the "Upload from files" window doesn't opening So due to this problem, i'm currently looking to add a button under the dropzone called "Choose photos to upload". This button is suposed open the "Upload from files" Window but i haven't found any help for that in the documentation.
Also on Desktop, when a file is uploaded, the message is disappearing, but i want to make them always visible. There is a specific option or i'm forced to use CSS ?
I know this question is a few months old but saw nobody had answered it yet. It is entirely possible to do both parts of your question.
Video walkthrough of how to add the upload button and force the message to always be visible: https://youtu.be/_CCojUWu2uQ
Working CodePen: https://codepen.io/vpolston/pen/BaxYxNg
HTML
=> Create a parent wrapper div around your dropzone and HTML button element with a given ID.
<div id="dropZone">
<form action="/file-upload" class="dropzone" id="my-great-dropzone"></form>
<button>Add Files...</button>
</div>
JavaScript => Use the clickable property of your Dropzone and give it the value of your wrapper div.
Dropzone.options.myGreatDropzone = {
autoProcessQueue: false,
paramName: "file",
maxFilesize: 2,
clickable: "#dropZone" // the ID of our parent wrapper div
};
And then tackling your second question on making sure the 'Drop files here to upload' message is always visible we must modify the CSS. Default functionality of Dropzone sets the display property of this selector to none..
CSS => My solution was to set it to display: block with !important.
.dropzone.dz-started .dz-message {
display: block !important;
}
Hopefully that helps. If so please mark answered :)
So, I'm making a website for a local water company. On the website there's a lot of iframe such as:
<iframe id="iframewebpage" runat="server" src="https://docs.google.com/gview?url=http://vandvaerk.smidstrup.net'.$DocumentDir_NoDot.$File.'&embedded=true" style="width:100%; height:20%; overflow:hidden; z-index:1;" frameborder="0"></iframe>
Because there's a lot of them, it takes a lot of time for the website to load. Is it somehow possible to save it on the server rather than loading on another server every time?
Sorry, if bad english
I think you should consider this option: Placing image for each iframe and when people click on the image, simply load that particular iframe. So you don't need to load all iframes at the same time the website load.
HTML:
<img id="iframewebpage" src="img/someimage.jpg" data-src="iframe-src" / >
Jquery:
$("img#iframewebpage").click(function(){
$(this).replaceWith("<iframe src="+$(this).data('src')+"></iframe>");
$("iframe").attr({
height: "500",
allowfullscreen: "true",
frameborder:"0"
});
});
So the page only need to load images instead of iframe when it starts.
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
Normally a webpage load images is like scrolling down. I don't want the visitor's of my site to see it. I am looking for a script that will load my webpage and then it will show completely. I have already put a fadeIn effect but the images loading is scrolling and also my background image.
Questions:
Is there a script for that?
What is the best script to use? PHP or JavaScript?
this is one method, http://developer.yahoo.com/yui/examples/container/panel-loading.html
basically you can wrap the content in a hidden div, then unhide it in the body's onload event.
You could overlay your page with a "please wait..." div, and fade that out when the page is loaded. You could use JQuery's ready event to hide the div.
The downside of this is that users with JavaScript turned off would never see the page, but only the "please wait.." message.
To make it work for users with JavaScript turned as well, you would have to make the "please wait..." div visible using Javascript at a very early stage of the document's loading, which is very tricky to achieve. It might work if you put a <script> tag after the "please wait" div but before the actual page's content.
or you can add on page header small copy's of this images.. 1x1 px and fade it or hide or z-index -100/ browser will download this full-size images
Use this code:
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>
I am quite often coming across sites that respond to a click on a What's This or a Gallery link by poping up a window in front of the original page, and making the original page go dim.
Is this a fancy AJAX trick?
Is it only likely to be supported in certain browsers?
And most importantly, how is it done?
This is nothing more than adding a <DIV> that covers the entire screen, and give it a black background. jQuery's UI library will handle this for you automatically.
http://jqueryui.com/demos/dialog/#modal
Or you can do it with basic HTML/CSS/jQuery like this:
div.modal-bg {
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:10;
}
<div class="modal-bg"></div>
$(function(){
$("div.modal-bg").fadeTo("slow", .5);
});