Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-08-25
5
Medium Priority
?
128 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 59

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 2000 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 59

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

609 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