Jquery not working in joomla2.5

Question

I am trying to use jquery in my joomla article.

what i am trying to do it this-http://jsfiddle.net/bhaveshj21/BYgaq/

<script>
$("#myul > li").click(function(){
    $('li').each(function(){
        var data = $(this).find('a').attr('href');
        $(data).css({'display' : 'none'});
    });
    var curr = $(this).find('a').attr('href');
    $(curr).css({'display' : 'block'}).find('img').animate(
        {
            'width' : '100%',
            'height' : 'auto'
        },
        1000
    );
});</script>

html code is

<div class="menu">
<ul id = "myul">
    <li><a href="#1" id="all">all</a></li>
    <li><a href="#2" id="joomla">joomla</a></li>
    </ul>
</div>
<div class="image" id='1'>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRgMHchGIXBuBlMQHUfdTvzpuAaC43tSq3SYgHAsbXNr2TUQwhLYRu8yuSf"/>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHHRfptpToJ6GqtsSatdZ-vh36VrIXWokRdYSnc4FEkHncQHLHpw" />

</div>
<div class="images" id='2'>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSLyEyENGyUVfnLMOPFVAT5gRQw8Mc_koSZWMfrdQLohY8cL1RDGeXKjnRO" />
    </div>

//css

.menu
{
    width:100%
        float:left;
}
.menu a{
    background-color:lightblue;
    border-radius:8px 8px 8px 8px;
    margin-right:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:5px;
    color:black;
    padding-right:30px;
}
.menu li
{
    display:inline;
}
.menu a:hover
{
    background-color:white;
}
.image
{
    display:none;

}
.images
{
    display:none;
}

It is working fine in jsfiddle but not in my joomla temolate.

what I have done is that I have added yhe script file in index.php and my html code in article. the css is working fine not js.

stuck for a while any help will be grate?

have u added .js path in the joomla template? – Somnath Kharat Sep 03 '13 at 07:11 — Somnath Kharat, Sep 03 '13 at 07:11
yes I have added the script code in index.php only. – user2742008 Sep 03 '13 at 07:14 — user2742008, Sep 03 '13 at 07:14

McRui · Accepted Answer · 2013-09-04T09:40:10.740

0

Try

<head>
<!--- the head elements -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
</head>
<script type="text/javascript>
    (function($){
        $(document).ready(function(){
            $("#myul > li").on("click", function(){
                $('li').each(function(){
                    var data = $(this).find('a').attr('href');
                    $(data).css({'display' : 'none'});
                });
                var curr = $(this).find('a').attr('href');
                $(curr).css({'display' : 'block'}).find('img').animate(
                    {
                        'width' : '100%',
                        'height' : 'auto'
                    },
                    1000
                );
            })
        });
    })(jQuery);
</script>

edited Sep 04 '13 at 09:40

answered Sep 03 '13 at 11:19

McRui

1,879
3
20
31

thank you, but still not working i think there is a problem with joomla intergeneration of jquery.can you tell me how to include jquery code in joomla. – user2742008 Sep 03 '13 at 12:55
You have mainly two ways of doing it: either by adding jquery.js or jquery.min.js to your template directory (call it js) and then add the element to your template index.php file or you can use Google's library and add in your template/index.php file head, the following: – McRui Sep 03 '13 at 13:09
I have added jquery.min.js but still not working. as for the google api do i need to call it on $doc->addscript or – user2742008 Sep 03 '13 at 13:12
Just add it as that, no need to invoke the factory. Other thing is that you may be having some kind of mootools conflict. Have you checked it? – McRui Sep 03 '13 at 13:15
Thanks, just edited the last code and added the script. If it works, can you please accept the answer? Thanks – McRui Sep 04 '13 at 09:40

Jquery not working in joomla2.5

1 Answers1