Add different HTML according to the browser

Question

I am using Slider in my webApp but it crashes in IE7, so i want to stop slider in IE7. Here is the ASPX code

<div id="divIE7">
    <section class="masterbanner cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-slides="> div.slideShowItem" data-cycle-auto-height="calc" data-cycle-log="false" data-cycle-pause-on-hover="true" data-cycle-manual-speed="0">
                    <asp:Literal runat="server" ID="lSlideShow" />
                    <div class="cycle-pager"></div>
                </section>
</div>

i have to check if its IE7, then my ASPX should

<div id="divNotIE7">
     <section class="masterbanner cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-auto-height="calc" data-cycle-log="false" data-cycle-pause-on-hover="true" data-cycle-manual-speed="0">
                    <asp:Literal runat="server" ID="lSlideShowIE7" />
                    <div class="cycle-pager"></div>
                </section>
</div>

i try this script but the problem is still there.

$(document).ready(function () {
            var divIE7 = document.getElementById('divIE7');
            var divOther = document.getElementById('divNotIE7');
            if (CheckBrowserIE7()) {
                //$('divNotIE7').not('#content').remove();
                divIE7.style.display = 'none';
                divOther.style.display = 'block';;
            }
            else {
                divIE7.style.display = 'block';
                divOther.style.display = 'none';
                //$('divIE7').not('#content').remove();

            }
        });

Answer 1

You can detect the IE7 Browser from code behind.

<asp:Panel runat="server" ID="IE7Panel" Visible="False">
    <section class="masterbanner cycle-slideshow" 
        data-cycle-fx="tileSlide" 
        data-cycle-slides="> div.slideShowItem" 
        data-cycle-auto-height="calc" 
        data-cycle-log="false" 
        data-cycle-pause-on-hover="true" 
        data-cycle-manual-speed="0">
        <asp:Literal runat="server" ID="lSlideShow" />
        <div class="cycle-pager"></div>
    </section>
</asp:Panel>
<asp:Panel runat="server" ID="NotIE7Panel" Visible="False">
    <section class="masterbanner cycle-slideshow" 
        data-cycle-fx="tileSlide" 
        data-cycle-auto-height="calc" 
        data-cycle-log="false" 
        data-cycle-pause-on-hover="true" 
        data-cycle-manual-speed="0">
        <asp:Literal runat="server" ID="lSlideShowIE7" />
        <div class="cycle-pager"></div>
    </section>
</asp:Panel>

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.Browser == "IE" && 
        Request.Browser.MajorVersion < 8)
    {
        IE7Panel.Visible = true;                
    }
    else
    {
        NotIE7Panel.Visible = true;
    }
}

JavaScript

I only have Kendo UI Web which is open source under GPL v3.

Demo at jsfiddle

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (kendo.support.browser.msie && kendo.support.browser.version == 7) {
            alert('This is IE 7.');
        } else {
            alert('This is other browser.');
        }
    });
</script>