locked
new to simulate a telerik button with standard html and css. RRS feed

  • Question

  • User-2146352328 posted

    https://imgur.com/a/RS6ZIlJ

    the mouse is hovered into the telerik control here and it turns orange. When I move out the mouse it turns normal again.

    This is a continuation from this thread: https://forums.asp.net/p/2153429/6253992.aspx

    Hi. I need to simulate a telerik Rad toolbar button. What this button does (see image) is when I hover the mouse it will orange up all the control.
    Initial I tried to get the source html (will write this) . What I was able to do was close to a simulation but I had an issue as the orang-ation was accomplished by inserting removing a class (that is what the control did). The issue here was that the control would lunch a bubble for and when that form closed I wasn't able to remove the class from my simulated control (with javascripr or jquery), i was like the control was losing all touch with the environment an no JS event would work.
    So now I am trying it with a label and an imagebutton pure html.
    Question is how can I do what the picture show: So hove will orange and leave,click etc will un-orange.

     <telerik:RadToolBarButton >
                    <ItemTemplate>
                        <table>
                            <tr style="vertical-align:middle;">
                                <td>
                                    <span onclick="OnClientButtonClickingTemplate(); return false;"onmouseover="" style="cursor: pointer;">Import Revenue</span>
                               
                                </td>
                                <td>                                 
                                    <asp:ImageButton ID="CmdUpload" runat="server" ImageUrl="~/Images/FileUp24.png"
                                         AlternateText="File Upload" ToolTip="Import Revenue"  OnClientClick="OnClientButtonClickingTemplate(); return false;"/>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadToolBarButton>   
    
                 
                    
                <telerik:RadToolBarButton  runat="server" Value="EXPORT" ImageUrl="~/Images/Filexls24.png" ToolTip="Export Revenue" Text="Export Revenue:" ImagePosition="Right"  >
                </telerik:RadToolBarButton>

    The original telerik:RadToolBarButton html was this below and the class that was orange de-orange was rtbItemHovered

    <telerik:RadToolBarButton PostBack="false" >
                    <ItemTemplate>
                           <table>
                            <tr  style="vertical-align: middle;">
                                  <td>
                                   <li class="rtbItem rtbBtn  '''''THIS IS WHERE THE CLASS WILL INSERT - REMOVE '''''''  "  onclick="OnClientButtonClickingTemplate(); return false;"  id="exceli"  ><a title="Import Revenue" class="rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><span class="rtbText">Import Revenue:</span><img alt="Import Revenue" src="../Images/Filexls24.png" class="rtbIcon"></span></span></span></a></li>
                                </td>             
                            </tr>
                             </ItemTemplate>
                </telerik:RadToolBarButton>

    I was trying to insert remove the class by using either the OnClientButtonClickingTemplate() (after the bubble - remove the class)
    I first tested that the class do indeed remove , with a test button so the code did work.

     function OnClientButtonClickingTemplate() {
                var oWnd = radopen("Gd.aspx", "Import Revenue File");
                oWnd.center();
                oWnd.show();
                //width and height of RadWindow
                oWnd.setSize(620, 260);
                oWnd.minimize();
                oWnd.maximize();
                oWnd.restore();
    
                var e = document.getElementById("exceli");
    
                if (e.className.match(/rtbItemHovered/)) {
                    alert(e)
                    e.className = e.className.replace("rtbItemHovered", "")
                }
    
    //// or I was using Jquery removeclass 
    
    
            }

    did not work.
    After that I saw an event on the telerik bubble and tried to run the javascript there:

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="True" Behaviors="Close, Move" OnClientPageLoad="OnClientPageLoad" OnClientClose="THIS IS THE EVENT I USED JAVASCRIPT">    
              <Windows>
                    <telerik:RadWindow ID="RadWindow1" runat="server" ShowContentDuringLoad="false" AutoSize="false"
                         Title="Telerik RadWindow" Behaviors="Close, Move" >
                    </telerik:RadWindow>
                </Windows>  
        </telerik:RadWindowManager>

    Again did not work.

    So anyhow, the main thing is to fix the first code block I post here to be similar to the orange telerik control. Any thoughts?

    What comes in mind is create a css that will handle the mouse hover , leave , and I am not sure if css can handle the click event and set, somehow a transparent color on the span and image. The image may be change to a similar orange image but I don't know about the span. The span is not a complete rectangle - orthogonal as the image is so I need somehow to get a border of the span (or not use span at all and use a border css control? ) and set the orange.

    Not sure on the approach. If you at least have any advice on the control I need to use and how to initial an event on the mouse hover,leave,click , that would be a start. Ah and how to transparent the orange (there is a transparent property I believe in css)

    thanks.

    Friday, March 8, 2019 1:49 PM

