Using Uploadify In Custom Server Control
-
I'm developing an Asp.Net image placeholder control. When the user hovers the mouse over the image, a toolbar fades in at the top and give the user the option to: upload a different image, change the comments for the image, or revert back to the default avatar. I've based the upload control on Uploadify. Everything about this control is working great except one problem. Explanation: When the image is first loaded on the page, the embedded toolbar's css sets the display to: none. Once the user hovers over the image, the toolbar containing the Uploadify control is faded in using jQuery: '.fadeIn()'. After the upload, on the onAllComplete event, the toolbar is faded out using jQuery: 'fadeOut()', Problem: Uploadify does not perform uploads after the first initial upload "when the .fadeOut() method is called on the the toolbar! If the container remains visible, uploads execute just fine. By the way, the .fadeIn(), .fadeOut() methods can be called "before" any uploads, and there is no error. The culprit seems to be the "post upload" .fadeOut() method. Can anyone help with this issue? I can simply embed the toolbar as a permanent fixture to the image placeholder, but it has a much more professional appeal with the fade effects. Here some bare bones code that will re-create the problem:
//------------ HTML Header Code -----------------------------
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader': '/uploadify.swf',
'script': '/Handler1.ashx',
'folder': '/uploads',
'onAllComplete': function() {
if (window.frozenImageEditorToolBar) {
$(window.frozenImageEditorToolBar).removeAttr('freeze'); $(window.frozenImageEditorToolBar).fadeOut();
window.frozenImageEditorToolBar = false;
}
}
});$('#container').mouseenter(function() {
$('#toolbar').fadeIn();
});
$('#container').mouseleave(function() {
if (!$('#toolbar').hasAttr('freeze')) -
I'm developing an Asp.Net image placeholder control. When the user hovers the mouse over the image, a toolbar fades in at the top and give the user the option to: upload a different image, change the comments for the image, or revert back to the default avatar. I've based the upload control on Uploadify. Everything about this control is working great except one problem. Explanation: When the image is first loaded on the page, the embedded toolbar's css sets the display to: none. Once the user hovers over the image, the toolbar containing the Uploadify control is faded in using jQuery: '.fadeIn()'. After the upload, on the onAllComplete event, the toolbar is faded out using jQuery: 'fadeOut()', Problem: Uploadify does not perform uploads after the first initial upload "when the .fadeOut() method is called on the the toolbar! If the container remains visible, uploads execute just fine. By the way, the .fadeIn(), .fadeOut() methods can be called "before" any uploads, and there is no error. The culprit seems to be the "post upload" .fadeOut() method. Can anyone help with this issue? I can simply embed the toolbar as a permanent fixture to the image placeholder, but it has a much more professional appeal with the fade effects. Here some bare bones code that will re-create the problem:
//------------ HTML Header Code -----------------------------
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader': '/uploadify.swf',
'script': '/Handler1.ashx',
'folder': '/uploads',
'onAllComplete': function() {
if (window.frozenImageEditorToolBar) {
$(window.frozenImageEditorToolBar).removeAttr('freeze'); $(window.frozenImageEditorToolBar).fadeOut();
window.frozenImageEditorToolBar = false;
}
}
});$('#container').mouseenter(function() {
$('#toolbar').fadeIn();
});
$('#container').mouseleave(function() {
if (!$('#toolbar').hasAttr('freeze'))Looks like a programming mistake the attr freeze is used to indicate activity, on 1 line, the attr is completely removed, so you can't set the freeze again because it's gone. // Freeze is set to 1
$(this).attr('freeze', '1');
// The attr is deleted
if (window.frozenImageEditorToolBar) {
$(window.frozenImageEditorToolBar).removeAttr('freeze'); $(window.frozenImageEditorToolBar).fadeOut();
window.frozenImageEditorToolBar = false;
}
}
});Freeze should be set to 0