jQueryHelp

Help with jQuery Mods and Hacks for your Ning Network!

FREE APP, JUST FOLLOW THE 2 SIMPLE RULES BELOW!!!!!

NEW! FREE CODE FOR NING 3.0!  See below...

Hi my friends!

It is time to get your Ning sites into the 21st century!   Here is a very cool feature that you can add to your sites that gives your members the type of experience they expect from modern websites.

With this app, your members can scroll down the Main page and when the "more..." button in the Latest Activity List is visible on the page, it will automatically show More Latest Activity!  No need for your visitor to click that "more..." button, the content just loads!

ALL the best new sites have this, now your Ning site can have it!

Facebook has this, Twitter has this! Pinterest has this! YOUR MEMBERS want this!

Check it out on our Main page and please give me your feedback here.

Here is the code (it goes in your Analytics / Custom Code box. Read the RULES below!):

<!-- TJ - 7/16/12 - Latest Activity More on Scroll -->
<!-- COPYRIGHT B K SERVICES INC. ALL RIGHTS RESERVED -->
<!-- Please report stolen copies of this code, or unauthorized use, to TJ@BKServ.com -->
<script type="text/javascript">
function isScrolledIntoView(elt) {
    var docViewTop = x$(window).scrollTop();
    var docViewBottom = docViewTop + x$(window).height();

    var eltTop = x$(elt).offset().top;
    var eltBottom = eltTop + x$(elt).height();

    return ((eltBottom <= docViewBottom) && (eltTop >= docViewTop));
}

if (x$('#xg_network_activity').length > 0) {
    x$(window).scroll(function() {
        if (x$('#xg_network_activity').css('display') != 'none') {
            var elt = x$('button.xj_see_more');
            if (isScrolledIntoView(elt)) x$(elt).click();
        }
    });
}
</script>

YOU CAN USE THIS ONLY IF YOU FOLLOW THESE TWO RULES!!!!

1. DO NOT CHANGE ANYTHING WITHOUT MY PERMISSION!  COPY IT EXACTLY AS IT IS TO YOUR CUSTOM CODE BOX.

2. LET ME KNOW YOU ARE USING THIS ON YOUR SITE! TELL ME HERE IN THIS FORUM DISCUSSION WHAT THE URL IS OF THE MAIN/HOME PAGE WHERE YOU ARE USING THIS.

 

If you do NOT follow these 2 simple rules then you can't use this code!

Follow these rules or I will catch you and I will prosecute you.  You have been warned!

Anyone who finds someone using this code who has broken either rule will be rewarded with CASH in the form of jPoints!

 


Notes, PLEASE READ:

1. You may want to move the Latest Activity module to the bottom of your Main page because anything under it won't show until all your Latest Activity has loaded.

2. If you want this code to work for the Latest Activity on your members' profile pages, let me know.  If people want it, I'll give out the code for that.

3. This is just a small part of a bigger app called "More On Scroll" which scrolls more list items, comments and replies on all pages of your Ning Network.  More about that, HERE!

4. This probably won't work if you added a vertical scroll bar to your Latest Activity module.

5. This probably won't work with Vaqz' jQuery Tabs mod that a lot of people found on Creators and are using on their sites. http://creators.ning.com/forum/topics/jquery-tabs-save-more-space

THANKS and best wishes!

"TJ"

'TJ' is the Owner of jQueryHelp.
Please Visit http://YouTubeStars.com - Thanks!
NING 3.0 Version. 
If you use this, follow the 2 simple rules above.
Also, please follow me on Twitter!  http://Twitter.com/TJprogrammer  Thanks!
This goes in your Custom Code, End of Page Code box:
<!-- Code By TJ - 7/29/14 - Latest Activity More on Scroll -->
<!-- COPYRIGHT B K SERVICES INC. ALL RIGHTS RESERVED -->
<!-- Please report stolen copies of this code, or unauthorized use, to TJ@BKServ.com -->
<script type="text/javascript">
function jQH_IsScrolledIntoView(elt) {
    var docViewTop = x$(window).scrollTop();
    var docViewBottom = docViewTop + x$(window).height();

    var eltTop = x$(elt).offset().top;
    var eltBottom = eltTop + x$(elt).height();

    return ((eltBottom <= docViewBottom) && (eltTop >= docViewTop));
}

