I came across this organization homepage and like the looks of their slider banner:
http://kygeonet.maps.arcgis.com/home/index.html
So I have duplicated the code for my own here:
But it doesn't slide when i paste the code to my banner.
Can anyone lend some advice?
Hi Erin,
its ts showing up "sliding" on my ipad/Safari. Pretty cool. Love to see you code as it would be a good loo for ADFG too...consistent across state.
maybe clear your browser or maybe network/ETS is blocking it.
Link to my organization page:
http://soa-dnr.maps.arcgis.com/home/index.html
Problem is, it doesn't seem to slide here.
Erin,
Did you copy all the .css etc... try pasting this into your banners custom design:
<div class="homeRotatorPanel" id="homeRotate">
<div class="detailsShort" id="details">
<div class="matrixLayoutShort" id="matrixLayout">
<div class="imgRotator" id="imgRotator" style="position: relative;">
<div id="banner-html" style="left: 0px; top: 0px; position: absolute;">
<title>KyGovMapsAnimatedBanner</title>
<meta content="KyGovMapsAnimatedBanner" name="description" />
<meta content="KyGovMaps, KyGeoNet" name="keywords" />
<link href="http://kygeonet.ky.gov/kygeonet.ico" rel="SHORTCUT ICON"></link>
<style>#header .nav a, .esri #header-controls ul li a, #header_map_newMap.map_nav a.map_nav_link{color: #336699; text-decoration: none;}</style>
<style>
/* ANIMATION */
@keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; }
20% { left:960px; }
21% { left:-960px; z-index:-1; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px;}
61% { left:-960px; }
100%{ left:-960px;}
}
@keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}
@-moz-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px;}
20% { left:960px; }
21% { left:-960px; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@-moz-keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@-moz-keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px; }
100%{ left:-960px; }
}
@-moz-keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px;}
100%{ left:-960px; }
}
@-moz-keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px;}
}
@-webkit-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; }
20% { left:960px; }
21% { left:-960px; }
50% { left:-960px; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@-webkit-keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px;}
}
@-webkit-keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px;}
100%{ left:-960px; }
}
@-webkit-keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@-webkit-keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}
/* Overlay Image */
.overlay-image {
height: 180px;
width: 960px;
margin: 0;
padding: 0;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 1;
border: 0;
}
/* LAYOUT */
.kycontainer {
margin:0;
padding:0;
top: 0;
left:0;
position: absolute;
width: 960px;
height: 180px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
overflow:hidden;
z-index:0;
}
/* CONTENT SLIDER */
#kycontent-slider {
width:100%;
height:180px;
margin: 0;
}
/* SLIDER */
#kyslider {
border:0px;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height: 180px;
width: 960px;
margin: 0;
padding: 0;
top: 0;
left: 0;
overflow: hidden;
position: relative;
}
#kymask{
overflow: hidden;
height: 180px;
width: 960px;
}
#kyslider ul {
margin:0;
padding:0;
position:relative;
}
#kyslider li {
width:960px;
height:180px;
position:absolute;
left:-960px; /*this hides it beside the banner*/
list-style:none;
}
#kyslider li.firstanimation {
animation:cycle 30s ease-in infinite;
-moz-animation:cycle 30s ease-in infinite;
-webkit-animation:cycle 30s ease-in infinite;
}
#kyslider li.secondanimation {
animation:cycletwo 30s ease-in infinite;
-moz-animation:cycletwo 30s ease-in infinite;
-webkit-animation:cycletwo 30s ease-in infinite;
}
#kyslider li.thirdanimation {
animation:cyclethree 30s ease-in infinite;
-moz-animation:cyclethree 30s ease-in infinite;
-webkit-animation:cyclethree 30s ease-in infinite;
}
#kyslider li.fourthanimation {
animation:cyclefour 30s ease-in infinite;
-moz-animation:cyclefour 30s ease-in infinite;
-webkit-animation:cyclefour 30s ease-in infinite;
}
#kyslider li.fifthanimation {
animation:cyclefive 30s ease-in infinite;
-moz-animation:cyclefive 30s ease-in infinite;
-webkit-animation:cyclefive 30s ease-in infinite;
}
</style>
<div class="kycontainer">
<div id="kycontent-slider">
<div id="kyslider">
<div id="kymask">
<ul>
<li class="firstanimation" id="first">
<a href="#">
<img alt="Elevation" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_elevation_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="secondanimation" id="second">
<a href="#">
<img alt="Aerial" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="thirdanimation" id="third">
<a href="#">
<img alt="Land Cover" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_landcover_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="fourthanimation" id="fourth">
<a href="#">
<img alt="Geology" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_geology_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="fifthanimation" id="fifth">
<a href="#">
<img alt="Aerial 2" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial2_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
</ul>
</div>
</div>
<div class="overlay-image">
<img alt="KyGovMapsImage" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_trans.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" usemap="#kygov" />
<map name="kygov">
<area alt="Kentucky.Gov Webpage" coords="862,95,71" href="http://kentucky.gov/" shape="circle" target="_blank" />
</map>
</div>
</div>
</div>
</div></div>
<div class="dots" id="categories" style="display: none;"><ul><li class="dojoxRotatorNumber dojoxRotatorSelected dojoxRotatorPane0 dojoxRotatorFirst dojoxRotatorLast"><a href="#"><span>1</span></a></li></ul></div>
</div>
</div>
</div>
I have found that IE8 does not like the code above, not managed to find a solution yet as the formatting box does not like script tags or HTML comment tags.
I will let you know if I found a solution.
Thanks, I'll keep looking as well.
Erin,
The list of supported HTML Tags can be found here:
Supported HTML for configuring the website—Help | ArcGIS
It says any HTML tags not listed in the table above are not supported and will be filtered out
Not cool!
Erin,
Did you copy all the .css etc... try pasting this into your banners custom design:
<div class="homeRotatorPanel" id="homeRotate">
<div class="detailsShort" id="details">
<div class="matrixLayoutShort" id="matrixLayout">
<div class="imgRotator" id="imgRotator" style="position: relative;">
<div id="banner-html" style="left: 0px; top: 0px; position: absolute;">
<title>KyGovMapsAnimatedBanner</title>
<meta content="KyGovMapsAnimatedBanner" name="description" />
<meta content="KyGovMaps, KyGeoNet" name="keywords" />
<link href="http://kygeonet.ky.gov/kygeonet.ico" rel="SHORTCUT ICON"></link>
<style>#header .nav a, .esri #header-controls ul li a, #header_map_newMap.map_nav a.map_nav_link{color: #336699; text-decoration: none;}</style>
<style>
/* ANIMATION */
@keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; }
20% { left:960px; }
21% { left:-960px; z-index:-1; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px;}
61% { left:-960px; }
100%{ left:-960px;}
}
@keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}
@-moz-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px;}
20% { left:960px; }
21% { left:-960px; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@-moz-keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px; }
}
@-moz-keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px; }
100%{ left:-960px; }
}
@-moz-keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px;}
100%{ left:-960px; }
}
@-moz-keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px;}
}
@-webkit-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; }
20% { left:960px; }
21% { left:-960px; }
50% { left:-960px; }
92% { left:-960px; }
96% { left:-960px; }
100%{ left:0px; }
}
@-webkit-keyframes cycletwo {
0% { left:-960px; }
16% { left:-960px; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; }
40% { left:960px; }
41% { left:-960px; }
100%{ left:-960px;}
}
@-webkit-keyframes cyclethree {
0% { left:-960px; }
36% { left:-960px; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; }
60% { left:960px; }
61% { left:-960px;}
100%{ left:-960px; }
}
@-webkit-keyframes cyclefour {
0% { left:-960px; }
56% { left:-960px; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; }
80% { left:960px; }
81% { left:-960px; }
100%{ left:-960px; }
}
@-webkit-keyframes cyclefive {
0% { left:-960px; }
76% { left:-960px; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; }
100%{ left:960px; }
}
/* Overlay Image */
.overlay-image {
height: 180px;
width: 960px;
margin: 0;
padding: 0;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 1;
border: 0;
}
/* LAYOUT */
.kycontainer {
margin:0;
padding:0;
top: 0;
left:0;
position: absolute;
width: 960px;
height: 180px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
overflow:hidden;
z-index:0;
}
/* CONTENT SLIDER */
#kycontent-slider {
width:100%;
height:180px;
margin: 0;
}
/* SLIDER */
#kyslider {
border:0px;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height: 180px;
width: 960px;
margin: 0;
padding: 0;
top: 0;
left: 0;
overflow: hidden;
position: relative;
}
#kymask{
overflow: hidden;
height: 180px;
width: 960px;
}
#kyslider ul {
margin:0;
padding:0;
position:relative;
}
#kyslider li {
width:960px;
height:180px;
position:absolute;
left:-960px; /*this hides it beside the banner*/
list-style:none;
}
#kyslider li.firstanimation {
animation:cycle 30s ease-in infinite;
-moz-animation:cycle 30s ease-in infinite;
-webkit-animation:cycle 30s ease-in infinite;
}
#kyslider li.secondanimation {
animation:cycletwo 30s ease-in infinite;
-moz-animation:cycletwo 30s ease-in infinite;
-webkit-animation:cycletwo 30s ease-in infinite;
}
#kyslider li.thirdanimation {
animation:cyclethree 30s ease-in infinite;
-moz-animation:cyclethree 30s ease-in infinite;
-webkit-animation:cyclethree 30s ease-in infinite;
}
#kyslider li.fourthanimation {
animation:cyclefour 30s ease-in infinite;
-moz-animation:cyclefour 30s ease-in infinite;
-webkit-animation:cyclefour 30s ease-in infinite;
}
#kyslider li.fifthanimation {
animation:cyclefive 30s ease-in infinite;
-moz-animation:cyclefive 30s ease-in infinite;
-webkit-animation:cyclefive 30s ease-in infinite;
}
</style>
<div class="kycontainer">
<div id="kycontent-slider">
<div id="kyslider">
<div id="kymask">
<ul>
<li class="firstanimation" id="first">
<a href="#">
<img alt="Elevation" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_elevation_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="secondanimation" id="second">
<a href="#">
<img alt="Aerial" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="thirdanimation" id="third">
<a href="#">
<img alt="Land Cover" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_landcover_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="fourthanimation" id="fourth">
<a href="#">
<img alt="Geology" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_geology_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
<li class="fifthanimation" id="fifth">
<a href="#">
<img alt="Aerial 2" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_aerial2_only.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" />
</a>
</li>
</ul>
</div>
</div>
<div class="overlay-image">
<img alt="KyGovMapsImage" src="http://kygeonet.ky.gov/agol/images/AGOL_Header_trans.png" style="border-radius: 0px 0px 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;" usemap="#kygov" />
<map name="kygov">
<area alt="Kentucky.Gov Webpage" coords="862,95,71" href="http://kentucky.gov/" shape="circle" target="_blank" />
</map>
</div>
</div>
</div>
</div></div>
<div class="dots" id="categories" style="display: none;"><ul><li class="dojoxRotatorNumber dojoxRotatorSelected dojoxRotatorPane0 dojoxRotatorFirst dojoxRotatorLast"><a href="#"><span>1</span></a></li></ul></div>
</div>
</div>
</div>