This is the main plug-in it must be used in order to use the following codes.
<!-- GEOCOMs GeocPlugin v2.00.005 -->
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>
Now if you add the letter o in front of any of these 8 lines it will only inject the codes once per Session!!
Example -- Before GEOHTML( '<p></p>' ); -- ( After oGEOHTML( '<p></p>' );
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~
these four lines will inject your codes into the head
addGeoStyleh('BODY{background-image: url(none)!important;}');
GEONodeh.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripth.src = 'https://api.ning.com/your_javascript.js';
GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );
these four lines will inject your codes into the body
addGeoStyle('BODY{background-image: url(none)!important;}');
GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScript.src = 'https://api.ning.com/your_javascript.js';
GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NEW Run a script every 15, 30, 45 or 60 seconds.
GEOScript15.src = 'https://api.ning.com/your_javascript.js';
GEOScript30.src = 'https://api.ning.com/your_javascript.js';
GEOScript45.src = 'https://api.ning.com/your_javascript.js';
GEOScript60.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the head
addGeoStyleho('BODY{background-image: url(none)!important;}');
GEONodeho.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScriptho.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the body
addGeoStyleo('BODY{background-image: url(none)!important;}');
GEONodeo.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripto.src = 'https://api.ning.com/your_javascript.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.
GEOScripto15.src = 'https://api.ning.com/your_javascript.js';
GEOScripto30.src = 'https://api.ning.com/your_javascript.js';
GEOScripto45.src = 'https://api.ning.com/your_javascript.js';
GEOScripto60.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the head
addGeoStylehon('BODY{background-image: url(none)!important;}');
GEONodehon.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripthon.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the body
addGeoStyleon('BODY{background-image: url(none)!important;}');
GEONodeon.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripton.src = 'https://api.ning.com/your_javascript.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.
GEOScripton15.src = 'https://api.ning.com/your_javascript.js';
GEOScripton30.src = 'https://api.ning.com/your_javascript.js';
GEOScripton45.src = 'https://api.ning.com/your_javascript.js';
GEOScripton60.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the head
addGeoStylehm('BODY{background-image: url(none)!important;}');
GEONodehm.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripthm.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the body
addGeoStylem('BODY{background-image: url(none)!important;}');
GEONodem.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScriptm.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the head
addGeoStylehf('BODY{background-image: url(none)!important;}');
GEONodehf.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripthf.src = 'https://api.ning.com/your_javascript.js';
these three lines will inject your codes into the body
addGeoStylef('BODY{background-image: url(none)!important;}');
GEONodef.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScriptf.src = 'https://api.ning.com/your_javascript.js';
How to use and usage examples.
In each "addNewStyle" line, you can add one line of CSS. ( No spaces or breaks in the CSS.)
addGeoStyle('BODY{background-image: url(none)!important;}');
GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScript.src = 'https://api.ning.com/your_javascript.js';
To see more of what you can do with this line of code go to example #5... examples below
GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );
Here are some fully functional examples.
In thies examples we'll be styling Ning Networks.
Working example #1 Ning 2&3 -- In this example your male members will have a different background imge than your female members. Ning 2&3
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>
<!-- javascript opening tag" -->
<script type="text/javascript">
/* background image only female members can see it */
addGeoStylef('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original)!important;}');
/* background image only male members can see it */
addGeoStylem('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;}');
/* javascript closing tag" */
</script>
Working example #2 Ning 2.0 -- In this example we'll be styling the video pages on a Ning 2.0 Network.
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>
<!-- javascript opening tag" -->
<script type="text/javascript">
/* start Targeting all video pages" */
if(document.URL.indexOf("video") >= 0){
/* The main styling for all video pages, CSS stylesheet */
GEONode.href = 'null//storage.ning.com/topology/rest/1.0/file/get/963872733?profile=original'';
/* background image all video pages */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* Hides everything from non-members */
addGeoStyleho('.xg_widget_video{display:none!important;}');
/* nav subtab arrow JS link */
GEOScript.src = 'null//storage.ning.com/topology/rest/1.0/file/get/963872822?profile=originalubtabarrow.js';
/* START Targeting just the main video page */
if (x$('.xg_list_video_main').length) {
/* background image main video page */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* End tag for Targeting just the main video page */
}
/* extra jQuery = moving the right column to the left */
x$(document).ready(function() {
x$('#column1.xg_column.xg_span-16').before(x$('#column2.xg_column')); });
/* End tag for Targeting all video pages" */
}
/* javascript closing tag" */
</script>
Working example #3 Ning 3.0 -- In this example we'll be styling the photo pages on a Ning 3.0 Network. With this example We'll be giving the photo pages a completely different look/style for male and female members.
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>
<!-- javascript opening tag" -->
<script type="text/javascript">
/* start Targeting all photo pages" */
if(document.URL.indexOf("photo") >= 0){
/* background image all photo pages */
addGeoStyleh('BODY{background-image: url( http://bit.ly/1LwJD7U);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* background image all photo pages female members */
addGeoStylehf('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* background image all photo pages male members */
addGeoStylehm('BODY{background-image: url( http://bit.ly/1POdd7J);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* End tag for Targeting all photo pages" */
}
/* java closing tag" */
</script>
<!-- java opening tag" -->
<script type="text/javascript">
/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {
/* add HTML - vidieo, text and image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test_1" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );
/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test_1')); });
/* background image main photo page */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');
/* The main styling for the main photo page only, CSS stylesheet */
GEONode.href = 'http://bit.ly/1hDrkBD';
/* The main styling for the main photo page male members only, CSS stylesheet */
GEONodem.href = 'http://bit.ly/1LwJL7t';
/* The main styling for the main photo page female members only, CSS stylesheet */
GEONodef.href = 'http://bit.ly/1NxLrOs';
/* End tag for Targeting just the main photo page */
}
/* javascript closing tag" */
</script>
Working example #4 Ning 2.0 -- In this example we'll be styling the photo pages on a Ning 2.0 Network.
Let's say you wanted to use my responsive fullwidth network tip on just your photo pages. You would just take the three major codes from that tip and add them to the corresponding lines of code in this tip. As you can see I added the viewport HTML to a GEOHTMLh line, the CSS stylesheet to a GEONodeh line and the JavaScript to a GEOScripth line. Then I just placed the three snippets of code in a page targeting JavaScript wrap.
<script type="text/javascript">
if(document.URL.indexOf("photo") >= 0){
GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );
GEONodeh.href = 'null//storage.ning.com/topology/rest/1.0/file/get/932304?profile=originalponsive_fullwidth_network_v3.6.css';
GEOScripth.src = 'null//storage.ning.com/topology/rest/1.0/file/get/963872751?profile=originalponsive_fullwidth_network.js';
}
</script>
Working example #5 Ning 3.0 -- In this example we'll be adding HTML, a vidieo, text, a image and links to main photo page grid frame on a Ning 3.0 Network.. Notice all the HTML is in one GEOHTML line of code. Your HTML needs to be in one solid line, no breaks, which means do not press enter in the HTML!!! If your text needs a break in it just add <br/>...
<script type="text/javascript">
/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {
/* adding HTML - vidieo, text, links and image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );
/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test')); });
/* End tag for Targeting just the main photo page */
}
/* javascript closing tag" */
</script>
Replies
* Update: sep 10 2015 GeoPlugin v2.00.004 *
Example -- Before GEOHTML( '<p></p>' ); -- ( After oGEOHTML( '<p></p>' );
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~
these four lines will inject your codes into the head
addGeoStyleh('BODY{background-image: url(none)!important;}');
GEONodeh.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScripth.src = 'https://api.ning.com/your_javascript.js';
GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );
these four lines will inject your codes into the body
addGeoStyle('BODY{background-image: url(none)!important;}');
GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';
GEOScript.src = 'https://api.ning.com/your_javascript.js';
GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );
Update May 2, 2016
NEW Feature, Run a script every 15, 30, 45 or 60 seconds. Target just online members, or visitors, or both
GEOScript15.src = 'https://api.ning.com/your_javascript.js';
GEOScript30.src = 'https://api.ning.com/your_javascript.js';
GEOScript45.src = 'https://api.ning.com/your_javascript.js';
GEOScript60.src = 'https://api.ning.com/your_javascript.js';
Updated Aug 21, 2017
You are a treasure.
I second that :-) awesome work George
Thank you Dave and Garfield, having friends like you guys makes it all worthwhile. :-)