html - JavaScript not working in compatibility mode in IE -
i have basic idea in java script.i got template , sample java script site. tried rotate images background of page working fine in browser except ie compatibility mode.i working in sap portal development here compatability mode must.so here stuck,please give idea overcome problem.i used pie.htc overcome css3 support.there option there javascript support.
css file:
#slideshow { position:relative; height:350px; z-index:-1; } #slideshow img { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow img.active { z-index:10; opacity:1.0; } #slideshow img.last-active { z-index:9; } #slideshow img { /* set rules fill background */ min-height: 100%; min-width: 1024px; /* set proportionate scaling */ width: 100%; height: auto; /* set positioning */ position: fixed; top: 0; left: 0; } @media screen , (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } #page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: #fff; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font-size:14px; margin: 2px 2px 10px 5px; color: black; } #content { width: 1100px; height:700px; margin: 0 auto; background: rgba(11,11,11, 0.5); padding: 10px; } h1 { font-family: 'arial'; font-size:14px; color: black; padding:6px 6px; } #content { color: #a82711; font-weight: bold; text-transform: uppercase; background: #000; padding: 10px; } #bod{ width: 1100px; height:900px; margin: 0 auto; margin-bottom:10px; padding: 5px; box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset; -webkit-box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset; -moz-box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset; color: #666666; font-family: arial,serif; font-size: 15px; border-radius: 2px 2px 2px 2px; } jsp file
<!doctype html > <meta http-equiv="x-ua-compatible" content="ie=emulateie7"> <%@ taglib uri="/saplogon" prefix="sap" %> <jsp:usebean id="logonlocale" class="com.sap.engine.applications.security.logon.beans.resourcebean" scope="request"/> <% string webpath = (string) request.getattribute("logon.application.real.path"); %> <% boolean isrtlmode = false; boolean uiframevisible = true; string uiframeallign = "center"; string uiframetopmargin = "margin-top:50px;"; %> <link rel="stylesheet" type="text/css" href="<%=webpath%>image/style.css" /> <link rel="stylesheet" type="text/css" href="<%=webpath%>image/styles.css" /> <title>login</title> <link href="<%=webpath%>image/fullbody.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=webpath%>image/jquery-1.2.6.min.js"></script> <%@ include file="/sap_user_agent.txt" %> <script type="text/javascript"> function slideswitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next(): $('#slideshow img:first'); var $sibs = $active.siblings(); var rndnum = math.floor(math.random() * $sibs.length ); var $next = $( $sibs[ rndnum ] ); $active.addclass('last-active'); $next.css({opacity: 0.0,behavior: url(<%=webpath%>image/pie.htc)}) .addclass('active') .animate({opacity: 1.0,behavior: url(<%=webpath%>image/pie.htc)}, 1000, function() { $active.removeclass('active last-active'); }); } $(function() { setinterval( "slideswitch()", 10000 ); }); </script> <body> <div id="bod"> <div> <img src="<%=webpath%>image/logoback.jpg" style="border-radius: 4px 4px 4px 4px;height:115px; width:1100px;" ></img> </div> <!-- work number of images --> <!-- set active class on whichever image want show default (otherwise last image) --> <div id="slideshow"> <img src="<%=webpath%>image/bg1.jpg" class="active" /> <img src="<%=webpath%>image/bg2.jpg" /> <img src="<%=webpath%>image/bg3.jpg" /> <img src="<%=webpath%>image/bg4.jpg" /> <img src="<%=webpath%>image/bg5.jpg" /> <img src="<%=webpath%>image/bg7.jpg" /> </div> </body>
Comments
Post a Comment