Help with jQuery Mods and Hacks for your Ning Network!
The Custom Code box is the same as the Analytics box. It used to be called the Analytics box and now it is called the Custom Code box.
Here is how to find your Custom Code / Analytics textbox:
1. Click on the Manage Tab of your Main Menu.
2. Click on Custom Code under the Tools category of links in a column on the left side of the page.
3. You will see a textbox on the Analytics page with a Save button under it. After you enter or modify code in the textbox, click Save to put the code into effect immediately.
All code added to the Analytics textbox must be wrapped in a script tag. This means that the first line of code in your Analytics textbox should be:
the last line of your code should be:
If you are adding jQuery code, you should wrap it inside these two lines, which is known as the Document Ready function. The first line of jQuery code should be:
and the last line of jQuery code should be:
This piece of code ensures that your jQuery code runs at the right time, after the page is ready to accept it. ANOTHER EFFECT of putting your jQuery code inside the Document Ready funtion on Ning is that only Members will see the effect of the code. If you want all visitors to your site to see the effect of the code, DO NOT put it inside the Document Ready function!
As an example, suppose you want to remove the "Ning Bar" from the very top of your pages. This is what you would copy and paste into your Analytics textbox:
// Remove Ning Bar:
NOTE - If you have already put one or more of our code mods in your Analytics textbox, you won't need to copy the script tag and ready function. For example, if you wanted to add the "remove Ning Bar" mod I showed above, and you already had some jQuery code in the textbox, like this:
// SOME EXISTING JQUERY CODE
you would just need to add the new code:
// Remove Ning Bar:
under your existing jQuery code, BUT above the closing 2 lines of code:
and this line must be added outside of any other script tags you have in your analytics textbox!
So to wrap this up, and as an example, this is some of the code in the Analytics textbox for this Ning site:
x$("h2:contains('Latest Activity')").parent().before("<div>BEFORE Latest Activity</div>");
x$("div.xg_module_body.profile.vcard").find("dt.fn").find("span.fn").before("<span>Under Member Pic</span>");
great and easy guide.. thanks
You are Great TJ thank you so much.. keep it up
wow i have tried this code to my other ning site..it works perfect! thanks TJ...
thank you all
it works for me too - and it seems like there is cool things around here
If you dont know where to locate the Analytics textbox, just read the instructions above.