jQueryHelp

Help with jQuery Mods and Hacks for your Ning Network!

If you are an Administrator of your Ning Network, you can add jQuery and Javascript code to your site. This code can modify pages, add content, remove content, and provide other functionality.

All jQuery and Javascript code must be typed or pasted into your Custom Code / Analytics textbox.

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:

<script type="text/javascript">

the last line of your code should be:

</script>

Any javascript code that you add will go in between these two lines.

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:

x$(document).ready(function() {

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:

<script type="text/javascript">

x$(document).ready(function() {

// Remove Ning Bar:
x$("#xn_bar").remove();

});
</script>


We will be posting jQuery and Javascript code on this website for use on your Ning Networks. Each post will include the code you will need to paste into your Analytics textbox. I will usually include all of the lines you'll need, including the script tag and the ready function if it is jQuery code.

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:

<script type="text/javascript">

x$(document).ready(function() {

// SOME EXISTING JQUERY CODE

});
</script>

you would just need to add the new code:

// Remove Ning Bar:
x$("#xn_bar").remove();

under your existing jQuery code, BUT above the closing 2 lines of code:

});
</script>


One more thing:  If you are adding javascript or jQuery code that is in an external file, you will be able to run that code with a line like this:

<script type="text/javascript" src="http://www.something.com/SomeFile.js"></script>

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:

<script type="text/javascript" src="http://www.bkserv2.net/Analytics/jQueryHelp.js"></script>
<script type="text/javascript">
x$(document).ready(function(){
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>");
//x$("a.xg_sprite-discussion-open").parent().remove();
});
</script>




It might seem confusing at first, but it's really easy to add jQuery and JavaScript code to your Ning Network. Try some of the code that you'll find in other posts in this Forum and you'll see what I mean!

Best Wishes!

"TJ"

Views: 1716

Reply to This

Replies to This Discussion

great and easy guide.. thanks
You're welcome, Mirage. Always happy to help! :)

mirage said:
great and easy guide.. thanks
Here is a great book to learn JavaScript and jQuery:

JavaScript: The Missing Manual
You are Great TJ thank you so much.. keep it up :-bd
wow i have tried this code to my other ning site..it works perfect! thanks TJ...
Mat said:
You are Great TJ thank you so much.. keep it up

Thanks Mat, always glad to help!
Windows said:
wow i have tried this code to my other ning site..it works perfect! thanks TJ...

You're welcome and welcome to the site! :)
thank you all :)

it works for me too - and it seems like there is cool things around here :)
Roi Shillo said:
thank you all

it works for me too - and it seems like there is cool things around here

You're welcome and welcome to the site! :)
how to put the javascript inside the advance tab?
Hi ace javascripts are certainly not for advance tab.
All jQuery and Javascript code must be typed or pasted into your Analytics textbox.
If you dont know where to locate the Analytics textbox, just read the instructions above.

-vaqz

Ace said:
how to put the javascript inside the advance tab?
my analytic box is full, that why i want to put inside advance tab ... any idea ?

vaqz said:
Hi ace javascripts are certainly not for advance tab.
All jQuery and Javascript code must be typed or pasted into your Analytics textbox.
If you dont know where to locate the Analytics textbox, just read the instructions above.

-vaqz

Ace said:
how to put the javascript inside the advance tab?

Reply to Discussion

RSS

Notifications

Temporarily Offline

Friends of Friends

© 2017   Created by TJ @ jQueryHelp.   Powered by

Badges  |  Report an Issue  |  Terms of Service

EOP
EOP2