4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: waynenort on August 10, 2009, 01:09:17 PM
-
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. :D
Cheers, Wayne
-
... and what about the standard 4images-upload-animation, a java script ... ?
... I think this script will work in your <div id="popup"> and also for MSIE ...
-
Hi,
Mawenzi was a little bit faster. I tryied with FF3 and Safari for Apple and this ADDON only works, when I remove in css
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)";
Gruß
Ingo
-
Thanks for the reply mawenzi.
edit:
Wouldn't the standard animation added to the divs also freeze?....
:|
Cheers rinaldos - Hadn't tried it on a Mac yet,. thanks for the CSS pickup. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)"; has now been removed
-
... the standard 4images-upload-animation is'nt a gif-animation ...
... it is a animation based on a java-script, so it shouldn't freeze ...
... I think rinaldos has tested your popup with 4images-upload-animation, but "only" on a mac ... ;)
... so I will test it on a pc with msie ...
-
Thanks for the reply mawenzi.
edit:
Wouldn't the standard animation added to the divs also freeze?....
The only Problem is the black background. There is only a strip black, if you choose 145% or more there are no changes :-(
I have no Problem with freezing animated gif's .....
Gruß
-
... the java-script-animation don't work with <div> ...
... all images were now animated ... horrible ...
... and have you tested this : http://www.4homepages.de/forum/index.php?topic=14066.msg75838#msg75838 ... ?
-
... the java-script-animation don't work with <div> ...
... all images were now animated ... horrible ...
... and have you tested this : http://www.4homepages.de/forum/index.php?topic=14066.msg75838#msg75838 ... ?
Test the java-script-animation too, and it didn't work. :( - IE needs to fix their browser loading problem I think......
I originally had your mod installed on my website ([MOD] Progress Popup for Image Upload), but viewers had problems with the popup load window being blocked by their internet browser. Have tried to search and tried many work arounds for popup html windows with none of them working. So that why I tried making this loading progress window in divs........ You don't know how much I wanted to make your version work.
This is a good web page for customising progress gifs. http://www.ajaxload.info/ . Graphics can be such a personal thing. So that's why I create my own gif at ajaxload.... to suit my website.
Many thanks for testing my mod.
-
There is also a problem if you make your browser window small enough so you have to scroll down, then the progress box will be above the center...
Perhaps one of the solutions would be: automatically scroll page to the top?
-
Just a thought, but have you concidered just using a YUI Container Family ( http://developer.yahoo.com/yui/container/ ), especially the example for creating a loading panel: http://developer.yahoo.com/yui/examples/container/panel-loading.html
Since the Yahoo Interface Library handles the different browsers internal, this library will give you an out of the box mechanism to use modal dialogs.
Regards,
Bash-T
-
Thanks you the link Bash-T
I'll check it out
Cheers, Wayne
-
I still think that 4images need to integrate SWFUpload or any similar script.
As I said, I vote for SWFUpload:
http://demo.swfupload.org/v220/index.htm
PS: i tried to integrate it but without success :(
-
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: xxx: xxx: west-windxxx: /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.
I tryed swf objects insted of gif. Than it works ie6 and FF. But dont have any ideas about others... Thank you Wayne... for your codes. As you told the other ways is not good for the wisitors pop up problem. Please check my page how it works.
dekoreferans dot com