Question about "What's New With Ning" Module

[⚡JFarrow⌁]

I want to recreate the new modal window that Ning recently put on our site.

I am able to get the HTML part of the modal working on a page in my site however, I am trying to figure out how to generate the xg_token which apparently needed to close the modal after reading.   I found the xg_token inside the source code of my pages but for some reason I am unable to close the modal.   Could someone at Ning help me identify which token to use or how to generate one for this purpose?

Is the token page specific or user specific or domain wide?   Scratching my head... thanks for any help...

[Anastasia_Ning_Support]

Hello Justin!

I have asked around, and if I understood your question correctly, you will not really be able to use this version of pop-up, because we do not use token, once the network owner checks the box and closes the pop-up, his action is recorded in the database and therefore during the next visit it will not be shown. Sorry :(

Best regards,

The NING Team

[Suzie Nielsen]

Must be SOOOOO NICE to see updates like those... meanwhile, I struggle to keep my 10 yr old Ning 2 alive...

Don't guess it will help to ask... anything new for Ning 2?

Thanks Suzie

[Anastasia_Ning_Support]

Hello Suzie!

I am very sorry, but there will be no new features for 2.0, only the maintenance updates. 

Our team is working on developing updates for 3.0 platform, this is why we are offering migration for everyone who is interested. 

Best regards,

The NING Team

[Bizz]

Hmm just wondering if we could make use of the like or vote options to do this as a member can only use these once against a post, so the idea would be to use these and change the text from like to don't show again and then we could use some code to check if the member has 'liked' and if so then hide this box.

Will have a play and see what can come up with.

Bizz :-)

[Bizz]

Hi JF, I think I have come up with a nice solution for this for you, just got to get it all wrote up and will put a post up. Sent you an invite to the site so you can check it out as well.

Bizz :-)

[Bizz]

Here is an image showing the popup, I just used the ning wording for example.

[⚡JFarrow⌁]

wow... that looks exactly like what i was trying to do...

[Bizz]

Justin here is what I have come up with and seems to work very well. I've used a blog page instance to hold the message/s as when you add them to a page as add content you get the like button and this we can use as our 'token' seeing as a member can only like or unlike.

As we are using a blog page you can either add it to the unlinked pages section or keep it in the nav bar so members can go back and review the messages and also you could add some other categories for other messages that they can see if they want. If you go to my site you will see the Messages link in the nav bar so you can get an example.

Ok to set this up we just need to create a blog page and add a category and this category is going to be used for the pop up messages. The good thing is you then don't have to keep changing an existing message but just add a new one as we are going to set the add content module to only display one message which will always be the latest one.

There is a button for the member to close the message if they so wish without selecting the don't show box but it will keep showing when they visit the page it's on until they select the don't show button. The don't show button is actually the like button so if they ' like the message ' it will not show again and to get the message to show again you unlike it. You can add this to one or as many pages as you want by simply using the add content for the page.

Below is how I have the blog page set up, make not of the category for messages as this is the category for the messages to show and the use the messages for the url

Next is an image of adding the ' add content module to a page

That's it really for setting those up. In the code all you will see in the css there is a section that creates the pop up, if you just want it to display in a column leave that bit out. You may have to edit the text colours with some css depending how it looks on your colour scheme but I can help with that if need be.

So here is the custom code for you end of page section first

<script>
x$('.section-blogBundle .module-name > a[href="https://landsurveyorsunited.com/messages/Messages"]').closest('.section-blogBundle').hide();
x$(document).ready(function(){
x$('.section-blogBundle .module-name > a[href="https://jr-images.ning.com/messages/Messages"]').closest('.section-blogBundle').addClass('siteMessage').hide();
x$('<a class="close-siteMessage" title="Close">Close</a>').insertAfter('.siteMessage .entry-footnote');
x$('.siteMessage .likeButton a').attr('title','Do Not Show Again');
x$('.section-blogBundle').show();
x$('.siteMessage').show();
x$('.siteMessage .likeButton a.is-selected').closest('.siteMessage').addClass('dontshow').hide();
x$('.siteMessage .likeButton a').hover(function() {
x$(this).attr('title','Do not Show Again');
});
});
</script>

<script>
x$(document).ready(function() {
x$('a.close-siteMessage').click(function(){
x$('.siteMessage, .siteMessage.dontshow').hide();
});
});
</script>

<script>
x$(document).ajaxSuccess(function() {
x$('.activityFeed-headline > a[href^="https://landsurveyorsunited.com/messages"]').closest(".feedEvent-createBlogPostLike").addClass('activityMessageHide').hide();
});
</script>

 

And Here is the css

.activityMessageHide{ display:none!important }
.section-blogBundle{ display:none }
.siteMessage{ display:none}
.siteMessage.dontshow{ display:none!important}
.siteMessage .likeButton a.is-selected { background-color:grey!important; padding:5px!important }
.siteMessage .likeButton a{ padding:5px!important; border:solid 1px black; background-color: white; color:transparent!important }
.siteMessage .likeButton a:hover{ background-color:red }
.siteMessage .likeButton .icon{ display:none }
.siteMessage .likeButton .likeButton-count{ display:none }
.siteMessage .likeButton:before
{
content: "Don't Show Again";
display: inline-block;
font-size: 1em;
color: grey;
vertical-align:top;
}
.siteMessage .section_header, .siteMessage .avatar-frame, .siteMessage .entry-byline, .siteMessage .entry-readMore, .siteMessage .entry-tags{
display:none!important;
}
.siteMessage .close-siteMessage:hover{ cursor:pointer;color:white; background-color:royalblue }
.siteMessage .close-siteMessage{
padding: 5px 10px;
background-color: lightgray;
border-radius: 4px;
}

/** Add for popup style **/
.siteMessage {
position: absolute;
top: 0;
width: 100%;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.57);
z-index: 2000;
}

.siteMessage .module-body{
width: auto;
margin: 10% auto;
background-color: white;
text-align: left;
padding: 20px;
position: absolute;
left: 0;
right: 0;
top: 0;
border-radius: 10px;
max-width: 400px;
box-shadow: 1px 7px 10px #333;
}

Here is how the popup will look

Hope this is ok for you

Bizz :-)

[⚡JFarrow⌁]

Wow Bizz... thank you...ill give it a try... very innovative workaround..

[Bizz]

No worries, glad could help. Oh by the way here is the link to the Featured Indicators css I used for my activity feed

https://jr-images.ning.com/blog/activity-feature-indicators

Bizz :-)