Jquery conflict

Question

Hello, I have a website based on a joomla template. I want to add the dock from

ndesign-studio.com/blog/mac/css-dock-menu

I've built a sample page for this.

Here is the code :

<script type="text/javascript" src="images/eklenecek/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="images/eklenecek/interface.js"></script>
<script type="text/javascript">

    $(document).ready(
        function()
        {
            $("#dock").Fisheye(
                {
                    maxWidth: 30,
                    items: "a",
                    itemsText: "span",
                    container: ".dock-container",
                    itemWidth: 30,
                    proximity: 100,
                    halign : "center"
                }
            )
        }
    );

</script>
<style type="text/css">
<!--
.dock {
    position: relative; 
    height: 50px; 
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: #FFFFFF;
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 48px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none; 
    margin: 5px 10px 0px; 
    width: 100%; 
}
.dock-item span {
    display: none; 
    padding-left: 20px;
}
-->
</style>

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="images/eklenecek/email.png" alt="home" /><span>E-Posta ile Gonder</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/print.png" alt="contact" /><span>Yazdir</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/fav.png" alt="portfolio" /><span>Portfolio</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/pdf.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/blogger.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/delicious.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/digg.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/facebook.png" alt="rss" /><span>RSS</span></a>
  <a class="dock-item" href="#"><img src="images/eklenecek/friendfeed.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/google.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/habergentr.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/myspace.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/stumbleupon.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/twitter.png" alt="rss" /><span>RSS</span></a> 
  <a class="dock-item" href="#"><img src="images/eklenecek/yahoo.png" alt="rss" /><span>RSS</span></a>   
</div>
</div>

This one works great!

My question is, when i put the code into the addthis.php of the joomla addthis plugin, it doesn't work. Here is the final html of the code, I've commented the less-important parts:

TAKE A LOOK AT THE CODE, IT IS TOO BIG TO PASTE HERE

I think it is about

$(document).ready(
    function()
    {
        $("#dock").Fisheye(
            {
                maxWidth: 30,
                items: "a",
                itemsText: "span",
                container: ".dock-container",
                itemWidth: 30,
                proximity: 100,
                halign : "center"
            }
        )
    }
);

Any ideas?

Answer 1

No translation is required, the code you have posted works perfectly with jquery 1.3.2. Other js not working maybe a result of a namespace conflict; i.e. you might have other frameworks using the $ variable name. If that is the case, there are solutions too.

Answer 2

The code you posted just calls another plugin, so if you're having problems it will be with the plugin, not the code that calls it.

Have you tried using the fisheye plugin with jQuery 1.3.2? In other words, don't import 1.1.2, just have 1.3.2 and the fisheye plugin.

EDIT: okay you're using Joomla - Joomla comes with the mootools library which also uses $, hence the conflict. You should be able to fix it like this, taken from the jQuery site:

jQuery.noConflict();
jQuery(document).ready(function($){
   $("#dock").Fisheye(
        {
            maxWidth: 30,
            items: "a",
            itemsText: "span",
            container: ".dock-container",
            itemWidth: 30,
            proximity: 100,
            halign : "center"
        }
    );
});

Answer 3

I've figured it out. It is because i put the interface.js before jquery. thank you.