Joomla Prodigy - Re:JQuery - JoomlaProdigy Forum

	JoomlaProdigy Forum	Forum Help

Welcome, Guest
Please Login or Register.
Lost Password?

JoomlaProdigy Forum

Tips and Tricks

Tips and Tricks/Tutorials

JQuery (1 viewing)

Page:
<< Start < Prev 1 2 Next > End >>

TOPIC: JQuery

Forum Tools

#1443

Pathos (User)

Senior Boarder

Posts: 10

JQuery 2007/05/04 20:35	Karma: 0
I started looking at JQuery after i read your article. I'm not that familiar with it yet but i'm trying to get something similar to your login-div that pops out when clicking on login... Lets see if its as addictive as you find it

The administrator has disabled public write access.

#1446

admin (Admin)

Admin

Posts: 840

Re:JQuery 2007/05/04 23:45	Karma: 19
you can post here if you need some help. good luck.

The administrator has disabled public write access.

#1451

Pathos (User)

Senior Boarder

Posts: 10

Re:JQuery 2007/05/05 07:34

Karma: 0

Oke, i didn't get this function to work...

I did the following:

Put the link to jquery in the headsection:
<script type="text/javascript" src="/templates/templatename/js/jquery.js"></script>

Then put the following code at the bottom of the site.

<script type="text/javascript">
$("#inloggen").toggle(function(){
$("#kllogin").slideUp("slow");
$("#kllogin).html('slide down');
},function(){
$("#kllogin").slideDown("slow");
$("#kllogin).html('slide Up');
});
</script>

The the following div's

<div class="menu">
<?php mosLoadModules ( 'user1' ); ?>
<a href="x" class="inloggen">Inloggen</a></div>
<br />
<div id="kllogin"><?php mosLoadModules ( 'user3' ); ?></div>

i put a class to the <a> in the menudiv

But nothing happens, i tried different variations...

Am i doing something wrong?

Greetings,
Pathos

The administrator has disabled public write access.

#1452

admin (Admin)

Admin

Posts: 840

Re:JQuery 2007/05/05 10:45 Karma: 19

Try this
put this in head of the template

Code:


 <script type="text/javascript" src="$mosConfig_live_site/templates/templatename/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".inloggen").toggle(function(){
        $(".menu").slideUp("slow");
        },function(){
        $(".menu").slideDown("slow");
    });
});
</script>

and make following changes in the body

Code:


 
<a href="javascript:void(0)" class="inloggen">Inloggen</a>
<div class="menu">
<?php mosLoadModules ( 'user1' ); ?>
</div>

This will make the the .menu class content animate.

The administrator has disabled public write access.

#1460

Pathos (User)

Senior Boarder

Posts: 10

Re:JQuery 2007/05/05 18:18	Karma: 0
No dice. I guess i will start from the beginning with some sites about jquery. Doesnt't look to bad. But i guess i keep putting the code on the wrong place. Thanks, i'll keep trying

The administrator has disabled public write access.

#1461

admin (Admin)

Admin

Posts: 840

Re:JQuery 2007/05/05 20:20	Karma: 19
I think I too should write a beginners tutorial. There are tutorials but most expect you have some decent knowledge and the terms read too technical like elements, object, DOM etc and they aren't too familiar words for beginners.I wont aim to make it something very elaborate but something that can get one started with jquery.

The administrator has disabled public write access.

#1463

Pathos (User)

Senior Boarder

Posts: 10

Re:JQuery 2007/05/06 05:28

Karma: 0

I think thats a great idea

I could get it to work on a normal html-page, but what i'm unfamiliar with is how to use it on a normal joomla-template.

Should i get de div's css out of the normal css file and put it in the index itself? What has to be done to the css and the module within a div.

I keep getting the module shown...

So a tutorial with info about that would be nice. If i look at the code i think i can work with it. its just some little things i think you have to know.

Greetings and thanks

The administrator has disabled public write access.

#1464

admin (Admin)

Admin

Posts: 840

Re:JQuery 2007/05/06 11:44	Karma: 19
I just started a tutorial series on that.

The administrator has disabled public write access.

#1609

Pathos (User)

Senior Boarder

Posts: 10

Re:JQuery 2007/05/27 17:39	Karma: 0
I read it, and i appreciate it. I also read de jquery website but i am doing something wrong. Is it possible to show your code so i see a working example (without giving the template away of course...

The administrator has disabled public write access.

#1610

admin (Admin)

Admin

Posts: 840

Re:JQuery 2007/05/27 18:26 Karma: 19

this is what I have

Code:


 
.....
<a class="login_link" href="javascript:void(0)">Login</a></div>
    </div>
</div>
</div>
<div id="top"><?php mosLoadModules('top',1); ?></div>
<div id="body0">
<div id=".....

This is in my template.

Then this is the jquery code for the link above to open a div and slide it down. The did id top is given a css property of display:none. And when you click it the slideDown function will automatically convert it to display:block and make it visible. This is done to keep the div invisible from start.

Code:


 
jQuery.noConflict();    
jQuery(document).ready(    function()    {
jQuery(".login_link").toggle(function(){
        jQuery("#top").slideDown("slow");
        },function(){
        jQuery("#top").slideUp("slow");
        });
});
});

What the code will do is on page ready
if an element with class of login_link is clicked then div with id of top should slidedown and if clicked again it will slideup and this will continue. The toggle function does it. If you write click instead of toggle then it may just open it everytime. See teh beauty of jquery. In plain javascript you will write so much code to do this.

Hope you can get it now.
Enjoy! I like your spirit btw. Do write if you still don't get it right.
Good luck.

The administrator has disabled public write access.