4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
September 27, 2016, 07:23:33 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Requests & Discussions) (Moderators: mawenzi, Rembrandt)
| | |-+  New style progress popup window for member upload
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Author Topic: New style progress popup window for member upload  (Read 9042 times)
waynenort
Newbie
*
Offline Offline

Posts: 21

Thank You
-Given: 0
-Receive: 1


View Profile
« 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:
1
2
3
4
5
6
7
8
9
10
11
12
<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:
1
<input type="submit" name="uploadbutton" value="{lang_submit}" class="button" />
and replace with:
1
<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 { } :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#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.  Very Happy

Cheers, Wayne


* uploading.gif (3.86 KB - downloaded 149 times.)

Follow members gave a thank to your post:
karoas

For this post, 1 member gave a thank you!
« Last Edit: August 10, 2009, 02:01:48 PM by waynenort » Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ...
Logged

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
« 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
1
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=32)";

Gruß
Ingo
Logged
waynenort
Newbie
*
Offline Offline

Posts: 21

Thank You
-Given: 0
-Receive: 1


View Profile
« 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?....

 Neutral



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 » Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ... Wink
... so I will test it on a pc with msie ...
Logged

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
« 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 Sad 
I have no Problem with freezing animated gif's .....

Gruß
Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ... ?
Logged

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) ...
waynenort
Newbie
*
Offline Offline

Posts: 21

Thank You
-Given: 0
-Receive: 1


View Profile
« 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.  Sad   - 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.
Logged
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 562

mmm PHP...


View Profile WWW
« 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?
Logged

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)
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« 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
Logged

4images Version: 1.7.7
waynenort
Newbie
*
Offline Offline

Posts: 21

Thank You
-Given: 0
-Receive: 1


View Profile
« Reply #10 on: August 22, 2009, 02:35:11 PM »

Thanks you the link Bash-T
I'll check it out

Cheers, Wayne
Logged
Lucifix
Hero Member
*****
Offline Offline

Posts: 710

Thank You
-Given: 8
-Receive: 15


View Profile WWW
« 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 Sad
Logged

karoas
Pre-Newbie

Offline Offline

Posts: 2

Thank You
-Given: 1
-Receive: 0


View Profile
« 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
Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.285 seconds with 23 queries.
Post your comments here