Tons of JavaScript and jQuery mods!

[TJ @ jQueryHelp]

Okay, not tons, but 27 little mods you can use on Your Ning Network. These examples might help you to learn a little about coding so you can create your own solutions. If you have any questions about any of the mods, feel free to ask!

If you're new to putting code in your Analytics textbox, please read my post on Beginner's Guide to JavaScript and jQuery - it might answer some of your questions.

Here is the block of code hacks, use whatever you need!





<script type="text/javascript">

// This is a Comment! Any line that starts with // is a comment and is NOT executed!
// Every section of code does something different.
// There is a comment before each section that describes what it does.
// If the comment starts with (JS) its JavaScript code.


// ----- (JS) Insert a Message under the Ning Bar on every page:
var insertionPoint = document.getElementById('xn_bar');
// If you want the Message to be under the Menu instead, change xn_bar to xg_head
// if the exception ID exists, we're on the Sign In page and we abort
var exceptionElement = document.getElementById('signin_email');
if ((exceptionElement == null) && insertionPoint) {
// Adjust the CSS style if you want!
var bannerAdHtml = '<div style="color: #FF0000; border: 1px; background-color: #99EEEE; text-align: center; padding: 5px; font-size: 16px; font-family: Courier New;">PUT YOUR MESSAGE HERE</div>';
insertionPoint.innerHTML += bannerAdHtml;
}
// ----- END


// ----- (JS) Insert Message in top part of footer on every page:
var insertionPoint = document.getElementById('xg_foot');
// if the exception ID exists, we're on the Sign In page and we abort
var exceptionElement = document.getElementById('signin_email');
if ((exceptionElement == null) && insertionPoint) {
// Adjust the CSS style if you want!
var bannerAdHtml = '<div style="color: #FF0000; border: 1px; background-color: #99EEEE; text-align: center; padding: 5px; font-size: 16px; font-family: Courier New;">PUT YOUR MESSAGE HERE</div>';
insertionPoint.innerHTML = bannerAdHtml + insertionPoint.innerHTML;
}
// ----- END


// -------------- ALL THE REST IS jQuery CODE -------------------------------
// The next line waits for the page to load
// before it allows the rest of the jQuery to run:
x$(document).ready(function() {



// ----- Change Header background image at random on each page refresh:
var rn = Math.floor(Math.random()*2) + 1
if (rn == 1) x$("#xg_masthead").css("background-image", "url(http://www.xxx.com/xxx.jpg)");
if (rn == 2) x$("#xg_masthead").css("background-image", "url(http://www.xxx.com/xxx.jpg)");
// To add more images, change the 2 in the first line
// to the total number of images, and change the == 2
// to == 3, == 4, etc for each new line you add for each image.
// ----- END



// ----- Show just Titles on All Notes page:
x$(".notes_list > *:not('h3')").remove();
// ----- END



// ----- Remove Photos tab on "My Page" page only:
if (x$(".xg_widget_profiles_profile").length > 0) x$("a:contains('Photos')").parent().remove();
// ----- END



// ----- Remove Member count on Members page only:
if (x$(".xg_widget_profiles").length > 0) x$(".count").remove();
// ----- END



// ----- Change "Members" to "Fans" but only on Main page:
if (x$(".xg_widget_main").length > 0) x$("a:contains('Members')").text("Fans");
// ----- END



// ----- Remove Ning Bar from the very top of the page:
x$("#xn_bar").remove();
// ----- END



// ----- Remove all Counts,
// like in "Discussion Forum (3,932)" the number in () is the Count:
x$(".count").remove();
// ----- END



// ----- Remove " - Invite" from box in upper right corner:
x$("small").find("a[href*='invite']").parent().remove();
// ----- END



// ----- Remove avatar from Blog list:
x$(".xg_blog_list").find("span.xg_avatar").remove();
// ----- END



// ----- Remove "Get Embed Code" link:
x$(".embed").remove();
// ----- END



// ----- Remove "Invite Friends" from Quick Add... dropdown list:
x$(".quickpost").find("option[value='invite']").remove();
// ----- END



// ----- Put Message under Ning bar:
x$("#xg").before("<div style=' float: center; color: #FF0000; border: 1px; background-color: #AB1F00; text-align: center;'>MESSAGE</div>");
// ----- END



// ----- Remove online status and icon:
x$(".online").remove();
// ----- END



// ----- Remove "Added By" from videos on Main page:
x$(".tb").find("p.xg_lightfont").remove();
// ----- END



// ----- Add a message under the "About" module in the right column:
x$(".module_about").after("<div style='background-color:red'>Right Column Message is HERE!!!</div>");
// ----- END



// ----- Hide Comment Wall
x$(".xg_module_comment_wall").hide();
// ----- END



// ----- Hides all current Comments:
x$("#comments").hide();
// ----- END



// ----- Hides the message, "Add a Comment":
x$("#add-comment").hide();
// ----- END



// ----- Change generic Video thumbnail pic to a custom one:
x$(".ib").find("a").find("img[src*='generic.gif']").attr("src", "http://www.xxx.com/xxx.jpg");
x$(".videothumbs").find("li").find("a").find("img[src*='generic.gif']").attr("src", "http://www.xxx.com/xxx.jpg");
// ----- END



// ----- Remove "View Full Size" link on Photos page:
// x$("a:contains('View Full Size')").remove();
// ----- END



// ----- Remove "All Photos" link on Photos page:
x$("a:contains('All Photos')").parent().remove();
// ----- END



// ----- Remove "All Albums" link on Photos page:
x$("a:contains('All Albums')").parent().remove();
// ----- END



// ----- Remove link from a pic to larger version, on a photo page:
var pic = x$(".mainimg").find(".photo").find("a").html();
x$(".mainimg").find(".photo").html(pic);
// ----- END



// ----- Remove the Invite Tab from Main Menu:
x$('li#xg_tab_invite').remove();
// ----- END



// ----- Make header into a link:
x$('#xg_masthead').wrap('<a href="http://www.xxx.com"></a>');

// Change the cursor to a hand when it's over the header:
x$('#xg_masthead').hover(
function () {
x$(this).css("cursor", "pointer");
},
function () {
x$(this).css("cursor", "default");
}
);
// ----- END



}); // END READY function



