www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript code failing upon .ready or onload

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    12

    Javascript code failing upon .ready or onload

    Hi guys. I was wondering, is there truly anything wrong with my script? (or rather, what exactly is wrong with it?)

    Basically, I tried .ready and onload. Both fail to do what I want. Upon clicking on the "servicesContact" link (in this case), I need my text to fade with my code below, while animating a rectangle up or down. The height is specific to how much text I have on every page. I need a smooth transition, as text will fade in.

    At best my code below changes the height. Nothing more. I changed it to 50 to see if there was a difference, and it changed the height only. As for the "top". it did nothing. As for the rest of code, same thing :/

    As you can see, I am loading everything separately, except for the text that fades in.


    Code:
    <?php
    include 'menu.php'; ?>
    <script>
    $(document).ready(function(){
      // your code here
    	$('#rectangle').animate({
    		'top':'500px',
    		'height':'500'
    								}
    		,1,function(){$('.help').fadeOut(1);	
    		$('.servicesContact').delay(200).fadeIn(800)
    		}
    		)
    		
      
      
    }
    )
    </script>
    
    <div id="servicesContact">
        ServicesContact Test<br/>
        <br/>
        <br/>
        ServicesContact Test2
    
    </div>
    
    
    <?php include 'footer.php';
    ?>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    since you provide no code of the menu.php and the footer.php files nobody can't even guess what hides in there that's why these files are reconstructed "as is":

    menu.php

    Code:
    <?php
    echo '<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
    body{text-align:center;padding-top:10px;}
    #rectangle{position:absolute;top:10px;left:10px;width:auto;height:auto;background-color:Yellow;border:1px solid #000;border-radius:10px;padding:20px;}
    #servicesContact{display:none;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <div><h1>MENU</h1></div>
    <div class="help"><a href="" id="sclink">the "servicesContact" link</a></div>
    <div id="rectangle">div id="rectangle"</div>
    ';
    ?>
    index.php

    Code:
    <?php include 'menu.php'; ?>
    <script>
    $(document).ready(function(){
    $('#sclink').click(function(){
    $('#rectangle').animate({
    'top':'500px',
    'height':'500'
    },1000,
    function(){
    $('.help').fadeOut(1);	
    $('#servicesContact').delay(200).fadeIn(800)
    });
    return false;});
    });
    </script>
    
    <div id="servicesContact">
    ServicesContact Test
    <br/><br/><br/>
    ServicesContact Test2
    </div>
    
    
    <?php include 'footer.php';?>
    footer.php

    Code:
    <?php
    echo '
    <div>
    <h1>FOOTER</h1>
    </div>
    </body>
    </html>';
    ?>
    live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jun 2013
    Posts
    12
    Well, if this helps at all there is no harm in me providing the actual menu and footer:


    MENU

    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="sami_scripts.js"></script>
    <link href="sami_styles.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <!-- main wrapper -->
    <div id=”wrapper”>
    
    
        <header id="header">
       
    
            <div id="nav-left-fr">
               	<nav id="services-fr">
                <a href="#" class="menu" id="services-fr-2">Services</a> <!-- Modified by Hazar -->
                </nav>
                
           
               <nav id="mission-fr">
               <a href="mission-fr.php" class="menu">Notre Mission</a>
               <span id="mission-hover"></span>
               </nav>
                          
               <nav id="contact-fr">
               <a href="contact-fr.php" class="menu">Nous rejoindres</a>
               </nav>        
            </div>
            
    
            <section id="logo_id">
              <img src="sami_images/fr/sami_green_web_fr.png" id="logo" title="Sami Développement Web" alt="Sami Développement Web" />
            </section>
            
            
            <div id="nav-right-fr">
                <nav id="clients-fr">
                <a href="#" class="menu" id="clients-fr-2">Clients</a> 
                </nav>
                
                <nav id="projets">
                <a href="projets.php" class="menu">Projets</a>
                </nav>
            </div>
            
            <section class="clearfloat">
            </section>
    
        </header>
    
    <!-- main wrapper end -->
    FOOTER

    HTML Code:
    <footer>
    <!-- green pouch -->
    	<section>
            	<img src="sami_images/website-design-green.png" id="green-pouch-fr" title="" alt="séparateur"/>
        </section>
    </footer>
    
    </div>
    
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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