# tag in CSS

Hello expert,

Working on using a JavaScript slide show with a fader in a software
program called ServiceNow.

The JavaScript slide show uses CSS style types in the header of
the HTML. Full copy of page copied below but I am not able to
access the header of the page in the ServiceNow so the CSS styles
have to be inline.

For instance,  in the style types in the header is the line

#Slideshow #slice1 {display:block;}
and in the body
<div id="slice1">
So I added to line in the body
<div id="slice1"  style = "display:block;">
and deleted the line in the header
and it works.

But I have a line
#Slideshow div {display:none;}
and I tried putting it in the inline style
statement in the body as
 <div id="Slideshow" style = "display:none;">
but his broke the code

So what is #Slideshow div saying
and how can I get the function of that line
into inline style declarations in the body?

Thanks

Allen in Dallas

+++++++++++++++beginning of page code+++++++++++++++
<!DOCTYPE html>


<html lang="en-US">
<!-- from http://brugbart.com/slideshow-fade-javascript-->
  <head>
    <title>JavaScript Fade - Brugbart Example</title>
    <style type="text/css">
#Slideshow {
  opacity: 1.0;              /* CSS3 */
  -moz-opacity: 1.0;         /* Older versions of Firefox */
  -khtml-opacity: 1.0;       /* Older versions of Safari */
  filter: alpha(opacity=100); /* Internet Explorer */
}
#Slideshow div {display:none;}
#Slideshow #slice1 {display:block;}
    </style>
  </head>

  <body onLoad="StartFade()">
   <div id="Basement" style="width:90%;margin:auto;">
      <div id="Slideshow">
      <!--   <div id="Slideshow" style = "display:none;">-->
       <div id="slice1"  style = "display:block;">
      <img src = 'Shared_vision.jpg'>
      </div>
      <div id="slice2"><img src = 'Shared_vision_clear.jpg'>
      </div>
      <div id="slice3"><img src = 'Shared_vision_spirit.jpg'>
      </div>
    </div>
   </div>

   <script type="text/javascript">
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */

var running = 0 /* Used to check if fade is running */
var iEcount = 1 /* Element Counter */

var iTotalE = element.getElementsByTagName('div').length;


function SetOpa(Opa) {
  element.style.opacity = Opa;
  element.style.MozOpacity = Opa;
  element.style.KhtmlOpacity = Opa;
  element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}
function StartFade() {
  if (running != 1) {
   running = 1
   fadeOut()
  }
}
function fadeOut() {
  for (i = 0; i <= 1; i += 0.01) {
    setTimeout("SetOpa(" + (1 - i) +")", i * duration);
  }
   setTimeout("FadeIn()", (duration + hidtime));
}
function FadeIn() {
  for (i = 0; i <= 1; i += 0.01) {
    setTimeout("SetOpa(" + i +")", i * duration);
  }
   if (iEcount == iTotalE) {
    iEcount = 1
    document.getElementById("slice" + iEcount).style.display = "block";
    document.getElementById("slice" + iTotalE).style.display = "none";
   } else {
    document.getElementById("slice" + (iEcount + 1)).style.display = "block";
    document.getElementById("slice" + iEcount).style.display = "none";
    iEcount = iEcount+1
   }
   setTimeout("fadeOut()", (duration + showtime));
}
   </script>
  </body>

</html>

+++++++++++++++ending of page code+++++++++++++++
Shared-vision.jpg
Shared-vision-clear.jpg
Shared-vision-spirit.jpg
Allen PittsBusiness analystAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
#Slideshow div targets all divs inside the div with id Slideshow. inline it woul look like this:

<div id="Slideshow>
   <div style="display:none"></div>
</div>
0
All Courses

From novice to tech pro — start learning today.