</script>

[TJ @ jQueryHelp]

This is a collection of the answers I provided in the developers forumun until the middle of February. I answered a bunch more questions since then, and I'll put them in a post also, soon.

[Ms Sexy Ruca]

i got some cool codes myself that i discovered heres 2 of them i also put them in the forum on the ning devlopers website

how to change the music module header as well as all the text box headers to pictures


many people were having problems with this cause there was no name for the music header it's just called "header" so i used my firefox firebug found out how to change the color of the music module header as well as the text box headers but... how to make it a picture instead of a solid color hmmm so i played around with the code adding and changing some things and came up with this and it worked! so just add this to advanced box putting the url of your pic where it say URL_OF_PIC_GOES_HERE.


.xg_module_head {
background-image:url(URL_OF_PIC_GOES_HERE);
background-repeat:no-repeat;


changing the color of the green welcome box


ok so you don't want to get rid of it why not change the color to better match your color sceme. all you have to do is just add this code to the advanced box. just change the color to the color you want.



#welcome.welcome-nc {
background-color:#663300 !important;
color:#FFFFFF !important;
}



here's how you change the border around the box



#welcome {
border:2px solid;
margin:0 0 10px;
padding:12px !important;
}

cheers to all of you :D

[TJ @ jQueryHelp]

Very cool! Thanks so much for sharing this with us. :D

Ms Sexy Ruca said:

i got some cool codes myself that i discovered ...

[Ms Sexy Ruca]

your welcome glad to help out the only thing with the color changing of the green welcome box i cant get rid of the writing that say ning at the corner. but the rest is all the color of your choosing.

TJ James said:

Very cool! Thanks so much for sharing this with us.

Ms Sexy Ruca said:

i got some cool codes myself that i discovered ...

[Saf]

Hey TJ! Please, can you post me code to remove a javascript banner inserted on top of every page form the "sign in" page? You gave it to me once before but I accidentally removed it! Thanks!

[TJ @ jQueryHelp]

Hi Alex,

Thanks for bringing this to my attention. Ning must have changed something, this used to work fine but now the header does seem to want to appear right under the Ning Bar, which covers up any banner you add under the Ning Bar.

I was able to solve the problem with these 2 lines of jQuery. If you come up with a CSS solution, please post it here!


x$("div#xg").css("position", "relative");
x$("div#xg").css("top", "24px");


You can see the results at the top of this page ------^

Alex James said:

A problem with the JS code to add a message under the Ning bar. Do you need to change the CSS separately for that to work? It's showing on mine but goes in the background, so basically I can just see the sides, it isn't creating empty space like the footer banner does..

