Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

If you have been running your community for some time you probably have a lot of resources to share.  You may be looking for a compact way to showcase many tools in the same place, such as a getting started page or a resources page.  I am going to quickly show you how to build a simple way to switch between several iframes without leaving the page.  You can see it live inside a text box on this group inside a Ning 2.0 (but it will certainly work inside 3.0)...and alternatively I have it hosted standalone in my github here (so i can iframe in my iframe switcher).

 

Let's begin.

HTML (You can shorten the URLs if you like)

<select class="switcher">
<option value="https://somelink.com/">Something</option>
<option value="https://goo.gl/BPVk7m">Else</option>
<option value="https://goo.gl/fnvCqW">Workflows</option>
<option value="https://goo.gl/0A86G1">Another Resource</option>
<option value="https://goo.gl/mYLons">Another</option>
<option value="https://goo.gl/EjW6fI">Yep, another</option>
<option value="https://goo.gl/DFTv72">And this one</option>
<option value="https://goo.gl/MK5rOa">yes and again</option>
<option value="https://goo.gl/YXdIWs">next to last resource</option>
<option value="https://www.justinfarrow.com/ning">JFarrow helps with Ning sites</option>
</select>


<iframe class="switch-target" width="100%" height="600" src=""></iframe>

 

 

CSS  (style the select box however you like)

<style>    select { display: block; }         </style>

 

JS (must add small x in front of all jquery $ signs inside Ning)

<script>

var switcher$ = x$('.switcher'), // select element
switchTarget$ = x$('.switch-target'); // iframe

switcher$.on('change', switchIframeSrc); // event binding

// our functiono to switch the iframe src
function switchIframeSrc() {
// set the 'src' attribute of the iframe
// to the value of the selected option
switchTarget$.attr('src', switcher$.val());
}

// call the method on load
switchIframeSrc();

 

</script>

 

Here is all the HTML, CSS and JS inside my codepen for you to fork and try with your own links and resources...  your links inside the iframe MUST be https:// to work.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • WOW where does code go ? in DS or i the Custome code

  • I have  done my links https but no work may I message you  what I did and you can give me better instruction as I missed not doing somethings

     

    Also where does JS go and the CSS? In DS or   other  thanks

    • NC for Hire

      HTML goes in page module... CSS goes in Design studio and JS goes in Custom Code bottom of page

      • Thanks

      • Did that links you click right links and do not go anyplace

      • I think I messaged you file of my codes?? or links  wiht in the code

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Marco Westerhof replied to Victoria_NING's discussion
iDeal – new payment method on the NING E-commerce platform
"Excellent !!"
5 hours ago
Badan Barman replied to Victoria_NING's discussion
iDeal – new payment method on the NING E-commerce platform
"Sir,
Thank you for this wornderfull news. I am sure it will atlest help the Ning Network Creators w…"
9 hours ago
Fernando Bisbal replied to Fernando Bisbal's discussion
The name of the groups is not shown in the urls
"you have not understood me ... I have not spoken at any time of private groups ... my more than 100…"
13 hours ago
Thisisbully replied to Fernando Bisbal's discussion
The name of the groups is not shown in the urls
"If the groups are private the url won’t show "
17 hours ago
Ingrid Silva Cárcamo left a comment on Ning Networks en español
"Hola, compré un dominio en Namecheap: midominio.club seguí todas las intrucciones que dan en Ning y…"
19 hours ago
Fernando Bisbal replied to Fernando Bisbal's discussion
The name of the groups is not shown in the urls
"I have another proof of what I am saying here is true. and it can be checked easily.
If you copy th…"
yesterday
Henry Taylor commented on Gerard Nealy's blog post SSL Certification
"In March 2018, the person who created our account (non-techie but had the credit card) checked the…"
yesterday
Drake Vargas replied to Victoria_NING's discussion
iDeal – new payment method on the NING E-commerce platform
"Great news, thank you for the update! Hope this will help my network"
Friday
Matthew Aukai Wright replied to Elson Tan's discussion
[2/3.0 TIP] How to use Ning's User Profile Variable
"Hi there Kyryl. I wanted to put it to be like this in the picture. "
Thursday
Kyryl_Ning_Support replied to Elson Tan's discussion
[2/3.0 TIP] How to use Ning's User Profile Variable
"Hi there!
You should modify the script a bit. Instead of the .ningbar-userLinks li:last-child there…"
Thursday
More…

Meanwhile, you can check our social media channels