• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 142
  • Last Modified:

Help with CSS Slider - Works in Chrome/Firefox but not IE

The code below works great in Chrome and Firefox but I can't get it work in IE (11).   It's a simple slide down/up menu message that appears when the site loads.  OnLoad my "note" div slides down... hangs around for 3.3 seconds and then slides back up.   How do I fix this code so it will work in IE.  Thanks!  (FYI:  I attached the JS code in case you need it.)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Down</title>
<!-- CSS -->
<style>
@charset "utf-8";
/* CSS Document */

    #note {
	position: absolute;
	z-index: 6001;
	top: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	text-align: center;
	line-height: 2.5;
	overflow: hidden;
	-webkit-box-shadow: 0 0 5px black;
	-moz-box-shadow:    0 0 5px black;
	box-shadow:         0 0 5px black;
	padding: 5px;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #e77725;
    }
	
	.noteText{
		color: #666;
		font-size: 1.7em;
		margin-bottom: 5px;
	}
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-150px);
        -webkit-animation: slideDown 3.3s 0.3s 1 ease forwards;
        -moz-transform:    translateY(-150px);
        -moz-animation:    slideDown 3.3s 0.3s 1 ease forwards;
    }

    #close {
      position: absolute;
      right: 10px;
      top: 9px;
      text-indent: -9999px;
      background: url(images/close.png);
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
    .cssanimations.csstransforms #close {
      display: none;
    }
    
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-150px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-150px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }
</style>

<!-- SCRIPTS -->
<script type="text/javascript" src="Scripts/modernizr.custom.80028.js"></script>
</head>

<body>
    <div id="note" style="display: block;">
       <span class="notetext">This is my slide down menu!  It should slide down and pop back up automatically!</span>
    </div>
</body>
</html>

Open in new window

modernizr.custom.80028.js
0
cdemott33
Asked:
cdemott33
  • 2
  • 2
1 Solution
 
Julian HansenCommented:
Doesn't work in any browser for me - what is it you want it to do?
0
 
cdemott33Author Commented:
Works great in Crome and Firefox for me?  Not sure why it isn't working for you?  Are you using the modernizr.custom.80028.js script I attached?

Regardless, I just want the div to slide down and remain visible for 3.3 seconds (so the message can be read) and then slide back up.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You've only included animation and transform parameters for -webkit and -moz browsers. IE recognizes standard animation and transform parameters. Replace your style tag contents with the following:
@charset "utf-8";
/* CSS Document */

    #note {
	position: absolute;
	z-index: 6001;
	top: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	text-align: center;
	line-height: 2.5;
	overflow: hidden;
	-webkit-box-shadow: 0 0 5px black;
	-moz-box-shadow:    0 0 5px black;
	box-shadow:         0 0 5px black;
	padding: 5px;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #e77725;
    }
	
	.noteText{
		color: #666;
		font-size: 1.7em;
		margin-bottom: 5px;
	}
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-150px);
        -webkit-animation: slideDown 3.3s 0.3s 1 ease forwards;
        -moz-transform:    translateY(-150px);
        -moz-animation:    slideDown 3.3s 0.3s 1 ease forwards;
        transform:    translateY(-150px);
        animation:    slideDown 3.3s 0.3s 1 ease forwards;
   }

    #close {
      position: absolute;
      right: 10px;
      top: 9px;
      text-indent: -9999px;
      background: url(images/close.png);
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
    .cssanimations.csstransforms #close {
      display: none;
    }
    
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-150px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-150px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }
    @keyframes slideDown {
        0%, 100% { transform: translateY(-150px); }
        10%, 90% { transform: translateY(0px); }
    }

Open in new window

See lines 33-34 and 59-62.
0
 
Julian HansenCommented:
@cdemott33,

Modernizer is only necessary on older browsers - less and less need for it now especially with the styling you have used. The reason it was not working on my side is I did not add the classes to the <body> tag. After doing so it works fine without modernizr.
cssanimations csstransforms

Open in new window


Kim is correct though - your omission of the non browser specific transformation / animation styles eliminated IE from the mix

The transforms / animations you are using are supported back to IE10 with the generic version of the style - and based on recent browser stats the number of people still on IE9 is less than 1%. The other browsers have included the styles for many iterations.
Not sure about mobile but my feeling is - unless you know that a specific portion of your target user base is on very old tech there is little need for modernizr for the above styles. The library is small but it all adds up and results in another round trip to the server.
0
 
cdemott33Author Commented:
PERFECT!  Thank you for your help!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now