Reputation: 3

Jquery yesconflict

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?

Upvotes: 0

Answers (2)

Mark Schultheiss

Reputation: 34178

you DO realize that your page is NOT properly formated html with the commented out section starting with:

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

EDIT: second note why the </span> right after the quoted script you note????

EDIT: third note: I would change

<script type="text/javascript" >if (jQuery && jQuery.noConflict) jQuery.noConflict();</script>

to be

<script type="text/javascript" > jQuery.noConflict();</script>

Here is what I see on the page (as of when I looked at least) Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; MDDR; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0) Timestamp: Tue, 9 Feb 2010 13:06:38 UTC

Message: Syntax error Line: 1 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/media/system/js/mootools.js

Message: Syntax error Line: 1 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/media/system/js/caption.js

Message: Syntax error Line: 1 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/modules/mod_jamegamenu/assets/script.js

Message: Syntax error Line: 1 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/modules/mod_janewsticker/assets/script.js

Message: Object doesn't support this property or method Line: 30 Char: 20 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: 'Cufon' is undefined Line: 74 Char: 2 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: 'jQuery' is undefined Line: 89 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: Object expected Line: 168 Char: 3 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: Object expected Line: 383 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: 'jaSLWI' is undefined Line: 434 Char: 3 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: Object expected Line: 615 Char: 2 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Message: Object doesn't support this property or method Line: 634 Char: 1 Code: 0 URI: http://www.students.itu.edu.tr/~ozyildiri2/a.html

Upvotes: 0

Lazarus

Reputation: 43084

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"
            }
        )
    }
);

Upvotes: 1

Jquery yesconflict

Answers (2)

Related Questions