I was looking at a page called Javascript: Convert Strings to Binary (and representing in a nerdy way!) where you can convert a String into binary dots using Javascript and I loved that, but how I can do that? Since the code isn't for making that grid...
Nathan Campos 23 Junior Poster
Recommended Answers
Jump to PostNathan,
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 …
All 3 Replies
Airshow 416 WiFi Lounge Lizard Team Colleague
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
Nathan Campos 23 Junior Poster
I've tried this it worked in part, since the dots wont get smaller there are just a lot of big dots
Airshow 416 WiFi Lounge Lizard Team Colleague
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" /> <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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.