JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add a Simple Text Message Below or Above Your Main Menu Tabs.

You can add a quick message below or above your main menu tabs, by adding this code to your Analytics Box. This is a nice way to leave a daily message for your members. You can add text, images and hyperlinks, but javascript won't work - - to-date.

Note: This tip is similar to our previous tip for adding Text Message below the menu. But, this is cleaner, and also enables you to add Text above the menu tabs.

Please be sure to copy/paste with care. Do not change anything but your text. Make sure there is no line feed (return) before the end /DIV>'); tag.

You will find an attached text file for each case.

Here's the code if you can't see the attached text files.

Above Menu Bar:
<script type="text/javascript">
x$(document).ready(function() {
// Insert a DIV Before the Navigation/Menu Bar module:
x$("#xg_navigation").before('<div align="center" class="xg_module">Add Your Text Here.</div>');
});
</script>

Below Menu Bar:
<script type="text/javascript">
x$(document).ready(function() {
// Insert a DIV After the Navigation/Menu Bar module:
x$("#xg_navigation").after('<div align="center" class="xg_module">Add Your Text Here.</div>');
});
</script>

1 member favorited this

Attachments:

AddSimpleTextMessageABOVE_MenuTabs.txt, 1 KB
AddSimpleTextMessageBELOW_MenuTabs.txt, 1 KB

Replies to This Discussion

Permalink Reply by JenSocial on March 25, 2010 at 9:38pm

Hi Adrian,
No, just adding the marquee code will not work, due to the way the code is being interjected. You would need to add the marquee code to an HTML file, and call the HTML into an iframe, via the Analytics box - - too much custom for me to explain it in general.

However, I do have a tip here, that explains how to pull in an external HTML, using an iframe, in the Analytics box. I have 2 tips on the site, but I feel this one is the most detailed. You would replace the Google Ad code in HTML example, with your marquee code - - and follow all directions.
http://theningdirectory.ning.com/group/ningnetworktips/forum/topics...

Good luck and have fun,
Jen

Permalink Reply by elsodev on March 25, 2010 at 7:59pm

So complicated to some NC . I am working on a software that can simplify jQuery coding and you can simply edit , add and update your codes with the only a few clicks .

Permalink Reply by JenSocial on March 25, 2010 at 9:54pm

Sounds exciting!
;-)

Permalink Reply by Unimatez on March 26, 2010 at 2:27pm

I got it.......m so glad....it was so easy and I was simply breaking my head...lols

thanks guys,

Cheers

Permalink Reply by Successful Women Network on April 4, 2010 at 2:26am

hm the before one is working for me but moves my entire navigation down and the after one is not working at all and thats the one I really would have loved on Successful Women Network (between header and body) What am I doing wrong, Jen? Does it have something to do with my navbar being moved via CSS for the animated banner header?

Permalink Reply by JenSocial on April 4, 2010 at 11:48am

I think so, yes. It's due to the special CSS for your animated header.

Try this code:
<script type="text/javascript">
x$(document).ready(function() {
// Insert a DIV After the Navigation/Menu Bar module:
x$("#xg_navigation").after('<div align="center" class="xg_module" style="margin-top:-40px!important;>Add Your Text Here.</div>');
});
</script>

Change the -40 as needed. That pulls the text up, towards the menu navigation.

Best,
Jen

Permalink Reply by Successful Women Network on April 5, 2010 at 11:27am

PERFECT!!! you are so awesome Jen!!!
I did try to enter a link there but I assume it doesnt take links just plain text?

Permalink Reply by JenSocial on April 5, 2010 at 12:15pm

You should be able to add a link - - I'll test in a few minutes.

Glad the placement worked.

Permalink Reply by Successful Women Network on April 5, 2010 at 12:39pm

yes Im glad too I tried adding my network link such as SWN just to test it but it didnt take it at all. It displays my networks name but not as a clickable link

Permalink Reply by JenSocial on April 5, 2010 at 1:25pm

OMGosh, I thought this was not working due to overlap from invisible flash header, in fact, wrote that here, and just deleted what I wrote. But, I really felt something wasn't quite right. And it wasn't!!!!!!! Look at the code I gave you. I left out the ending right quote! Try this code. Facebook and Twitter links are included in example.

<script type="text/javascript">
x$(document).ready(function() {
// Insert a DIV After the Navigation/Menu Bar module:
x$("#xg_navigation").after('<div align="center" class="xg_module" style="margin-top:-40px!important;">Visit us on <a href="http://www.facebook.com/your_facebook" target="_blank">Facebook</a> and <a href="http://twitter.com/your_twitter" target="_blank">Twitter</a>.</div>');
});
</script>

Permalink Reply by Successful Women Network on April 5, 2010 at 2:49pm

Yay Jen you ROCK! It works like a charm :)

now I just have to find a way to have more room in my analytics box lol I only have 70 characters left until its full

Permalink Reply by JenSocial on April 5, 2010 at 1:39pm

What a nightmare, LOL. Look on end of discussion for final answer. I left out an ending quote, after I added the top:-40px!important;