Solved

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

Posted on 2016-08-25
5
70 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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now