Solved

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

Posted on 2016-08-25
5
93 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 56

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 56

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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