Solved

# tag in CSS

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
From one to two column layout using flex with a different order of inner divs. 1 29
compact pure CSS Read More Toggle 4 159
manage footer size 4 73
css selector 1 21
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

830 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