JoomEdit - Make Joomla Dynamic Using JQuery

February 16, 2011 | Joomla Tutorials | Written by Nick Savov

JoomEdit

JoomEdit - The easy way to make your Joomla site extremely dynamic.

Don't know Javascript but want to make your website interactive and dynamic? No worries, just install JoomEdit! JoomEdit integrates Joomla with IxEdit, a powerful JavaScript-based interaction design tool.

Benefits

Create interactions easily without having to know Javascript or jQuery
Cross Browser Compatible: Internet Explorer 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome
(The above is once the code is deployed, it's fully compatible across all modern browsers. However, Google recently abandoned Google Gears which presents some issues and thus we're moving away from Google Gears. For development, Firefox 5 is not supported, some versions of Safari aren't depending on the operating system, and Chrome is not supported. This is only for development. Once the code is deployed it will work in all browsers and visitors never need Google Gears.)
User Friendly
Secure

Features

Selector: Select CSS attributes
Load: When the HTML is loaded to the browser an the DOM is ready.
Unload: Right before the browser starts reloading or jumping to another URL.
Change: When a control loses the input focus and its value has been modified since gaining focus.
Click: When the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location.
Double Click: When the pointing device button is double clicked over an element.
Drop: When a draggable element is dropped on a droppable element. (See Droppable)
Focus: When an element receives focus either via the pointing device or by tab navigation.
Focus Out: When an element loses focus either via the pointing device or by tabbing navigation.
Key Up: When a key on the keyboard is released.
Mouse Down: When the pointing device button is pressed over an element.
Mouse Move: When the pointing device is moved while it is over an element.
Mouse Over: When the pointing device is moved onto an element.
Mouse Up: When the pointing device button is released over an element.
Resize: When a document view is resized.
Scroll: When a document view is scrolled.
Select: When a user selects some text in a text field, including input and textarea.
Submit: When a form is submitted.
Delay: How long to delay the reaction be performed
Conditions: Which conditions need to be met

Requirements

Firefox 3 or 4, or Internet Explorer 7+ as your development environment. **Since Google has abandoned support for Google Gears we've converting the extension to be independent of Gears. Please bear with us a for a few months. **note: this is only for development. See Cross Browser Compatibility above for compatibility from the users' perspective once code is deployed.
Gears installed to use local database via IxEdit. **note: Google Gears is not needed for the users of your website. It is only needed for the developer, but once the Javascript code is deployed it will work for everyone without Google Gears.To download Google Gears, click here

Video on How to Use JoomEdit

Install

Go to Extensions >> Install/Uninstall >> Browse >> Upload Files & Install

Turn on JoomEdit Edit Mode

Go to Extensions >> Module Manager >> JoomEdit

Show Title: No
Enabled: Yes
Position: Debug

Select which menu item that you want JoomEdit to appear on.

Please note, if the page is live then set the access level to special while editing so that the editor doesn't appear to your users ;-) Once you're done with the editor then you can set it back to public if you want the javascript to appear for everyone.

Edit Mode: On

Apply

Frontend Editor

Deploy Code

Settings Icon >> Deploy

Copy all the code.

In the JoomEdit module in the Joomla Backend, set Edit Mode to off then paste the deployed code in the deployed code area.

Apply.

Now check the frontend and everything should be working as expected!

Support

If you have any questions, suggestions, comments, or bugs to report, please contact us via our contact form. We generally answer the within 24 hours to support requests and would be more than glad to help with any issues.

Leave a Review

Show your gratitude and leave a review on the JED! It means a lot to us!

Comments

#1 Brian Ngo 2011-02-21 04:08

Hello
I just installed exactly what you've instructed, however, I haven't seen any changes, can you give me a Demo, thanks lot for your kindness.
ngobrian.cloudaccess.net
Brian

#2 Nick 2011-02-22 19:19

Hi Brian,

Sure thing, the video is part of the demo right now.

Which part are you stuck on?

Kind regards,
Nick

#3 jason 2011-02-24 19:14

WOW... am I one of the first to see this? Or do people not realize how powerful this is!!!

Amazing, i can't wait to play with this!
thanks,
Jason

#4 Patrick Toulze 2011-02-24 21:34

Seem really cool. I really like to see how the gears work behind the scene. But, Alas I’m a total newbie. Where should I start to learn how to work with this.

I was going to take some course at Linda.com to be able to modify and interact with module, plugin, joomla. I want to be able to tweak or even make my own program inside Joomla framework.

I’m a fast learner and already fool around in all that with so,e success but I really need some direction...

My first course was probably a php, mysql course wher you learn to do a simple cms, do you think it’s a good idea. I want to stay in the Jommla framework...

Any hints?
Maybe JoomEdit can help me to learn??

#5 Nick 2011-02-25 19:26

You're one of the first, yes :) And people don't realize how powerful it is, yes :)

