Hi,
I've been working on a new style progress window for members when uploading a new image. This uses absolute divs to display the progress upload window within the member.html webpage instead launching a popup html window. The main reason is that popup html windows can be blocked by internet browsers and absolute divs won't.
This new style upload progress window also places a semi transparent curtain effect over the rest of the member.html web page. All works great accept for a couple of minor bugs. Once fixed it'll be added to the Mods & Plugins (Releases & Support) section for all to use.
The first flaw is with the animated gif progress bar(image) during upload. This gif animates fine in Firefox and Opera, but freezes in Internet Explorer. The problem I understand is that IE won't fully render gifs until the upload is complete.The solution is to delay the members image upload until the gif is fully rendered. Although I'm not sure how to do it. This link explains it better:
http://www.west-wind.com/Weblog/ShowPost.aspx?id=1227 The second problem is with the semi transparent curtain. If the #overlay{} height is set to height:100%; the semi transparent curtain will cover only 70% length of the complete web page. My temp fix is to set it to height:145%; to cover all the webpage.... Not ideal, but it works for now.
Other than these two things the progress upload window launches on upload, auto closes when upload is complete, doesn't get blocked by internet browsers and looks pretty good.
If anyone can offer suggestions or a solution for either of these issues, then that'll be great. Especially the animated gif problem in IE.
Here's the files to change/add to:
* templates/<your_template>/member.html
* templates/<your_template>/member_uploadform.html
* templates/<your_template>/style.css
* templates/<your_template>/images/
1. Step -
At the very beginning of member.html insert:
<script type="text/javascript">
function popup() {
document.getElementById('overlay').style.display='block';
document.getElementById('popup').style.display='block';
}
</script>
<div id="overlay"></div>
<div id="popup"><span>Please wait while we process your request...
<br />
<br />
<br />
<img src="{template_url}/images/uploading.gif" width="128" height="15" /></span></div>
2. Step -
In member_uploadform.html find:
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" />
and replace with:
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" onClick= "popup();" />
3. Step -
In style.css insert at the end, or anywhere really - as long it goes after a set of closing brackets { } :
#overlay {
display: none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:145%;
background:#000;
opacity:0.32;
filter:alpha(opacity=32);
-moz-opacity:0.32;
z-index:14;
}
#popup {
display: none;
position:absolute;
top: 50%;
left: 50%;
height:150px;
width: 300px;
margin-left: -150px;
text-align:center;
border:1px solid #666666;
z-index:15;
background-color: #FFFFFF;
padding-top: 50px;
}
4. Step -
Add the attached uploading.gif into the images/ folder
That's it.
Cheers, Wayne