if (x$('div.section-activity').length > 0) {
    x$(window).scroll(function() {
        if (x$('div.section-activity').css('display') != 'none') {
            var elt = x$('a.activityFeed-moreOldItemsButton');
            if (jQH_IsScrolledIntoView(elt)) x$(elt).click();
        }
    });
}
</script>

Views: 1634

Reply to This

Replies to This Discussion

Hi TJ... I just added this to http://intheloopwithloop.ning.com  (sandbox 3.0)

Thanks,

Holly

Hey Tj,Have used this tip for years and love it, but it there a way to disable on mobile for 3.0? Kind of like how we use css of @media screen?

Hey FT!

Sorry for the delay.  Yes, maybe this would work...

Change this one line

if (x$('div.section-activity').length > 0) {

to this

if (x$('div.section-activity').length > 0 && x$(window).width() >= 1280) {

That should make the code work on screens that are 1280px and wider, but not work on smaller screens.

Play with the 1280 number if you want, but that is what Ning uses in some @media CSS statements that I have seen, if I recall correctly!

Best wishes!

"TJ"



Fire-Tech said:

Hey Tj,Have used this tip for years and love it, but it there a way to disable on mobile for 3.0? Kind of like how we use css of @media screen?

'TJ' is the Owner of jQueryHelp.
Please Visit http://YouTubeStars.com - Thanks!

That worked great! Thank you my friend!

TJ @ jQueryHelp said:

Hey FT!

Sorry for the delay.  Yes, maybe this would work...

Change this one line

if (x$('div.section-activity').length > 0) {

to this

if (x$('div.section-activity').length > 0 && x$(window).width() >= 1280) {

That should make the code work on screens that are 1280px and wider, but not work on smaller screens.

Play with the 1280 number if you want, but that is what Ning uses in some @media CSS statements that I have seen, if I recall correctly!

Best wishes!

"TJ"



Fire-Tech said:

Hey Tj,Have used this tip for years and love it, but it there a way to disable on mobile for 3.0? Kind of like how we use css of @media screen?

'TJ' is the Owner of jQueryHelp.
Please Visit http://YouTubeStars.com - Thanks!

Glad it worked for you!  

Fire-Tech said:

That worked great! Thank you my friend!

'TJ' is the Owner of jQueryHelp.
Please Visit http://YouTubeStars.com - Thanks!

This is a great tip . I had used Ning 2, but now I see that is also compatible for Ning 3. This is great news , what implementare in sections on this site :

Example site

Would you recommend implementing it in this section?

Hi Emalejandro,

I'm glad you liked the tip, thanks!

I do have some apps that work on other sections of Ning 3 sites.  I have one that works on the Photo and Forum LIST pages, which show a list of Photos or Discussions and have a pagination area at the bottom which would go to another page of list results if you click another page.  The price is $40.

I don't think you have a photos page but you do have a forum and this app should work there:

http://revistadiscover.com/forum/topics

I could modify the app to work on the Blog LIST page: http://revistadiscover.com/profiles/blogs

It would probably be an extra $20 to $50 to make the existing $40app work for blogs.

There is no "More" button or pagination at the bottom of any one article, such as the one you linked to.  The apps I already have, look for a "More" button or a page navigation area to know where to get the next piece of data from.  I could do a custom app to load the next article at the end of the current article, but it is a lot more work and the price would be at least $200.

If you want to buy anything I mentioned here, please message me.  If you have any further questions, please ask them here.

Thanks and best wishes!

TJ

'TJ' is the Owner of jQueryHelp.
Please Visit http://YouTubeStars.com - Thanks!

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