Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Checkbox toggle to turn off a javascript element

    Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.

    My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.

    I have my checkbox created as well as all the effects working for it.

    Here is a piece of the main code as well as a link to the ambilight.js file
    Code:
                <label name="ambilightToggle">
    			<input type="checkbox" name="toggle"/>
    			<div class="toggle-switch">
    				<div class="handle"></div>
    				<div class="track">
    					<span>OFF</span><span>ON</span>
    				</div>
    			</div>
    			</label>
            
        	</div>
    	</div>
        
        
    	<div id="main" class="clearfix">
        
            <div id="video-edge">
                    <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
                    <div id="video-wrap" class="video-js-box moo-css">
                        <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
                          <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                          <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
                          <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
                        </video>
                    </div>
             </div>
             
             		<script type="text/javascript">
                        ambiLight.create(document.getElementById('example'))
                    </script>

    Portfolio Page

    http://www.eschulist.com/test/js/ambilight.js



    I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn.
    Code:
    <script type="text/javascript">
       $(document).ready(function(){
       $(this).click(function(){
           $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
       });
       });
    </script>
    Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe?

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made a little progress by linking the toggle to the ambilight effect but just like the click function the toggle only seems to last for a second and the light turns back on.

    Code:
    <label>
    	<input type="checkbox" id="toggle" onclick="vanish()"/>
    		<div class="toggle-switch">
    		<div class="handle"></div>
    		<div class="track">
    			<span>OFF</span><span>ON</span>
    		</div>
    		</div>
    </label>
                
    <script type="text/javascript">
    var checkbox = document.getElementById("toggle");
    function vanish(){
    if(checkbox.checked){
    $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
    };
    };
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •