(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)

[George H. Compton IV]

Updated 06-25-2020

All the features of Ning 2.0 with  Ning 3.0 responsiveness.. ;) This code has been updated. It'll work on any layout but it works the best with the (A) layouts ( layout A1 - A4)

Tested and working in all newer browsers IE 9, 10, 11 - Firefox - Google Chrome - Safari. for cell phones, Laptops, PCs, Macintosh and yes TVs....

The fullwidth portion of this code also works in IE 7, 8. for Laptops, PCs and TVs...

It's compatible with all operating systems...

Compatible hardware - cell phones, Laptops, PCs, Macintosh and yes TVs....

Most pages will fit on the smallest of cell phones but I recommend a screen resolution of 480 pixels and wider. But like I said most of the network will fit on screen resolutions of 250 pixels and greater.

With this code your N2 will pass Google developers, mobile friendly test, without using Nings mobile app.

click here to see it live on "The Constitutional Conservatives".

 

If anyone would like help setting this up I'll be more than happy to give you a hand.

GEOCOMs Ning 2.0 Responsive Fullwidth Network v5 part 1

Part 1 goes in your (ad-box above the header) Make sure you press the HTML button before inserting the code.

<meta name="viewport" content="width=device-width, initial-scale=1" ></meta><link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/14338574?profile=original" id="N2_R_F_W_N_v5_P1" ></link>

   

Part 2 goes in your (custom code box)

The video enhancements come with my "profile text box video mod". To turn the mod on change the ID name in the video enhancement script from this  id  " id='gframe' " to this id   id='MOD_FN' ..

<!-- Start GEOCOMs Ning 2.0 responsive fullwidth network v6 part 2 -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6335680082?profile=original" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6359602678?profile=original" type="text/javascript" id='gframe' class="gf_helper" ></script>

 

Part 3 goes in your (design studio CSS session)

/* Start GEOCOMs Ning 2.0 responsive fullwidth network Part 3 */
@media screen and (max-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,        
DIV#xg.account.external-auth .xg_lightborder{
     width: 92%!important;
     min-width: 100px!important;
     max-width: 500px!important;
    left:0px!important;
    right:0px!important;
    margin-left:auto!important;
    margin-right:auto!important;     } }
@media screen and (max-device-width:1144px)  {
DIV#xg.account.external-auth DIV#xg_body,       
DIV#xg.account.external-auth .xg_lightborder{
     font-size: 34px!important;
    line-height: 35px!important;    } }
@media screen and (max-width: 760px)  {
table.categories p, table.categories ul {
    padding-left: 0px!important;
    padding: 3px!important;
    margin-top: 0px!important;}
  TD.xg_lightborder H3{
    margin-top: 70px!important;
    margin-left: 0px!important;
    padding-left: 0px!important; }
BODY TD.xg_lightborder {
    padding-right: 0px !important;
    padding: 2px !important;
    width:45%!important;}
BODY .xg_theme TD.xg_lightborder,
BODY .xg_theme th.xg_lightborder{
  width:45%!important;
  min-width:45%!important;
  max-width:45%!important;}    
BODY .body_events_main ul.clist div.tb {
    margin-left: 10px;
    margin-top: 110px;}
BODY .body_events_main ul.clist li a span.image {
    margin-right: 16px !important;  } }
/* End Ning 2.0 responsive fullwidth network Part 3 */

 

 

 

 

maB N_2.0_FWN_mobile_app_V3.0.js

 N2_GEO_mod_RT_v2.5.044_3x.js

N2_GEO_mod_RT_v2.6_3x.js

[Scott Bishop]

Worked like magic! 

[Scott Bishop]

After cache & cookies are cleared my mobile browser wants to open the Ning mobile version "surfer-shot.com/m". How do I prevent this? 

[George H. Compton IV]

Scott, to remove Nings mobile app go to your dashboard and under settings go to the mobile tab then just remove all your mobile pages and uncheck (( Automatically add and remove mobile pages. )) It's easy to add the pages back if necessary just hit the add button.

[Scott Bishop]

Great. Somehow I overlooked that. Thanks!

[George H. Compton IV]

Update 10/17/2015 -- All codes have been updated and enhanced.

[Scott Bishop]

Hey George, I updated with your newest code. Now the Menu button (which was nice big & noticeable) moved from the header to the very top of the screen (which is much smaller and hard to find) and doesn't work anymore. It tries to, you'll see it for a split second then its gone. 

Can you fix this? www.surfer-shot.com

Is there anyway you can make the navigation normal (horizontal all the way across, then turn into a hamburger icon when on mobile? 

[George H. Compton IV]

Hello Scott.



First thing you need to do is go remove these two codes from your NC custom code box, you're now running multiple versions of them.





<!-- cell menu button JQ -->
<!-- Custom Code box -->
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#hidenav').live('click', function(event) {      
        jQuery('#xg_navigation').toggle('show');
   });
});
</script>

<!-- cell menu button END -->



and this one.



<!-- full width videos START -->
<!-- START Ning 2.0 responsive fullwidth network video enhancements -->
<script src="http://bit.ly/1WfSb5x" type="text/javascript" title="gframe_N2.0_GEO_v3"></script>
 <!-- full width videos END -->

[Scott Bishop]

That worked. Excellent stuff George! 

[Scott Bishop]

George, Having a problem with this feature. It has rendered my photo flash uploader useless. The simple photo uploader works fine. I received an email from Ning support saying the problem is in the coding of this feature making the flash uploader inoperative. 

[Scott Bishop]

George, to view the "flash" uploader, use this link (must be signed in - you are a member) http://surfer-shot.com/photo/photo/newWithUploader

Try to upload a photo, you can't. You can however using the "simple" uploader. 

Ning support said they stripped your coding and then it worked.