Learn how to use jQuery at the Blog

The 1Kb CSS Grid « visit

  • Added 6 months ago
  • 76 Lines of Code shown
  • 1 Links of Interest
http://1kbgrid.com
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to The 1Kb CSS Grid - http://1kbgrid.com

$(document).ready(initSlider);

function initSlider() {
	$(".c_columns .slider").slider({
		step: 1,
		max: 5,
		min: 1,
		value: 3,
		slide: function(event, ui) {
			$('ul.assets').css('font-size',ui.value+"px");
		},
		change: function(event, ui) {
			calculate();
		}
	});
	$(".c_colwidth .slider").slider({
		step: 1,
		max: 3,
		min: 1,
		value: 2,
		slide: function(event, ui) {
			$('ul.assets').css('font-size',ui.value+"px");
		},
		change: function(event, ui) {
			calculate();
		}
	});
	$(".c_gutwidth .slider").slider({
		step: 1,
		max: 2,
		min: 1,
		value: 2,
		slide: function(event, ui) {
			$('ul.assets').css('font-size',ui.value+"px");
		},
		change: function(event, ui) {
			calculate();
		}
	});
	
	$('<img>').attr('src', '/images/download2.png');
	$('<img>').attr('src', '/images/follow2.png');
}

function calculate() {
	var c;
	var columns = $('.c_columns .slider').slider('option', 'value');
	if (columns==1) {c=9;} else if (columns==2) {c=10;} else if (columns==3) {c=12;} else if (columns==4) {c=14;} else if (columns==5) {c=16;}
	
	var w;
	var colwidth = $('.c_colwidth .slider').slider('option', 'value');
	if (colwidth==1) {w=40;} else if (colwidth==2) {w=60;} else if (colwidth==3) {w=80;}
	
	var g;
	var gutwidth = $('.c_gutwidth .slider').slider('option', 'value');
	if (gutwidth==1) {g=10;} else if (gutwidth==2) {g=20;}
	
	var width = (c * w) + (c * g);
	var filename = c+"_"+w+"_"+g+".zip";
	
	$(".download p span").text(width);
	return filename;
}

function download() {
	$(".progressbar").effect("slide",{},750,deliver());
}

function deliver() {
	setTimeout('window.location="/download/"+calculate()',500);
	setTimeout('hideProgressBar()',2750);
}

function hideProgressBar() {
	$(".progressbar").fadeOut(1500);
}