2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by Airshow
0

Nathan,

View the page's source and search for "fillsdfkalsjdfak". You will find the function that writes the dots on the page.

You will also need a small stylesheet, slightly higher up in the source. Search for "img.zerosafdfasd".

You might like to grab your own copy of the dot image and store it locally. Then edit the function to use the local copy with a relative url, rather than the original over the internet.

Airshow

0

I've tried this it worked in part, since the dots wont get smaller there are just a lot of big dots

0

Nathan,

The small dots are achieved with css.

If they are all large, then either the stylesheet is not properly in place or the class="....." statement in the code is not correct.

After posting last night, I played with the code and ended up with this implementation, which is a bit more complex but a lot more fun:

<!DOCTYPE html>
<head>
<title>ASCII dots</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#asciiPattern img.zero { width: 6px; height: 6px; padding: 5px; }
</style>
<script type="text/javascript">
onload = function(){
	function convertToDots(elID, str){
	  var i,j,d,row,rowArray,clss,el = document.getElementById(elID);
	  el.innerHTML = '';
	  for(i=0; i<str.length; i++){
	    d = str.charCodeAt(i);
	    row = document.createElement('div');
	    el.appendChild(row);
	    rowArray = [];
	    for(j=0; j<8; j++) {
	      clss = (d%2 == 0) ? "zero" : ""; 
	      d = Math.floor(d/2);
	      rowArray.unshift('<img class="'+clss+'" src="images/dotaj8.png" />');
	    }
	    row.innerHTML = rowArray.join('');
	  }
	}
	var txt = document.getElementById("txt");
	var goButton = document.getElementById("goButton");
	goButton.onclick = txt.onkeyup = function(){
		convertToDots('asciiPattern', txt.value);
	};
	goButton.onclick();
}
</script>
</head>
<body>

<div id="controls">
	<input type="text" id="txt" value="Welcome" />&nbsp;<button id="goButton">Go</button>
</div>
<div id="asciiPattern"></div>

</body>
</html>

The "go" button is included for any browser that does not support the onkeyup event.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.