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();

            }
        });

This should help you http://stackoverflow.com/q/1115767/2343488 — juliocesar, Nov 20 '13 at 00:04
what's the question? There is no `id="divIE7"` in the markup. Where's the code you use to either initialize or try to stop slider? really not much information given here — charlietfl, Nov 20 '13 at 00:07
@charlietfl i just simply wants if it is IE7 then 'divIE7' executes otherwise 'divNotIE7' — Ahmad Abbasi, Nov 20 '13 at 00:11
I suggest you don't auto initialize cycle using attributes and do it with code instead. Then use options in IE7 that allow it to work. Should be no problem running it in IE7 with proper option settings. Cycle has been around s long as IE7 has — charlietfl, Nov 20 '13 at 00:21
@charlietfl "the instruction at 0x6f8916e2 referenced memory at xxxxx memory could not be read" — Ahmad Abbasi, Nov 20 '13 at 00:32
that's not from developer tools errors. The cycle site demos work in IE7 fine, i just tried a few..find options that might be causing problem that you are using. Start with simple basic page with nothing but slides on it. No reason it shouldn't work — charlietfl, Nov 20 '13 at 00:35
@charlietfl this causing problem 'data-cycle-slides="> div.slideShowItem"' — Ahmad Abbasi, Nov 20 '13 at 00:37
well that's not valid html...try running cycle from code not attributes and play with options — charlietfl, Nov 20 '13 at 00:38

Win · Answer 1 · 2013-11-20T01:29:57.530

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>

is there no solution to do this in Javascript?? – Ahmad Abbasi Nov 20 '13 at 00:34 — Ahmad Abbasi, Nov 20 '13 at 00:34

score 0 · Answer 2 · answered Nov 20 '13 at 05:16

You can easily detect the IE version through javascript

   // This function returns Internet Explorer's major version number,
   // or 0 for others. It works by finding the "MSIE " string and
   // extracting the version number following the space, up to the decimal
   // point, ignoring the minor version number
   <SCRIPT LANGUAGE="JavaSCRIPT">
   function msieversion()
   {
      var ua = window.navigator.userAgent
      var msie = ua.indexOf ( "MSIE " )

      if ( msie > 0 )      // If Internet Explorer, return version number
         return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
      else                 // If another browser, return 0
         return 0

   }
   </SCRIPT>

thats not my question :( – Ahmad Abbasi Nov 20 '13 at 16:18 — Ahmad Abbasi, Nov 20 '13 at 16:18

Add different HTML according to the browser

2 Answers2

JavaScript