Solved

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

Posted on 2016-08-25
5
79 Views
Last Modified: 2016-09-01
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
Comment
Question by:cdemott33
  • 2
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41770987
Doesn't work in any browser for me - what is it you want it to do?
0
 

Author Comment

by:cdemott33
ID: 41771001
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
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41771202
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41771248
@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
 

Author Closing Comment

by:cdemott33
ID: 41780508
PERFECT!  Thank you for your help!
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question