CODEWITHSUNDEEP
javascripthtmlcss
Jason
Jason

Reputation: 21

Adding fade in, fade out to dim light - javascript/css

Hi I am looking for an answer to the fading in and\or out, of the feature "Dim Lights". Here below is some coding;

<!--HEAD-->

<script type="text/javascript" src="js/embeddedcontent.js" defer="defer"></script>
<script type="text/javascript">
  var dimmed = 0;
  function toggleLights()
  {
    var dimmer = document.getElementById("dimmer");
    if(dimmed == 0) dimmed = 1;
    else dimmed = 0;

    if(dimmed == 1)
    {
        dimmer.style.opacity = 1.0;
        dimmer.style.visibility = "visible";
    }

    if(dimmed == 0)
    {
        dimmer.style.opacity = 0.0;
        dimmer.style.visibility = "hidden";
    }
  }
  </script>
 <style type="text/css">
  .aboveDimmer
  {
    position:relative;
    z-index: 301;
  }
  #dimmer
  {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    float:left;
    z-index: 300;
    visibility:hidden;
    background-color:#000000;
  }
  </style>

<!--BODY-->

    <div id="dimmer" onclick="toggleLights()"></div>
    Click to<a href="javascript:toggleLights();"><b> Dim the Lights</b></a>

There is more to it but if you visit http://www.ittookamiracle.ca/'11daniel.htm as an example of how it works and any other detail of coding needed to answer my question.

Thank you for taking your time to look in to this.

Cheers,

Jason.

Upvotes: 2

Views: 2984

Answers (1)

blade19899
blade19899

Reputation: 767

Here is a tutorial on how to make a dim the light button using flash and jquery.

This is the demo page demoing the script

Upvotes: 1

Related Questions