Search code examples
jqueryjquery-pluginsmarquee

"jQuery("#marquee").marquee is not a function" error

I'm trying to use marquee plugin of jQuery.
but i get this error in FireBug console jQuery("#marquee").marquee is not a function.
My code is this: 

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function (){ 
        jQuery("#marquee").marquee(); 
    });
</script>

and my html is: 

<ul id="marquee" class="marquee"> 
  <li>Some text</li>
</ul>

I'm using this marquee plugin:
http://www.givainc.com/labs/marquee_jquery_plugin.htm

What's the problem?

-----EDIT-----
I tested it on a stand alone page that had nothing except marquee codes and it worked!
I think other libraries that i'm using are making problem.
My entire <head> is: 

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
<title>title</title>
<link href="/joomla/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=89&amp;Itemid=559&amp;format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/joomla/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=89&amp;Itemid=559&amp;format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="http://localhost/joomla/index.php?option=com_search&amp;view=category&amp;layout=blog&amp;id=89&amp;Itemid=559&amp;format=opensearch" rel="search" title="title" type="application/opensearchdescription+xml" />
<link rel="stylesheet" href="/joomla/media/system/css/modal.css" type="text/css" />
<link rel="stylesheet" href="/joomla/plugins/content/attachments/attachments.css" type="text/css" />
<link rel="stylesheet" href="/joomla/plugins/content/attachments/attachments1.css" type="text/css" />
<link rel="stylesheet" href="media/system/css/jquery.marquee.css" type="text/css" />
<script src="/joomla/media/system/js/core.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/caption.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/joomla/media/system/js/modal.js" type="text/javascript"></script>
<script src="/joomla/plugins/content/attachments/attachments_refresh.js" type="text/javascript"></script>
<script src="media/system/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="media/system/js/jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript">
function keepAlive() {  var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
    window.addEvent('domready', function() {

        SqueezeBox.initialize({});
        SqueezeBox.assign($$('a.modal'), {
            parse: 'rel'
        });
    });
    window.addEvent('domready', function() {

        SqueezeBox.initialize({});
        SqueezeBox.assign($$('a.modal-button'), {
            parse: 'rel'
        });
    });

jQuery.noConflict();
jQuery(document).ready(function (){ 
    jQuery("#marquee").marquee(); 
});
</script>
<link type="text/css" rel="stylesheet" href="http://localhost/joomla/plugins/content/jumultithumb/assets/style.css" />
<link rel="stylesheet" href="/joomla/templates/siteground-j16-25/css/template.css" type="text/css" />
<script type="text/javascript" src="/joomla/templates/siteground-j16-25/js/CreateHTML5Elements.js"></script>
<script type="text/javascript" src="/joomla/templates/siteground-j16-25/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="/joomla/templates/siteground-j16-25/js/sgmenu.js"></script>
Solution

  • Seeing your updated question the problem is clear. You're loading jquery a second time (3rd last line) which, of course, overwrites all plugins loaded previously. And as the call to .marquee is asynchrones (callback to the ready event) the plugin is gone at the time the callback is called.

    Solution: Remove that second time you're loading jquery.