COTTON USA Virtual Hangtag

About

The COTTON USA Virtual Hangtag script is an easy way to add COTTON USA branding to any website. The script support multiple languages and loads the appropriate one according to browser setting.

How it works:

The COTTON USA Virtual Hangtag is easy to install by including a short code snippet on your website. When the Cotton Console Tag script loads it automatically performs 4 steps:

Loads the COTTON USA Virtual Hangtag CSS styles onto the site.
Finds all occurrences of “COTTON USA” and wraps the text with a custom cct html tag.
Added the html code for the cct module and overlay.
Binds click events to trigger the showing and hiding of the COTTON USA Virtual Hangtag Overlay.

How to install:

Option 1

For most websites the easiest way to install the JavaScript cotton tag snippet is to add the following code to the pages or template where the tag will appear. The code can be placed in either the head or the body tag, but it’s preferred to add it to the end of the page before the closing body tag.

			
<body>
	...
	<p>
		Lorem Ipsum es simplemente... el texto COTTON USA de relleno de las
		imprentas y archivos de texto.
	</p>
	...
	<!-- COTTON USA Virtual Hangtag -->
	<script>
	(function(i,s,o,g,r,a,m){i['CottonCouncilTagObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://tag.cottonusa.org/tag.js','cct');
	cct('init', 'body');
	</script>
	<!-- End COTTON USA Virtual Hangtag -->
</body>

See a live example 1.

Option 2

You can further optimize the script by targeting specific html elements that have the "COTTON USA" text. The text can be nested any inside the target element.

In this example we will be targing all element with the class name .product-description.

			
<body>
	...
	<div class="product-description">
		<p>
			Pellentesque habitant morbi tristique senectus et...
		</p>
		<span>
			Lorem Ipsum es COTTON USA archivos de texto...
		</span>
	</div>
	...
	<!-- COTTON USA Virtual Hangtag -->
	<script>
	(function(i,s,o,g,r,a,m){i['CottonCouncilTagObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://tag.cottonusa.org/tag.js','cct');
	cct('init', '.product-description');
	</script>
	<!-- End COTTON USA Virtual Hangtag -->
</body>

See a live example 2.

Option 3

Another way to control where the COTTON USA Virtual Hangtag is to use the <cct&lgt; tag. This allows you to use any text you want.

			
<body>
	...
		<cct>Any Text</cct>
		<p>
			Lorem Ipsum es simplemente... el texto COTTON USA de relleno de las
			imprentas y archivos de texto.
		</p>
		<cct>Learn More about COTTON USA</cct>
	...

	<!-- COTTON USA Virtual Hangtag -->
	<script>
	(function(i,s,o,g,r,a,m){i['CottonCouncilTagObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://tag.cottonusa.org/tag.js','cct');
	cct('init', 'body');
	</script>
	<!-- End COTTON USA Virtual Hangtag -->
</body>

See a live example 3.

Advance: Option 4

In some cases if you need more control so you can perform the four step mentioned in the “How it work” section individually. The avantage if this is you can perform each action when a after parts of the site has load. This allows for sites that load dynamic content to trigger when they need to.

			
<body>
...
<div id="content">Loading...</div>

<!-- Site code loading ajax -->
<script>
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
       if (xmlhttp.status == 200) {
				 var contentContainer = document.getElementById("content");
         contentContainer.innerHTML = xmlhttp.responseText;
				 contentContainer.classList.add('loaded');
       }
       else if (xmlhttp.status == 400) {
        alert('There was an error 400');
       }
       else {
         alert('something else other than 200 was returned');
       }
      }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

setTimeout(function(){
	loadXMLDoc();
}, 3000);
</script>
<!-- End loading ajax -->

<!-- COTTON USA Virtual Hangtag -->
<script>
(function(i,s,o,g,r,a,m){i['CottonCouncilTagObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://tag.cottonusa.org/tag.js','cct');

function setupCCTWhenLoaded() {
	var e = document.getElementById('content')
	var observer = new MutationObserver(function (event) {
		var hasClassLoaded = event[0].target.classList.contains('loaded');
	  if (hasClassLoaded){
			cct('wordWrap', '#content'); 
			cct('loadHtml'); 
			cct('attachEvents'); 
		}
	})

	observer.observe(e, {
	  attributes: true,
	  attributeFilter: ['class'],
	  childList: false,
	  characterData: false
	})
}

cct('loadStyles'); 
setupCCTWhenLoaded();

</script>
<!-- End COTTON USA Virtual Hangtag -->
</body>

See a live example 4.