[TJ @ jQueryHelp]

Hi Saf,

If you don't want your banner to appear on the Sign In page, you'll need to mod the code like this:

if (document.getElementById('signin_email') == null) {

YOUR BANNER CODE

}


That will keep it off the Sign In page. If you Also don't wnat it on the Sign UP page, change it to this:

if ((document.getElementById('signin_email') == null) && (document.getElementById('signup_email') == null)) {

YOUR BANNER CODE

}


Hope that helps!

"TJ"

[Saf]

TJ James said:

Hi Saf,
If you don't want your banner to appear on the Sign In page, you'll need to mod the code like this: if (document.getElementById('signin_email') == null) { YOUR BANNER CODE }


That will keep it off the Sign In page. If you Also don't wnat it on the Sign UP page, change it to this:

if ((document.getElementById('signin_email') == null) && (document.getElementById('signup_email') == null)) {

YOUR BANNER CODE

}


Hope that helps!

"TJ"

Thanx, but I have some trouble, not shure where to put it (either I'm doing it wron, either it's not working)
Here's what I've got:

Insert an banner (google adsense...) on top of every page:

script type="text/javascript"
google_ad_client = "pub-XXXXXXXXXXXXXXX";
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
//-->
/script
script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
/script

script type='text/javascript'
var ningpage = document.getElementById('xg');
var newelement = document.createElement('div');
ningpage.parentNode.insertBefore(newelement, ningpage);
newelement.id = 'adHack'
newelement.setAttribute('align','center')
dojo.addOnLoad(function() {
var iframes = ningpage.parentNode.getElementsByTagName('IFRAME');
for(var i=iframes.length-1; i>=0; i--){
if(iframes[i].getAttribute('name')=='google_ads_frame'){
banner = iframes[i]
break;
}
}
if(banner){
newelement.appendChild(banner)
}
});
/script

I've left out < and > and XXXXXXXXXX is where your google code goes..

Where do I put this: if ((document.getElementById('signin_email') == null) && (document.getElementById('signup_email') == null)) { ??


P.S. I've noticed some "text" in couple of (wrong) places on your network, something similar happened to me, I think some of your hacks u use on this network are glitching?

And firebug says it's eop div tag? Something to do whit your smiley code?

[Saf]

Alex James said:

......
...src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
/script
script type='text/javascript'
if ((document.getElementById('signin_email') == null) && (document.getElementById('signup_email') == null)) {
var ningpage = document.getElementById('xg');
var newelement = document.createElement('div');
ningpage.parentNode.insertBefore(newelement, ningpage);
newelement.id = 'adHack'
newelement.setAttribute('align','center')
dojo.addOnLoad(function() {
var iframes = ningpage.parentNode.getElementsByTagName('IFRAME');
for(var i=iframes.length-1; i>=0; i--){
if(iframes[i].getAttribute('name')=='google_ads_frame'){
banner = iframes[i]
break;
}
}
if(banner){
newelement.appendChild(banner)
}
});

}
/script


I think this should work

:( nope, I've tried it myself before, and I've tried it again, but it still shows up on sign in/up page :( Thanx Alex, but, last time TJ posted me the code (had to delete my ning acc along whit all my developer.network forum discussions :( it was a:

script type='text/javascript'

sometin' sometin';

/script

I've pasted it outside the existing script and it worked...

[TJ @ jQueryHelp]

I need to have a good look at this again. The problem is that the Google Ads script runs and produces an ad no matter what page is displayed. I was about to suggest you try exactly what Alex suggested, before I went to page 2 of this thread and saw the rest of the replies. But all the "if" statement would do is not move the ad on the sign up and sign in pages, it would still be displayed. The key might be to put the google ad code in a js variable and then only put it in the newelement if we're not on the sign in or sign up page....

I'll have to look back in my list of code mods I've given out and see if I can find what I told you to do last time! :)

[TJ @ jQueryHelp]

Saf said:

P.S. I've noticed some "text" in couple of (wrong) places on your network, something similar happened to me, I think some of your hacks u use on this network are glitching?

And firebug says it's eop div tag? Something to do whit your smiley code?

It's there on purpose. :) It's there for testing purposes on the Recently Active Members application.

[Saf]

Hey Alex my man! Thanx, I appreciate your effort, but the problem persists.

When put as separate tag, the banner isn't showing on any page :(

When put inside the main tag, nothing happens :(

TJ is right, the code he posted me some time ago was for the static .jpg banner, and not for adsense banner.