Solved

# tag in CSS

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Issue 3 118
Looking for magnifying glass wingding font 3 17
CSS: How do I override in-line styling 11 15
Customizing jQuery UI Accordion CSS 3 16
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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!
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 …
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…

803 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