Answers

  • User475983607 posted

    sapator

    I'm aware of the developert tools look.

    I have posted this but as I've said, the control add and removed the class. I can't add the telerik control because it does not have an onclientclick client side option.

    Thanks.

    The OnClientClick is a server control property that adds the onclick attribute to markup.  For example, this ASPX markup...

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HelloWorld()"/>

    ...produces this HTML

    <input type="submit" name="Button1" value="Button" onclick="HelloWorld();" id="Button1">

    It's not clear why or how the onclick handler is related to adding or removing a CSS class.  Can you clarify? Can you provide sample code that illustrates what you are trying to do exactly?

    sapator

    I am forced to use another image control that has a client event. So doing so need to insert - remove a class on hover and on mouseleave - mouseclick  etc.

    What do you mean "forced to use another image"? Are you referring to a old-school rollover image affect where mouse over and out toggles between images?  Are you trying to craft an image rollover affect?  Can you share your source code?

    sapator

    This is not working a the JS is not initiated after the telerik bubble takes over. It's like the control is deactivated on any client participation if the bubble shows.

    What is not working?  As I understood your original question, you wanted to simulate Telerik UI.  It seems however, that you are not simulating the Telerik UI but trying to override the Telerik UI.

    Again, you have the Telerik JS and CSS source code.  Read the source to understand how it works.  If the source is difficult to read because it it minified, then contact Telerik support and see if they can provide the source.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 8, 2019 4:26 PM
  • User839733648 posted

    Hi sapator,

    Question is how can I do what the picture show: So hove will orange and leave,click etc will un-orange.

    This is easy to use pure Css to realize. You just have to set the background-color to the button in the hover class.

    Here is a demo.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            button, html input[type="button"], input[type="reset"], input[type="submit"] {
                -webkit-appearance: button;
                cursor: pointer;
            }
    
            .btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }
    
            .btn-default {
                color: #333;
                background-color: grey;
                border-color: #ccc;
            }
    
    
            .btn:hover {
                background-image: none !important;
                background-color: orange !important;
            }
    
    
            .btn-lg, .btn-group-lg > .btn {
                padding: 13px 16px;
                font-family: futura_maxi_cg_demiregular,tahoma, arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                line-height: 18px;
                border-radius: 6px;
            }
    
            .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
                -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
            }
    
            .btn-default {
                /* text-shadow: 0 1px 0 #fff; */
                background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
                background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
                background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                background-repeat: repeat-x;
                border-color: #dbdbdb;
                border-color: #ccc;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type='button' class='btn btn-default btn-lg' value='test' />
            </div>
        </form>
    </body>
    </html>
    

    result:

    I do not test with telerik becasue it is a third party charging plugin.

    Maybe your issue is related to this plugin.

    If you try the pure css code and still have questions, I suggest that you could  go to that official community for help https://community.progress.com/ .

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 13, 2019 9:57 AM

All replies

  • User475983607 posted

    Either contact Telerik support to see if they can provide the CSS and JS source code.  Or simply use the browser's developer tools to View the CSS and JavaScript loaded and running on the page. 

    Frankly, the dev tools should be more than enough as it shows not only the CSS but you can link to the actual CSS file by line number.

    Friday, March 8, 2019 3:01 PM
  • User-2146352328 posted

    I'm aware of the developert tools look.

    I have posted this but as I've said, the control add and removed the class. I can't add the telerik control because it does not have an onclientclick client side option.

    I am forced to use another image control that has a client event. So doing so need to insert - remove a class on hover and on mouseleave - mouseclick  etc.

    This is not working a the JS is not initiated after the telerik bubble takes over. It's like the control is deactivated on any client participation if the bubble shows.

    Thanks.

    Friday, March 8, 2019 3:33 PM
  • User475983607 posted

    sapator

    I'm aware of the developert tools look.

    I have posted this but as I've said, the control add and removed the class. I can't add the telerik control because it does not have an onclientclick client side option.

    Thanks.

    The OnClientClick is a server control property that adds the onclick attribute to markup.  For example, this ASPX markup...

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HelloWorld()"/>

    ...produces this HTML

    <input type="submit" name="Button1" value="Button" onclick="HelloWorld();" id="Button1">

    It's not clear why or how the onclick handler is related to adding or removing a CSS class.  Can you clarify? Can you provide sample code that illustrates what you are trying to do exactly?

    sapator

    I am forced to use another image control that has a client event. So doing so need to insert - remove a class on hover and on mouseleave - mouseclick  etc.

    What do you mean "forced to use another image"? Are you referring to a old-school rollover image affect where mouse over and out toggles between images?  Are you trying to craft an image rollover affect?  Can you share your source code?

    sapator

    This is not working a the JS is not initiated after the telerik bubble takes over. It's like the control is deactivated on any client participation if the bubble shows.

    What is not working?  As I understood your original question, you wanted to simulate Telerik UI.  It seems however, that you are not simulating the Telerik UI but trying to override the Telerik UI.

    Again, you have the Telerik JS and CSS source code.  Read the source to understand how it works.  If the source is difficult to read because it it minified, then contact Telerik support and see if they can provide the source.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 8, 2019 4:26 PM
  • User-2146352328 posted

    Hi.

    OnClientButtonClickingTemplate() {
                var oWnd = radopen("Gd.aspx", "Import Revenue File"); ...

    This will use the radwindowsmanager to open up a bubble - popup.

    From the time the bubble opens up I can't get any client markup events on the background of the main page (the page that I clicked to open the bubble) (I guess a simulated open of Gd.aspx is happening and so I'm currently on another page.

    But even on the onclose event of this bubble I can't get any markup of the main page. The is the main issue because if I use a test client button on the main page I can control the add and remove of the class without an issue.

    So pretty much I can add remove the class on rollover and I can get the effect working. So by saying "not working" I mean I cannot fire a client side event when I close the bubble.

    If I have some code on the control (after the bubble closes) that removes the orange background on rollover or hover or click or whatever then it will work fine after the bubble close but will NOT work on the closing event of the bubble.

    I guess I could add a timer and somehow see if the bubble is still open. Haven't tried but I wanted to see if the simulation can be done with simple controls so I don't have to add remove a class. Still, now that I think of it, even if I use another control, that control will still open up the bubble so I will still not get a trigger event on closing the bubble.

    I'm not sure if I'm explaining this correctly. Then main issue is no client side event fires on bubble closing. If this is a bug or I need to ask telerik then fine by me but I just wanted to make sure that this is indeed an issue before I go on that road.

    Thanks,

    Tuesday, March 12, 2019 3:12 PM
  • User839733648 posted

    Hi sapator,

    Question is how can I do what the picture show: So hove will orange and leave,click etc will un-orange.

    This is easy to use pure Css to realize. You just have to set the background-color to the button in the hover class.

    Here is a demo.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            button, html input[type="button"], input[type="reset"], input[type="submit"] {
                -webkit-appearance: button;
                cursor: pointer;
            }
    
            .btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }
    
            .btn-default {
                color: #333;
                background-color: grey;
                border-color: #ccc;
            }
    
    
            .btn:hover {
                background-image: none !important;
                background-color: orange !important;
            }
    
    
            .btn-lg, .btn-group-lg > .btn {
                padding: 13px 16px;
                font-family: futura_maxi_cg_demiregular,tahoma, arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                line-height: 18px;
                border-radius: 6px;
            }
    
            .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
                -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
            }
    
            .btn-default {
                /* text-shadow: 0 1px 0 #fff; */
                background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
                background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
                background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                background-repeat: repeat-x;
                border-color: #dbdbdb;
                border-color: #ccc;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type='button' class='btn btn-default btn-lg' value='test' />
            </div>
        </form>
    </body>
    </html>
    

    result:

    I do not test with telerik becasue it is a third party charging plugin.

    Maybe your issue is related to this plugin.

    If you try the pure css code and still have questions, I suggest that you could  go to that official community for help https://community.progress.com/ .

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 13, 2019 9:57 AM
  • User-2146352328 posted

    Hello Jenifer.

    Does not seem to work when I integrate it with the telerik controls - bubble.

    Currently I left the container without using a color and I will ask the forums if we absolutely need to implement this.

    I will mark as revolved because it works outside of a telerik bubble .

    Thanks.

    Thursday, March 14, 2019 1:46 PM