dcsimg
Results 1 to 7 of 7

Thread: [RESOLVED] Need to simulate a control

  1. #1

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,459

    Resolved [RESOLVED] Need to simulate a control

    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.
    So
    Code:
       <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

    Code:
    <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.
    Code:
     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:

    Code:
     <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)

    Name:  Clipboard01.jpg
Views: 87
Size:  13.1 KB
    the mouse is hovered into the telerik control here and it turns orange. When I move out the mouse it turns normal again.

    thanks.
    Slow as hell.

  2. #2

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,459

    Re: Need to simulate a control

    Here is what I can make out of the class:
    Full:
    Code:
    element.style {
    }
    .RadToolBar_Glow_Horizontal .rtbItem {
        margin-left: 5px;
    }
    .RadToolBar_Horizontal .rtbItem {
        margin: 0 0 0 2px;
    }
    .RadToolBar_Horizontal .rtbUL, .RadToolBar_Horizontal .rtbItem, .RadToolBar_Horizontal .rtbTemplate, .RadToolBar_Horizontal .rtbSeparator {
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    user agent stylesheet
    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }
    .RadToolBar .rtbUL {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    user agent stylesheet
    ul, menu, dir {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .RadToolBar_Glow {
        color: #e2e8eb;
        background-color: #1c262c;
        font-size: 13px;
        line-height: 20px;
        font-family: Arial,Helvetica,sans-serif;
    }
    .RadToolBar {
        margin: 0;
        padding: 0;
        text-align: left;
        white-space: nowrap;
        cursor: default;
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    rtbItemHovered class (orangator)

    Code:
    element.style {
    }
    user agent stylesheet
    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }
    .RadToolBar .rtbUL {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    user agent stylesheet
    ul, menu, dir {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .RadToolBar_Glow {
        color: #e2e8eb;
        background-color: #1c262c;
        font-size: 13px;
        line-height: 20px;
        font-family: Arial,Helvetica,sans-serif;
    }
    .RadToolBar {
        margin: 0;
        padding: 0;
        text-align: left;
        white-space: nowrap;
        cursor: default;
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    Slow as hell.

  3. #3
    Registered User
    Join Date
    Mar 2019
    Posts
    1

    Re: Need to simulate a control

    Quote Originally Posted by sapator View Post
    Here is what I can make out of the class:
    Full:
    Code:
    element.style {
    }
    .RadToolBar_Glow_Horizontal .rtbItem {
        margin-left: 5px;
    }
    .RadToolBar_Horizontal .rtbItem {
        margin: 0 0 0 2px;
    }
    .RadToolBar_Horizontal .rtbUL, .RadToolBar_Horizontal .rtbItem, .RadToolBar_Horizontal .rtbTemplate, .RadToolBar_Horizontal .rtbSeparator {
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    user agent stylesheet
    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }
    .RadToolBar .rtbUL {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    user agent stylesheet
    ul, menu, dir {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .RadToolBar_Glow {
        color: #e2e8eb;
        background-color: #1c262c;
        font-size: 13px;
        line-height: 20px;
        font-family: Arial,Helvetica,sans-serif;
    }
    .RadToolBar {
        margin: 0;
        padding: 0;
        text-align: left;
        white-space: nowrap;
        cursor: default;
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }
    rtbItemHovered class (orangator)

    Code:
    element.style {
    }
    user agent stylesheet
    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }
    .RadToolBar .rtbUL {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    user agent stylesheet
    ul, menu, dir {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .RadToolBar_Glow {
        color: #e2e8eb;
        background-color: #1c262c;
        font-size: 13px;
        line-height: 20px;
        font-family: Arial,Helvetica,sans-serif;
    }
    .RadToolBar {
        margin: 0;
        padding: 0;
        text-align: left;
        white-space: nowrap;
        cursor: default;
        vertical-align: middle;
        display: inline-block;
        *display: inline;
        zoom: 1;
    Great job! Thanks for sharing!

  4. #4

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,459

    Re: Need to simulate a control

    Actually it's the source view from the browser but... thanks(?) :P
    Slow as hell.

  5. #5
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Java (JSP) Hell!
    Posts
    5,337

    Re: Need to simulate a control

    Hi
    Have a look at css in combination with a checkbox (you style the label, the checkbox gets hidden) and the css can depend on the state of the check box loading one or the other image...
    If you require images.
    Or it can do the alpha on the element... Or colours... or put a child element invisible initially etc...

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...

  6. #6

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,459

    Re: Need to simulate a control

    Saw some checkbox sample requered to add - wrap a div or add a label and "image" the checkbox to a color. However this will just insert an Image so I have to create colored image with the description in it. OK no problem but I just wondering if somehow it is possible to say, have a label and create a rectangle around it (or just a span with divs) .

    The code i have for checkbox testing is this:

    Code:
    ''CSS
    
    input[type=checkbox] {
        display:none;
    }
    
    input[type=checkbox] + label {
        display:inline-block;
        padding: 0 0 0 0px;
        background:url("http://whiteimage") no-repeat;
        height: 125px;
        width: 125px;;
        background-size: 50%;
    }
    
    input[type=checkbox]:checked + label {
        background:url("http://orangeimage") no-repeat;
        height: 125px;
        width: 125px;
        display:inline-block;
        background-size: 50%;
    }
    
    ''markup 
    <input type="checkbox" name="checkBox1" id="myid" value="Ford">
    <label for="mylabel"></label>
    Slow as hell.

  7. #7

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    5,459

    Re: Need to simulate a control

    This is the closet I can get.
    Code:
      <style>
    
               
    
            .btn {
                display: inline-block;
                padding: 1px 1px;
                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: #CD8100 !important;
                 color:#713600;
            }
    
    
            .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);
            }
    
            /* #1c262c;*/
    
            .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>
    
    .....
     <telerik:RadToolBarButton >
                    <ItemTemplate>
                        <table>
                            <tr style="vertical-align:middle;">
                                <td>
                                    <span onclick="OnClientButtonClickingTemplate(); return false;"onmouseover="" style="cursor: pointer;" id="btn" class="btn" title="Import Revenue">&nbsp Import Revenue  <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/FileUp24.png"
                                         AlternateText="File Upload" ToolTip="Import Revenue"  OnClientClick="OnClientButtonClickingTemplate(); return false;" CssClass="btn"/> &nbsp</span>
                               
                                </td>
                                <td>                                 
                                    <!-- the above imagebutton was here before with no class also the above span had no class (for color fixes) class 'btn' -->
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
    Slow as hell.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width