Author Topic: New style progress popup window for member upload  (Read 15770 times)

0 Members and 1 Guest are viewing this topic.

Offline waynenort

  • Newbie
  • *
  • Posts: 21
    • View Profile
New style progress popup window for member upload
« 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:
Code: [Select]
<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:
Code: [Select]
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" />and replace with:
Code: [Select]
<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 { } :
Code: [Select]
#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

« Last Edit: August 10, 2009, 02:01:48 PM by waynenort »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: New style progress popup window for member upload
« Reply #1 on: August 10, 2009, 01:21:10 PM »
... 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 ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: New style progress popup window for member upload
« Reply #2 on: August 10, 2009, 01:31:22 PM »
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
Code: [Select]
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)";

Gruß
Ingo

Offline waynenort

  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: New style progress popup window for member upload
« Reply #3 on: August 10, 2009, 01:41:38 PM »
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
« Last Edit: August 10, 2009, 02:02:45 PM by waynenort »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: New style progress popup window for member upload
« Reply #4 on: August 10, 2009, 02:11:54 PM »
... 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 ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: New style progress popup window for member upload
« Reply #5 on: August 10, 2009, 04:10:19 PM »
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ß

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: New style progress popup window for member upload
« Reply #6 on: August 10, 2009, 05:41:40 PM »
... 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 ... ?
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline waynenort

  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: New style progress popup window for member upload
« Reply #7 on: August 10, 2009, 11:36:11 PM »
... 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.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: New style progress popup window for member upload
« Reply #8 on: August 11, 2009, 03:52:29 AM »
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?
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline bash-t

  • Newbie
  • *
  • Posts: 20
    • View Profile
Re: New style progress popup window for member upload
« Reply #9 on: August 17, 2009, 11:14:59 PM »
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
4images Version: 1.7.7

Offline waynenort

  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: New style progress popup window for member upload
« Reply #10 on: August 22, 2009, 02:35:11 PM »
Thanks you the link Bash-T
I'll check it out

Cheers, Wayne

Offline Lucifix

  • Hero Member
  • *****
  • Posts: 710
    • View Profile
    • http://www.slo-foto.net
Re: New style progress popup window for member upload
« Reply #11 on: August 24, 2009, 05:15:10 PM »
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 :(

Offline karoas

  • Pre-Newbie
  • Posts: 2
    • View Profile
Re: New style progress popup window for member upload
« Reply #12 on: January 08, 2010, 01:11:56 AM »
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