www.webdeveloper.com
Results 1 to 2 of 2

Thread: HELP Javascript

  1. #1
    Join Date
    Oct 2012
    Posts
    2

    Thumbs up HELP Javascript

    Hello, I'm new here.
    I have difficulty programming javascript ... wanted to run the script after loading the page.

    I have a object with a defined class "activator" and if i click them, it works...
    But... how i put page loading "overlay" automatcly?
    Thanks


    Code:
    <div class="content">
                <!-- The activator -->
            <a class="activator" id="activator" style="left: 0px; top: 0px; width: 11px; height: 9px"></a>
            </div>
    
            <div class="footer">
            </div>
    
            <!-- The overlay and the box -->
            <div class="overlay" id="overlay" style="display:none;"></div>
            <div class="box" id="box">
                <a class="boxclose" id="boxclose"></a>
                <h1>Escolha uma das seguintes opções</h1>
                <p>
                    You have a new message
                </p>
            </div>
    
            <!-- The JavaScript -->
            <script type="text/javascript" src="jquery-1.3.2.js"></script>
            <script type="text/javascript">
               $(function () {
                    $('#activator').click(function(){
                        $('#overlay').fadeIn('fast',function(){
                            $('#box').animate({'top':'160px'},500);
                        });
                    });
                    $('#boxclose').click(function(){
                        $('#box').animate({'top':'-200px'},500,function(){
                            $('#overlay').fadeOut('fast');
                        });
                    });
                });
            </script>

  2. #2
    Join Date
    Oct 2012
    Posts
    2
    Ok, done...
    replace the code by this
    it put's ESC key down working to hide overlay and autoload..

    Code:
    <script type="text/javascript">
                $(function () {
                    $('#activator').click(function(){
                        $('#overlay').fadeIn('fast',function(){
                            $('#box').animate({'top':'160px'},500);
                        });
                    });
                    $('#boxclose').click(function(){
                        $('#box').animate({'top':'-200px'},500,function(){
                            $('#overlay').fadeOut('fast');
                        });
                    });
                 });
                 
                 $(document).keyup(function(e){
    				if(e.which == '27'){
    				//om when the ESC(27) key is pressed then will also close.
    				$('#box').animate({'top':'-200px'},500,function(){
    				$('#overlay').fadeOut('fast');
    				});
    				}
    				});
    
    			$(document).ready(function() {
    				$('#overlay').fadeIn('fast',function(){
                    $('#box').animate({'top':'160px'},500);
                    });
    				});
             </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles