83 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			83 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<article id="tattoo_elements">
 | 
						|
<style type="text/css">
 | 
						|
	#tattoo_elements li { margin-bottom: 1em; }
 | 
						|
</style>
 | 
						|
<p><a href="http://chemistry.bd.psu.edu/jircitano/periodic4.html">thanks to this site for the images!</a> feel free to suggest other good elements from there.</p>
 | 
						|
<ul>
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Au.gif" />Gold
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Pt.gif" />Platinum
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Ag.gif" />Silver
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/He.gif" />Helium
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Li.gif" />Lithium
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Be.gif" />Beryllium
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Pb.gif" />Lead
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Cd.gif" />Cadmium
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Si.gif" />Silicon
 | 
						|
	<li><img src="http://chemistry.bd.psu.edu/jircitano/Ca.gif" />Calcium
 | 
						|
</ul>
 | 
						|
<p>for use on the results of <a href="http://physics.nist.gov/PhysRefData/ASD/lines_form.html">this atomic spectra database</a>:</p>
 | 
						|
<p>CSS:</p>
 | 
						|
<pre>
 | 
						|
.ac {
 | 
						|
    background-color: red;
 | 
						|
    display: inline-block;
 | 
						|
    width: 1px;
 | 
						|
    height: 200px;
 | 
						|
}
 | 
						|
</pre>
 | 
						|
<p>javurscript:</p>
 | 
						|
<pre>
 | 
						|
var jq = document.createElement('script');
 | 
						|
jq.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
 | 
						|
document.getElementsByTagName('head')[0].appendChild(jq);
 | 
						|
</pre>
 | 
						|
<p>wait a moment and more javascript:</p>
 | 
						|
<pre>
 | 
						|
jQuery.noConflict();
 | 
						|
$ = jQuery;
 | 
						|
 | 
						|
var the_table = $($('table')[4]);
 | 
						|
 | 
						|
function do_stuff(start, end, intensity_cutoff) {
 | 
						|
var wavelengths = [];
 | 
						|
 | 
						|
$(the_table.find('tbody')[1]).find('tr').each(function() { 
 | 
						|
if ($(this).hasClass('evn') || $(this).hasClass('odd')) { $(this).show(); }
 | 
						|
else { $(this).hide(); return true; }
 | 
						|
 | 
						|
var wavelength_cell = $($(this).find('td')[0]); 
 | 
						|
var wavelength = parseFloat(wavelength_cell.text());
 | 
						|
if (wavelength >= start && wavelength <= end) { $(this).show(); }
 | 
						|
else { $(this).hide(); return true;}
 | 
						|
 | 
						|
var intensity_cell = $($(this).find('td')[2]); 
 | 
						|
var intensity = parseInt(intensity_cell.text(), 10);
 | 
						|
if (intensity >= intensity_cutoff) { $(this).show(); }
 | 
						|
else { $(this).hide(); return true;}
 | 
						|
 | 
						|
wavelengths.push((wavelength - start)/(end - start));
 | 
						|
});
 | 
						|
return wavelengths;
 | 
						|
}
 | 
						|
 | 
						|
 | 
						|
the_table.after($('<div id="shoof-thing"></div>').attr('height', '100px').attr('width', '100%'));
 | 
						|
var c = $('#shoof-thing')
 | 
						|
 | 
						|
 | 
						|
function new_thing(x) { return $('<div></div>').addClass('ac').css('margin-left', x); }
 | 
						|
 | 
						|
 | 
						|
var w = do_stuff(380, 760, 9);
 | 
						|
var l = w.length;
 | 
						|
var o = [];
 | 
						|
$.each(w, function(i, v) {
 | 
						|
if (i == 0) { o.push("" + (v*95) + "%"); }
 | 
						|
else { o.push("" + ((v-w[i-1])*95) + "%"); }
 | 
						|
});
 | 
						|
c.children().remove();
 | 
						|
$.each(o, function(i, v) { c.append(new_thing(v)); });
 | 
						|
 | 
						|
</pre>
 | 
						|
</article>
 |