Support forums » Products » Ajax Uploader » Re: Hover/Action CSS for AjaxUploader InsertButton

Hover/Action CSS for AjaxUploader InsertButton

Last post 11-06-2012, 6:13 AM by Kenneth. 6 replies.
Sort Posts: Previous Next

  •  11-01-2012, 10:43 AM 75134

    Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Hey,

     

    I'm trying to add custom css to the hover and action for the ajax uploader insert button. Although the application is functioning correctly, the button just doesn't  have the same look or feel as any of the other buttons in the application. It doens't highlight when hovered over or depress when clicked.

     

    I currently have the InsertButtonID referencing a button id within the application and I'm able to apply some styling to the button. For example, I'm able to change the background color or text color, but only staticly. I'm unable to apply any styling to the button on dynamic events (hover,action etc.)

     

    Is there any fix for this?

     

    Thanks for your help,

    Adam 

  •  11-02-2012, 8:06 AM 75137 in reply to 75134

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Hi AGregory,

     

    The uploader control has 4 upload modes, html5,silverlight,flash,iframe. The hover css style setting only work under html5 and iframe mode. 

     

    Please try the example below, if load as html5 or iframe mode, the button will apply the  .UploadButton:hover style setting. If load as silverlight or flash mode, then it will apply the setting in API "CuteWebUI_AjaxUploader_OnMantleButton"

     

    1. <%@ Page Language="C#" Title="Customize the queue UI" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <style>  
    8.         .UploadButton:hover  
    9.         {  
    10.             color: Red;  
    11.         }  
    12.     </style>  
    13. </head>  
    14. <body>  
    15.     <form id="Form1" runat="server">  
    16.     <div>  
    17.         <CuteWebUI:UploadAttachments runat="server" ID="uploader1" InsertButtonID="myUpload">  
    18.         </CuteWebUI:UploadAttachments>  
    19.         <input type="button" id="myUpload" value="upload a file" class="UploadButton" />  
    20.     </div>  
    21.     </form>  
    22. </body>  
    23. </html>  
    24. <script type="text/javascript">  
    25.     function CuteWebUI_AjaxUploader_OnMantleButton(btn, div) {  
    26.         // for flash and silverlight mode here  
    27.         div.onmouseover = function () {  
    28.             btn.style.color = "blue";  
    29.         }  
    30.     }  
    31.   
    32. </script>  
     

    Regards,

     

    Ken 

  •  11-02-2012, 9:23 AM 75139 in reply to 75137

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Thanks for your help Ken. I was able to solve my problem.

    Adam 

  •  11-02-2012, 10:34 AM 75140 in reply to 75139

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    How can I change the cursor image to the pointer onmouseover? I'm only able to write css which affects the button object. 

    Is it possible to change the cursor image? 

  •  11-05-2012, 6:17 AM 75148 in reply to 75140

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Hi AGregory,

     

    You can set in the button directly

     

      <input type="button" id="myUpload" value="upload a file" class="UploadButton" style="cursor: pointer" /> 

     

    Regards,

     

    Ken 

  •  11-05-2012, 9:46 AM 75152 in reply to 75148

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Thanks for your help, but this doesn't seem to work for me.

     

    The following code works and applies the style to the upload button:

  • <ext:Button Height="24" IDMode="Static" ID="UploadButton" runat="server" Text="Upload" IconCls="diskUploadIcon uploadButtonIconAlignment" style="margin-left: 20px" /> 

    •  

    But I cannot change the cursor in the same way. This code does not work:

  • <ext:Button Height="24" IDMode="Static" ID="UploadButton" runat="server" Text="Upload" IconCls="diskUploadIcon uploadButtonIconAlignment" style="cursor: pointer" /> 

    •  

    Any idea what could be going wrong?

     

    Adam 

  •  11-06-2012, 6:13 AM 75158 in reply to 75152

    Re: Hover/Action CSS for AjaxUploader InsertButton

    Reply Quote

    Hi AGregory,

     

    Please try the example below, does it work for you?

     

    1. <%@ Page Language="C#" Title="Customize the queue UI" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7. </head>  
    8. <body>  
    9.     <form id="Form1" runat="server">  
    10.     <div>  
    11.         <CuteWebUI:UploadAttachments runat="server" ID="uploader1" InsertButtonID="UploadButton">  
    12.         </CuteWebUI:UploadAttachments>  
    13.         <asp:Button Height="24" IDMode="Static" ID="UploadButton" runat="server" Text="Upload"  
    14.             IconCls="diskUploadIcon uploadButtonIconAlignment" Style="cursor: pointer" />  
    15.     </div>  
    16.     </form>  
    17. </body>  
    18. </html>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML