Question

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

It could have a lot to do with you loading Mootools and JQuery in the same page, have a look at this link, I think it could help.

In effect your code will become:

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