iframes - Blogs - Ning Creators Social Network2024-03-29T15:36:39Zhttps://creators.ning.com/blogs/feed/tag/iframesHow to build an Iframe Switcher for Your Communityhttps://creators.ning.com/blogs/how-to-build-an-iframe-switcher-for-your-community2018-07-08T00:36:14.000Z2018-07-08T00:36:14.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><img src="https://storage.ning.com/topology/rest/1.0/file/get/50393845?profile=RESIZE_400x&width=400"></div><div><p>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 <a href="http://landsurveyorsunited.com/group/surveyorsonlinetoolbox" target="_blank" rel="noopener">inside a text box on this group</a> inside a Ning 2.0 (but it will certainly work inside 3.0)...and alternatively I have it hosted standalone in my github <a href="https://landsurveyorsunited.github.io/cssfiles/switcher.html" target="_blank" rel="noopener">here</a> (so i can iframe in my iframe switcher). Let's begin.</p><p><span style="font-size: 14pt;"><strong>HTML (You can shorten the URLs if you like)</strong></span></p><p><select class="switcher"><br/> <option value="https://somelink.com/">Something</option><br/> <option value="https://goo.gl/BPVk7m">Else</option><br/> <option value="https://goo.gl/fnvCqW">Workflows</option><br/> <option value="https://goo.gl/0A86G1">Another Resource</option><br/> <option value="https://goo.gl/mYLons">Another</option><br/> <option value="https://goo.gl/EjW6fI">Yep, another</option><br/> <option value="https://goo.gl/DFTv72">And this one</option><br/> <option value="https://goo.gl/MK5rOa">yes and again</option><br/> <option value="https://goo.gl/YXdIWs">next to last resource</option><br/> <option value="https://www.justinfarrow.com/ning">JFarrow helps with Ning sites</option><br/></select></p><p><br/><iframe class="switch-target" width="100%" height="600" src=""></iframe></p><p> </p><p> </p><p><span style="font-size: 14pt;"><strong>CSS (style the select box however you like)</strong></span></p><p><style> select { display: block; } </style></p><p> </p><p>JS (must add small x in front of all jquery $ signs inside Ning)</p><p><script></p><p>var switcher$ = x$('.switcher'), // select element<br/> switchTarget$ = x$('.switch-target'); // iframe</p><p>switcher$.on('change', switchIframeSrc); // event binding</p><p>// our functiono to switch the iframe src<br/>function switchIframeSrc() {<br/> // set the 'src' attribute of the iframe<br/> // to the value of the selected option<br/> switchTarget$.attr('src', switcher$.val());<br/>}</p><p>// call the method on load<br/>switchIframeSrc();</p><p> </p><p></script></p><p> </p><p>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.</p><p><iframe src="//codepen.io/JFarrow/embed/wXVqvj/?height=300&theme-id=3719&default-tab=html,result&embed-version=2" width="100%" height="300" frameborder="no">See the Pen <a rel="nofollow" href="https://codepen.io/JFarrow/pen/wXVqvj/">Iframe Switcher GSLSU</a> by JFarrow (<a rel="nofollow" href="https://codepen.io/JFarrow">@JFarrow</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.</iframe></p></div>Tip 2.0& 3.0: How to Make Your Iframes Full Screen and Responsivehttps://creators.ning.com/blogs/tip-2-0-3-0-how-to-make-your-iframes-full-screen-and-responsive2014-07-05T22:12:34.000Z2014-07-05T22:12:34.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><em>Who wants full screen, responsive Iframes solution for their Ning Site?</em> I know I have for a while. What I am going to show you all today is something I've been trying to figure out for around 5 years, but finally sat down and hammered it out. This solution works for both Ning 2.0 and Ning 3.0 Networks, but in slightly different ways. You can use it to embed Member maps (maps in general), other pages, Google Sites, you name it! I'll go through both so that everyone can give it a try regardless of the platform. Let's Begin.</p>
<p><span style="text-decoration: underline;"><strong><span class="font-size-6">Full Screen iFrames for Ning 2.0</span></strong></span></p>
<p>In order to make this work, you mist be adding an iframe to a Page (can be a page in a group) because they have the option of adding code to the <head> of page. You'll want to first add this block of code to that "Custom" section.</p>
<div style="background-color: #ffe4e1; padding: 3px;">
<br> <meta charset="utf-8">
<br> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<br>
<br> <meta name="viewport" content="width=device-width, initial-scale=1">
<br> <script>
</div>
<div style="background-color: #ffe4e1; padding: 3px;">
document.getElementsByTagName("html")[0].className = "js";
<br> </script>
<br>
<br> <link rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/1047752?profile=original">
<br>
<br> <link rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/1047790?profile=original" media="screen" type="text/css" />
</div>
<p>Now you'll want to add this code to your actual page inside the text box, replacing the red url with the one you are iframing into the page:</p>
<div style="background-color: #ffe4e1; padding: 3px;">
<br> <script type="text/javascript"> document.getElementsByTagName("html")[0].className = "js"; </script>
<br> <div class="wrapper"> <div class="iframe"><iframe src="
<strong><span style="color: #ff0000;">http://yoursiteiframe.com/index.html</span></strong>">
<br> </iframe>
<br> </div>
<br> </div>
<br>
<br> <script src='http://storage.ning.com/topology/rest/1.0/file/get/2265035?profile=original' type="text/javascript"> </script>
<br> <script src="http://storage.ning.com/topology/rest/1.0/file/get/2265054?profile=original" type="text/javascript"> </script>
</div>
<p></p>
<p><span class="font-size-5"><a rel="nofollow" href="http://landsurveyorsunited.com/page/video-categories" target="_blank">Demo Using a Google Sites Page</a></span></p>
<p><span class="font-size-5"><a target="_blank" href="http://landsurveyorsunited.com/page/video-categories"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/1868463?profile=original" alt="Full width Iframes for Ning 2.0" width="100%"></a></span></p>
<p></p>
<p><span style="text-decoration: underline;"><strong><span class="font-size-6">Full Screen iFrames for Ning 3.0</span></strong></span></p>
<p>Now in 3.0, as with most things related to code, it is much simpler to get it working with less headache. Take a look at this full block of code which can be added to one HTML module inside Sites & Pages or as a custom page inside a Group.</p>
<div style="background-color: #ffe4e1; padding: 3px;">
<br> <p><link rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/1047752?profile=original" /> <link rel="stylesheet" href="http://storage.ning.com/topology/rest/1.0/file/get/1047790?profile=original" media="screen" type="text/css" /></p>
<br> <meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<br> <meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<br> <script type="text/javascript"> document.getElementsByTagName("html")[0].className = "js";
<br> </script>
<br> <div class="wrapper">
<br> <div class="iframe"><iframe width="100%" height="240" src="
<strong><span style="color: #ff0000;">http://yoursiteiframe.com/index.html</span></strong>"></iframe></div>
<br> </div>
<br> <script src="http://storage.ning.com/topology/rest/1.0/file/get/2265035?profile=original" type="text/javascript"></script>
<br> <script src="http://storage.ning.com/topology/rest/1.0/file/get/2265054?profile=original" type="text/javascript"></script>
</div>
<p><span class="font-size-5"><a rel="nofollow" href="http://awtg.org/wine-map" target="_blank">Demo of Full Screen Iframe Map from Fusion Tables</a><br></span></p>
<p><span class="font-size-5"><a target="_blank" href="http://awtg.org/wine-map"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/1868581?profile=original" width="100%"></a></span></p>
<p><em>And there you have it!</em> Responsive Full Width Iframes for your Ning networks.</p>
<p><em><strong>Please Note:</strong></em> The file upload button seems to be giving me some trouble over here on creators and sometime the formatting of the code gets messed up when copying from a blog post, so if you <a rel="nofollow" href="http://www.jbfarrow.com/ning-tips/fullscreenresponsiveiframesforningnetworks" target="_blank">head over to this post</a> on my project site, you can <span style="text-decoration: underline;">download the TXT version of this code at the bottom of the page</span>.</p>
<p><a target="_blank" href="http://www.jbfarrow.com/ning-tips/fullscreenresponsiveiframesforningnetworks"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/1868623?profile=RESIZE_1024x1024" width="750"></a></p>
<p>I look forward to your feedback and seeing your version. If you are in need of help setting up your Ning network, <a href="http://creators.ning.com/members/JFarrow" target="_self">send me a message</a>. Happy to help!</p></div>