Solved

# tag in CSS

Posted on 2014-07-18
1
251 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Columns on Slider Mobile 4 49
Login area of a page 4 32
Put upload button on your image and change it 2 59
Synchronizing CSS load 3 29
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

911 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

23 Experts available now in Live!

Get 1:1 Help Now