Be sure to leave a review on the JED if you like it!

Kind regards,
Nick

#6 Nick 2011-02-25 19:30

Hi Patrick,

JoomEdit is great for deploying Javascript and if you want to practice Javascript then yes.

However for creating extensions, you'll need mostly PHP. Give this tutorial a try:
docs.joomla.org/.../

Also, make sure you get the basics of Joomla down from the administrator side and it will make the concepts a lot easier to understand.

Kind regards,
Nick

#7 Patrick Toulze 2011-02-25 21:03

Thanks, I will investigate JoomEdit and your link Thanks

#8 Patrick Toulze 2011-02-26 13:09

Thanks for your input.
Yep, That little create_a_module is really interesting...

Thanks !

#9 carrie ogara 2011-03-07 22:50

Hello,
I added an onload function to redirect to another page, and lost the controller for joomedit. I tried uninstalling and reinstalling the extension, but it remembers my settings, apparently. Do I need to delete the webpage I applied it to and start over?

#10 Nick 2011-03-07 23:57

You're welcome, Patrick!

#11 Nick 2011-03-08 00:05

Hi Carrie,

That's because during editing mode the information is stored in Google Gears. If you haven't done much work on the page you can just clear the Google Gears stored data:

* First close your browser.
* You'll find the Google Gears offline data store for Firefox inside your Firefox profile directory. e.g. "C:\Documents and Settings\Jeff\L ocal Settings\Applic ation Data\Mozilla\Fi refox\Profiles\ wb2qohxr.defaul t\Google Gears for Firefox".
* The offline data store contains a couple bookkeeping files ("localserver.d b" and "permissions.db ") and individual directories for each domain name with offline storage. Just delete the appropriate directory.
* Restart your browser

Kind regards,
Nick

#12 Nick 2011-03-08 05:30

p.s. I just wanted to add that the only reason that all that is required to make the changes is because the page is being redirected onload (i.e. so you're no longer in the editing page). If you weren't being redirected onload, you could easily undo your changes.

#13 CB 2011-06-08 15:12

Hi,

Is there anyway of using JoomEdit without having to install Google Gears? It looks like a fantastic extension.

#14 paulbme 2011-06-10 05:57

VERY powerful and easy to use! You do need to watch the video first, though.

#15 Abdul Kayum 2011-06-10 11:40

Today I installed it to my Joomla 1.5. But I does all thin following your instruction. But can't find out any change in my site. What's the problem? Please help me.

#16 Nick 2011-06-10 13:25

Hi CB,

Google Gears is just for development. Your site's visitors don't need it, so you shouldn't have any issue installing it yourself.

Kind regards,
Nick

#17 Nick 2011-06-10 13:27

Hi Paul,

We're thankful for the feedback! Do you mind posting a review on the JED?
extensions.joomla.org/.../...

Kind regards,
Nick

#18 Nick 2011-06-10 13:28

Hi Abdul,

Are you getting any error messages?

Kind regards,
Nick

#19 Kayum 2011-06-10 17:43

No, I don't getting any error massage. But don't see any change in my site. I also installed Google Gears. what can I do now. Please help me.

#20 Alison 2011-07-15 04:26

Hi There,
Trying to install google gears but it's not compatible with the latest Firefox 5.
What can I do?
Thanks

#21 Nick 2011-07-15 08:12

Hi Alison,

Try using IE. Google gears is only needed for development and it's not needed for your users once the code is deployed so at least the ending result will be compatible in all browsers.

We're working on creating a version without Google Gears being needed since Google dropped support for it. It was a bit unexpected, so our apologies for that.

Kind regards,
Nick

#22 Nick 2011-07-15 08:14

Hi Kayum,

Sorry I missed that you posted. Do you still need help or did you get things sorted?

Kind regards,
Nick

#23 Alison 2011-07-15 23:27

Thanks Nick,

Unfortunately, I'm using a Mac, so IE isn't an option (plan to install trial version of parallel soon, but not just yet).
Might try reinstalling older version of Firefox.
Alternatively, will it work with other Client Side Storage options?

Cheers,
Alison

#24 Tom 2011-07-16 04:31

Installed but and setup as instructed but not seeing anything on the frontend side. I am using latest chrome so I assume I don't need to install chrome. Also my template does not seem to have a debug position - so will any other one work?

#25 Nick 2011-07-16 22:24

Hi Alison,

Try reinstalling Firefox 4 just for development. Extremely sorry for the inconvenience! We've been working on a new version since Google dropped support for Google Gears, but it takes a while to code it all.

Unfortunately it won't work with other client side storage at the moment.

Kind regards,
Nick

#26 Nick 2011-07-16 22:26

Hi Tom,

Try using Firefox or IE. Chrome dropped it's support for Google Gears so it no longer works in there.

Note: this workaround is just for development. Once the code is actually deployed, it will work in every browser and Google gears is not even needed.

Kind regards,
Nick

#27 Alison 2011-07-17 01:15

Thanks Nick for your prompt responses - greatly appreciated
Google now appears to have redirected their google gears download area to their blog site, so might have to wait for your new code deployment
Again, thanks for your help!

#28 Nick 2011-08-02 08:28

Hi Alison,

I've now added a copy of Google Gears for download in the "Requirements" section of this tutorial. :)

Kind regards,
Nick

#29 harryhere 2011-10-03 17:45

really, i've got IE 9, chrome, firefox 7, and safari ,

non has got anything in the frond end..

so cAN't realize the power of the tool

#30 Nick 2011-10-03 17:50

Hi Harry,

Yes, sorry about that. Unfortunately Google dropped support for Google Gears and so that's why there's this mess. We hope that this month or next month we'll have completed a migration away from Google Gears and that everything would be compatible in all modern browsers.

For now the work around is to downgrade to IE8 or Firefox 3 or 4. That is ONLY needed for development and once the code is deployed it will work in all modern browsers for all users.

Sorry for the inconvenience!

Kind regards,
Nick

#31 rosi 2011-10-25 19:05

cool

#32 Nick 2011-10-25 20:36

Cool indeed! :)

