treehouse : what would you like to learn today?
Web Design Web Development iOS Development

JQuery Innerfade not Working

  • Hie
    It is my first time using jquery innerfade and I cannot seem to make it work. I have been trying for the past couple of hours and I hope someone can help.

    I would like to swap three different images which are in the same div instead of using Flash but right now they are appearing one below the other.

    My call is
    $(document).ready(

    function() {

    $('div#pic').innerfade({
    speed: 1000,
    timeout: 5000,
    type: 'sequence',
    containerheight:'323px,

    });
    });
    Have a look http://creativeastro.com/MSHeating/index.php
  • You need to load the JQuery library. jQuery plugins won't work without it. :D

    If you are trying to do what I think you are trying to do then the best option is http://malsup.com/jquery/cycle/lite/
  • Yes that is what I am trying to do.
    I have uploaded the innerfade.js and the other one into my js folder on the server and referenced it in index.php within the head tags. Is this what you mean by the library?

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <title>Welcome to MS HEATING AND PLUMBING</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/heating.css\" />
    <link rel='stylesheet' type='text/css' href='css/quickmenu_styles.css'/>
    <script src=\"js/jquery.animated.innerfade.js\" type=\"text/javascript\"></script>
    <script src=\"js/scripts.js\" type=\"text/javascript\"></script>
    </head>
  • No, I mean the jQuery library.

    Either download it from http://jquery.com/, upload it to your server and link to it from the document head before you call any other scripts, or link to the google hosted version
    <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
  • Okay thanks, I will try that now and will let you know if that works
  • Hie
    I downloaded the plugin and uploaded it to my server in my js folder and referenced it within my head tags but I cannot get it to work. The images are one on top of the other. I am sure there must be something missing but I cannot figure out what it could be.
    Any help much appreciated.
  • Look at my last post:
    link to it from the document head before you call any other scripts

    "before" - not after or inbetween but before.
  • Is the code below correct

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <title>Welcome to MS HEATING AND PLUMBING</title>
    <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/heating.css\" />
    <link rel='stylesheet' type='text/css' href='css/quickmenu_styles.css'/>

    <script src=\"js/jquery.animated.innerfade.js\" type=\"text/javascript\"></script>
    <script src=\"js/scripts.js\" type=\"text/javascript\"></script>


    </head>
  • Like this:

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <title>Welcome to MS HEATING AND PLUMBING</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/heating.css\" />
    <link rel='stylesheet' type='text/css' href='css/quickmenu_styles.css'/>

    <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
    <script src=\"js/jquery.animated.innerfade.js\" type=\"text/javascript\"></script>
    <script src=\"js/scripts.js\" type=\"text/javascript\"></script>

    </head>