Share This!
Share This!
Making Iframes responsive in Ning
Who wants full screen, responsive Iframes solution for their Ning Site?
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.
Full Screen Iframes Ning 2.0How to embed Full Screen iFrames for Ning 2.0In 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. <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.getElementsByTagName("html")[0].className = "js"; </script> <link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css"> <link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" /> 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: <script type="text/javascript"> document.getElementsByTagName("html")[0].className = "js"; </script> <div class="wrapper"> <div class="iframe"><iframe src="http://yoursiteiframe.com/index.html"> </iframe> </div> </div> <script src='http://api.ning.com:80/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js' type="text/javascript"> </script> <script src="http://api.ning.com:80/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"> </script> | Full Screen Responsive Iframes for Ning 3.0How to add Full Screen iFrames for Ning 3.0Now 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><link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css" /> <link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" /></p> <meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <script type="text/javascript"> document.getElementsByTagName("html")[0].className = "js"; </script> <div class="wrapper"> <div class="iframe"><iframe width="100%" height="240" src="http://yoursiteiframe.com/index.html"></iframe></div> </div> <script src="http://api.ning.com:80/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js" type="text/javascript"></script> <script src="http://api.ning.com:80/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"></script> Demo of Full Screen Iframe Map from Fusion Tables |
And there you have it! Responsive Full Width Iframes for your Ning networks. I look forward to your feedback and seeing your version. If you are in need of help setting up your Ning network, send me a message. Happy to help!
Tell Me What You Think
The gadget spec URL could not be found