Kind regards,
Nick

#33 Shah 2011-11-08 08:41

Wonderful, I like it.

#34 Nick 2011-11-08 16:12

I'm glad you like it! :)

Kind regards,
Nick

#35 gofer123 2011-11-11 21:02

Hi Nick,
This is a fantastic extension! I've been hunting the internet for days trying to find a way of using jQuery in Joomla 1.7, really easy even for me! Just having a little problem getting the animation to work? I know I'm probably missing something very simple, I just want a div to move to the right by about 100px on load. Would appreciate your words of wisdom.
Thank you
Pete

#36 Nick 2011-11-11 23:02

Hi Pete,

You're welcome! You should consider leaving a review on the JED for it :)

What's the URL to your page so I can have a quick look? Also, which div are you trying to move?

Kind regards,
Nick

#37 gofer123 2011-11-11 23:09

Thanks for the quick reply Nick.
My site is still local development stage, I'm afraid so no url.
The div is inside a another div in the masthead, I got the dive to slide up over 10s no problem but I would like it move to the right if possible, thanks
Pete

#38 gofer123 2011-12-06 00:40

Hi Nick,
Got the above problem sorted out but have a small prob, is there anyway to move lxEdit window, sometimes it sits above a div I want to action.
Thanks.

#39 Nick 2011-12-06 04:09

Hi Pete,

Sorry I didn't see this comment earlier. If you ever need any more help and I don't reply, feel free to use our contact form.

Kind regards,
Nick

#40 Nick 2011-12-06 04:10

Hi Pete,

You can just click and drag the window to another position.

Kind regards,
Nick

#41 gofer123 2011-12-06 05:11

Hi Nick,
Thanks for the reply, I tried the old click and drag but nothing! I had to use IE as it wouldn't work in Firefox I get a popup telling me I need Google gears which I've already installed?
Thanks, Pete

#42 Nick 2011-12-06 05:43

Hi Pete,

Could you send me some login credentials to nick@ostraining.com so I can take a quick look for you?

Kind regards,
Nick

#43 Bertus 2012-06-02 06:13

did as instructed right at step one to install, getting this error:

Error! Could not find a Joomla! XML setup file in the package.

#44 Romero leonados 2012-06-11 22:39

Does JoomEdit support for joomla verion 2.5? It does not working on my joomla version 2.5

#45 Guest 2012-10-24 07:10

from where to download this there is no download button

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

Create a Joomla Test Site Using Akeeba Backup
Comment by Mikias
very detailed and thanks! I really really need your help please. i have installed the ...
Magic Quotes Error With Joomla 3 Installation
Comment by yahye
plz help me i done all the steps but i confused Wat's meant and what i replace by ...
Add a Sitemap to Your Wordpress Site
Comment by ram_theprince
Thank you very much. Thats super cool and simple instructions.
Migrate Virtuemart 1.1 to Version 2
Comment by Stephen H
Worked like a charm. Thanks a million!
Installing TinyMCE in Drupal 7
Comment by Binary
Downloading an older version of TinyMCE resolved my issue.

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

Joomla Tutorials and Blog Posts