Solved

# tag in CSS

Posted on 2014-07-18
1
247 Views
Last Modified: 2014-07-25
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
0
Comment
Question by:9apit
1 Comment
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40205860
#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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 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

11 Experts available now in Live!

Get 1:1 Help Now