This is a migrated thread and some comments may be shown as answers.

[Solved] RadScriptManager + skel.js + IE

4 Answers 136 Views

ScriptManager and StyleSheetManager

This is a migrated thread and some comments may be shown as answers.

Eliott asked on 14 Jan 2014, 03:59 AM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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%;
        }

4 Answers, 1 is accepted

answered on 17 Jan 2014, 02:58 PM

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.

Accepted

answered on 22 Jan 2014, 03:27 PM

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.