RadScriptManager + skel.js + IE

5 posts, 1 answers
  1. Eliott
    Eliott avatar
    4 posts
    Member since:
    Feb 2012

    Posted 13 Jan 2014 Link to this post

    I am trying to combine skel.js (http://skeljs.org) and the panels plugin with telerik controls - I cannot seem to get the two on the same page in IE without a java script error occurring. If I isolate each of the items on the page they both will work without one another, but as soon as I add a RadScriptManager to the page with the panels it causes the panels to not function. The results in Chrome, Firefox and Safari all seem to work with no problems, the problem only arises with IE 10.

    My Index.aspx

    <!DOCTYPE html>
    <head>
        <title></title>
        <script src="/scripts/js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="/scripts/js/skel.min.js" type="text/javascript"></script>
        <script src="/scripts/js/skel-panels.min.js" type="text/javascript"></script>
        <script src="/scripts/js/skel-init.js" type="text/javascript"></script>
     
    </head>
    <body>
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        <Groups>
            <telerik:ScriptReferenceGroup>
                <Scripts>
                </Scripts>
            </telerik:ScriptReferenceGroup>
        </Groups>
    </telerik:RadScriptManager>
        <div id="leftPanel" style="background-color:grey">
            <div>Left Panel</div>
        </div>
        <div id="rightPanel" style="background-color:grey">
            <div>Right Panel</div>
                     
     
        </div>
    </body>
    </html>

    The following is my skel-init.js
    var settings = {
     
        skelJS: {
            prefix: '/styles/css/style',
            resetCSS: true,
            normalizeCSS: true,
            boxModel: 'border',
            grid: {
                gutters: 40
            },
            breakpoints: {
                'widest': { range: '1680-', hasStyleSheet: false, containers: 1400 },
                'wide': { range: '-1680', containers: 1200 },
                'normal': { range: '-1280', containers: 'fluid', grid: { gutters: 36 }, viewportWidth: 1140 },
                'narrow': { range: '-960', containers: 'fluid', grid: { gutters: 32 } },
                'narrower': { range: '-840', containers: 'fluid', grid: { gutters: 32, collapse: true } },
                'mobile': { range: '-640', containers: 'fluid', grid: { gutters: 32, collapse: true } }
            }
        },
     
        skelJSPlugins: {
            panels: {
                panels: {
                    leftPanel: {
                        position: 'left',
                        size: 250,
                        style: 'push',
                        swipeToClose: 'true'
                    },
                    rightPanel: {
                        position: 'right',
                        size: 250,
                        style: 'push',
                        swipeToClose: 'true'
                    }
                },
     
                overlays: {
                    leftButton: {
                        position: 'top-left',
                        width: 100,
                        height: 50,
                        html: '<div class="toggle" data-action="togglePanel" data-args="leftPanel"></div>'
                    },
     
                    rightButton: {
                        position: 'top-right',
                        width: 100,
                        height: 50,
                        html: '<div class="toggle" data-action="togglePanel" data-args="rightPanel"></div>'
                    }
                }
            }
        }
    }
    skel.init(settings.skelJS, settings.skelJSPlugins);
    My style.css
        div.toggle
        {
            position: absolute;
            left: 0;
            top: 10px;
            width: 100%;
            height: 100%;
        }
             
        div.toggle:before
        {
            content:"";
            display: block;
            width: 60px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            background: center center no-repeat, rgba(25, 25, 25, .90);
            border-top: 0;
            border-radius: 0.35em 0.35em 0.35em 0.35em;
        }
     
            #leftPanel
        {
            position: relative;
            background: #1f1920;
            box-shadow: inset 0px -2px 5px 0px rgba(0,0,0,0.25);
            font-size: .8em;
            color:white;
             
     
        }
    .photo {
        width: 115px;
        height: 150px;
        background-color: white;
        display: inline-block;
        margin: 5px 5px 5px 5px;
        border-radius: 5px;
        border: 1px solid black;
    }
    .info{
        width: 115px;
        height:150px;
        display: inline-block;
        font-size: 1.15em;
        margin: 5px 5px 5px 5px;
        border: 1px solid grey;
        float: right;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, .15)
    }
    .status{
        padding: .25em .25em .25em .25em;
        border-bottom: 1px solid grey;
     
    }
            #leftPanel:before
            {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 17 Jan 2014 Link to this post

    Hello, Eliott.

    On my end things worked perfectly with IE 10. I also tested with IE 11, 9, 8 and 7. In IE7-8 nothing works with or without the script manager, but the rest of the browsers are fine. Am I missing anything?

    Regards,
    Ivan Zhekov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eliott
    Eliott avatar
    4 posts
    Member since:
    Feb 2012

    Posted 17 Jan 2014 Link to this post

    Thanks Ivan, hopefully this problem is just my computer, I am going to do some more testing today on a few other devices. I have found some more information though and have a video posted here - http://www.screencast.com/t/pgymRhAqNB - showing what happens.
    It appears that when there is a <script> tag above the elements that get moved this happens. telerik support has been very helpful in getting me to this point. I contacted the developer of skelJS and he suggested wrapping the script contents in the jQuery ready function but that did not seem to help either. If there is a script tag on the page above those divs, intermittently the <div> tags don't get relocated to the panels. So as of now I don't think that it's a problem with the telerik RadScriptManager or with skelJS - I need to do some more research to narrow down the issue. Thank you for your help with this.
  5. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 22 Jan 2014 Link to this post

    Hello, Eliott.

    It was quite hard producing the issue locally, let alone debug it. As far as Skel was concerned -- it has initialized (at least internally), but the artifacts remain...

    The only solution I found was to add the following at the end of the page:

    <script type="text/javascript">
    Sys.Application.add_load(function () {
        skel.init(settings.skelJS, settings.skelJSPlugins);
    });
    </script>

    Note: for that to work you need either asp:scriptmanger or telerik:scriptmanager (or any script manager) on the page.

    That re-initializes skel and the issue is gone. Note it does take some time before this event is loaded so it might not be the best solution...

    As for why the issue is happening -- I am still clueless. I only know it's not related to RadScriptManager, because I was able to produce the same issue with asp script manager.

    Regards,
    Ivan Zhekov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Eliott
    Eliott avatar
    4 posts
    Member since:
    Feb 2012

    Posted 26 Jan 2014 Link to this post

    Thanks for your help Ivan.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017