we need some files in order to execute that script
dateandtime.php
example.html
css/countdown.css
js/ jquery.jCounter-0.1.0.js
what about the css file that configures series of parametres like
/*create a file named countdown.css in a folder css**************************************************
***************************************************/
.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ul.jCounterDefault {
height: 5.2em;
margin: 0;
font-size: 16px; /* change to resize counter */
padding: 0;
}
ul.jCounterDefault * {
margin: 0;
padding: 0;
}
ul.jCounterDefault li {
background-color: #333;
border: 0.16em solid #fff;
color: #fff;
display: inline;
float: left;
list-style-type: none;
margin-left: 0.2em;
min-width: 4.3em;
position: relative;
text-align: center;
border-radius: 0.5em;
-moz-box-shadow: 0 0 0.2em #777;
-ms-box-shadow: 0 0 0.2em #777;
-o-box-shadow: 0 0 0.2em #777;
-webkit-box-shadow: 0 0 0.2em #777;
box-shadow: 0 0 0.2em #777;
}
ul.jCounterDefault span {
display: block;
font: normal bold 300% times;
letter-spacing: 0.08em;
margin-left: 0.06em;
padding: 0 0.1em;
}
ul.jCounterDefault em.textDays, ul.jCounterDefault em.textHours, ul.jCounterDefault em.textMinutes, ul.jCounterDefault em.textSeconds{
display: block;
font: normal normal 80% “Trebuchet MS”;
letter-spacing: 0;
margin: 0 auto;
padding-bottom: 0.4em;
}
.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
what about the js first – jquery.jCounter-0.1.0.js
/**********************************
*create a file as the above
**********************************/
;(function($,document,window,undefined) {
//once upon a time…
$.fn.jCounter = function(options,callback) {
var consoleLog = false; //shows debug messages via console.log() if true
var customRangeDownCount; //if true, it will tell countdown_proc() it’s a down count and not an up count.
var endCounter = false; //stops jCounter if true
var eventDate; //time target (holds a number of seconds)
var pausedTime; //stores the time (in seconds) when pausing
var thisEl = this; //custom ‘this’ selector
var thisLength = this.length; //number of multiple elements per selector
var singularLabels = new Array(‘Day’,’Hour’,’Minute’,’Second’); //singular labels – use for localization
var pluralLabels = new Array(‘Days’,’Hours’,’Minutes’,’Seconds’); //plural labels – use for localization
var remoteDateURL = “http://www.devingredients.com/files/dateandtime.php”; //URL to external dateandtime.php file
var localDateURL = “dateandtime.php”; //path to local dateandtime.php file
this.options = options; //stores jCounter’s options parameter to verify against specified methods
//default settings
var settings = {
customDuration: null,
customRange: null,
date: null,
dateSource: ‘remote’,
fallback: null,
format: ‘dd:hh:mm:ss’,
timezone: ‘Europe/London’,
twoDigits: ‘on’
};
//merge the settings with the options values
if (typeof options === ‘object’) {
$.extend(settings,options);
thisEl.data(“userOptions”, settings); //push the settings to applied elements (they’re used by methods)
}
//METHODS
var jC_methods = {
//initialize
init : function() {
thisEl.each(function(i,el) {
startCounter(el);
});
},
//pause method: $.jCounter(‘pause’)
pause : function() {
if(consoleLog) { console.log(“(jC) Activity: Counter paused.”); }
endCounter = true;
return thisEl.each(function(i,el) {
clearInterval($(el).data(“jC_interval”));
});
},
//stop method: $.jCounter(‘stop’)
stop : function() {
if(consoleLog) { console.log(“(jC) Activity: Counter stopped.”); }
endCounter = true;
return thisEl.each(function(i,el) {
clearInterval($(el).data(“jC_interval”));
$(el).removeData(“jC_pausedTime”);
resetHTMLCounter(el);
});
},
//reset method: $.jCounter(‘reset’)
reset : function() {
if(consoleLog) { console.log(“(jC) Activity: Counter reset.”); }
return thisEl.each(function(i,el) {
clearInterval($(el).data(“jC_interval”));
resetHTMLCounter(el);
startCounter(el);
});
},
//start method: $.jCounter(‘start’)
start : function() {
return thisEl.each(function(i,el) {
pausedTime = $(el).data(“jC_pausedTime”);
endCounter = false;
clearInterval($(el).data(“jC_interval”));
startCounter(el);
});
}
}
//checks whether this jCounter instance runs by a customDuration setting
if(thisEl.data(“userOptions”).customDuration) {
if(!isNaN(thisEl.data(“userOptions”).customDuration)) {
var customDuration = true;
} else {
var customDuration = false;
if(consoleLog) { console.log(“(jC) Error: The customDuration value is not a number! NOTE: ‘customDuration’ accepts a number of seconds.”); }
}
}
//checks whether this jCounter instance runs by a customRange setting
if(thisEl.data(“userOptions”).customRange) {
var customRangeValues = thisEl.data(“userOptions”).customRange.split(“:”);
var rangeVal0 = parseInt(customRangeValues[0]);
var rangeVal1 = parseInt(customRangeValues[1]);
if(!isNaN(rangeVal0) && !isNaN(rangeVal1)) {
var customRange = true;
if(rangeVal0 > rangeVal1) {
var customRangeDownCount = true;
} else {
var customRangeDownCount = false;
}
} else {
var customRange = false;
if(consoleLog) { console.log(“(jC) Error: The customRange value is not a valid range! Example: customRange: ‘0:30’ or ’30:0′”); }
}
}
//FUNCTIONS
//jCounter initializer
function startCounter(el) {
if(customDuration) {
if (pausedTime) {
if (!isNaN(pausedTime)) {
eventDate = Math.round(pausedTime);
}
} else {
eventDate = Math.round($(el).data(“userOptions”).customDuration);
}
currentTime = 0;
countdown_proc(currentTime,el);
$(el).data(“jC_interval”, setInterval(function(){
if(endCounter == false) {
currentTime = parseInt(currentTime) + 1;
countdown_proc(currentTime,el)
}
},1000));
} else if(customRange) {
eventDate = Math.round(customRangeValues[1]);
if (pausedTime) {
if (!isNaN(pausedTime)) {
var currentTime = eventDate – pausedTime;
}
} else {
var currentTime = Math.round(customRangeValues[0]);
}
if(customRangeDownCount) {
countdown_proc(currentTime,el);
} else {
countdown_proc(currentTime,el);
}
$(el).data(“jC_interval”, setInterval(function(){
if(endCounter == false) {
if(customRangeDownCount) {
currentTime = parseInt(currentTime) – 1;
} else {
currentTime = parseInt(currentTime) + 1;
}
countdown_proc(currentTime,el);
}
},1000));
} else {
eventDate = Date.parse($(el).data(“userOptions”).date) / 1000;
if(thisEl.data(“userOptions”).dateSource == ‘remote’) {
dateSource = remoteDateURL + ‘?timezone=’ + thisEl.data(“userOptions”).timezone + ‘&callback=?’;
} else if(thisEl.data(“userOptions”).dateSource == ‘local’) {
dateSource = localDateURL + ‘?timezone=’ + thisEl.data(“userOptions”).timezone;
} else {
if(consoleLog) { console.log(“(jC) Error: dateSource property can be set to ‘local’ or ‘remote’, ‘remote’ is default”); }
}
$.getJSON(dateSource,function(data){
var currentDate = Date.parse(data.currentDate) / 1000;
countdown_proc(currentDate,el);
$(el).data(“jC_interval”, setInterval(function(){
if(endCounter == false) {
currentDate = parseInt(currentDate) + 1;
countdown_proc(currentDate,el)
}
},1000));
});
}
}
//main jCounter processor
function countdown_proc(duration,el) {
//check if the counter needs to count down or up
if(customRangeDownCount) {
if(eventDate >= duration) {
if(thisEl.data(“userOptions”).fallback) {
thisEl.data(“userOptions”).fallback.call(this);
}
clearInterval($(el).data(“jC_interval”));
}
} else {
if(eventDate <= duration) {
if(thisEl.data(“userOptions”).fallback) {
thisEl.data(“userOptions”).fallback.call(this);
}
clearInterval($(el).data(“jC_interval”));
}
}
//if customRange is used, update the seconds variable
var seconds = (customRange) ? duration : eventDate – duration;
var thisInstanceFormat = thisEl.data(“userOptions”).format;
//calculate seconds into days,hours,minutes,seconds
//if dd (days) is specified in the format setting (i.e. format: ‘dd:hh:mm:ss’)
if(thisInstanceFormat.indexOf(‘dd’) != -1) {
var days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
}
//if hh (hours) is specified
if(thisInstanceFormat.indexOf(‘hh’) != -1) {
var hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
}
//if mm (minutes) is specified
if(thisInstanceFormat.indexOf(‘mm’) != -1) {
var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
}
//if ss (seconds) is specified
if(thisInstanceFormat.indexOf(‘ss’) == -1) {
seconds -= seconds; //if ss is unspecified in format, update the seconds variable to 0;
}
//conditional Ss
//updates the plural and singular labels accordingly
if (days == 1) { $(el).find(“.textDays”).text(singularLabels[0]); } else { $(el).find(“.textDays”).text(pluralLabels[0]); }
if (hours == 1) { $(el).find(“.textHours”).text(singularLabels[1]); } else { $(el).find(“.textHours”).text(pluralLabels[1]); }
if (minutes == 1) { $(el).find(“.textMinutes”).text(singularLabels[2]); } else { $(el).find(“.textMinutes”).text(pluralLabels[2]); }
if (seconds == 1) { $(el).find(“.textSeconds”).text(singularLabels[3]); } else { $(el).find(“.textSeconds”).text(pluralLabels[3]); }
//twoDigits ON setting
//if the twoDigits setting is set to ON, jCounter will always diplay a minimum number of 2 digits
if(thisEl.data(“userOptions”).twoDigits == ‘on’) {
days = (String(days).length >= 2) ? days : “0” + days;
hours = (String(hours).length >= 2) ? hours : “0” + hours;
minutes = (String(minutes).length >= 2) ? minutes : “0” + minutes;
seconds = (String(seconds).length >= 2) ? seconds : “0” + seconds;
}
//updates the jCounter’s html values
if(!isNaN(eventDate)) {
$(el).find(“.days”).text(days);
$(el).find(“.hours”).text(hours);
$(el).find(“.minutes”).text(minutes);
$(el).find(“.seconds”).text(seconds);
} else {
if(consoleLog) { console.log(“(jC) Error: Invalid date! Here’s an example: 01 January 1970 12:00:00”); }
clearInterval($(el).data(“jC_interval”));
}
//stores the remaining time when pausing jCounter
$(el).data(“jC_pausedTime”, eventDate-duration);
}
//updates jCounter’s HTML values to 0 or 00, based on the twoDigits setting
function resetHTMLCounter(el) {
if(thisEl.data(“userOptions”).twoDigits == ‘on’) {
$(el).find(“.days,.hours,.minutes,.seconds”).text(’00’);
} else if(thisEl.data(“userOptions”).twoDigits == ‘off’) {
$(el).find(“.days,.hours,.minutes,.seconds”).text(‘0’);
}
}
//method calling logic
if ( jC_methods[this.options] ) {
return jC_methods[ this.options ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof this.options === ‘object’ || ! this.options ) {
return jC_methods.init.apply( this, arguments );
} else {
console.log(‘(jC) Error: Method >>> ‘ + this.options + ‘ <<< does not exist.' );
}
}
//the end;
}) (jQuery,document,window);
////////////////////////////////////////////////
create the html file which contains the scripts. Notice the js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//////////////////////////////////////////////////////////////
jCounter – jQuery plugin – devingredients.com
// the file is not working when runs locally
$(document).ready(function() {
//first counter
$(“.countdown1”).jCounter({
date: “01 january 2013 12:00:00”, //format: DD month YYYY HH:MM:SS
timezone: “Europe/Bucharest”,
format: “dd:hh:mm:ss”,
twoDigits: ‘on’,
fallback: function() { console.log(“Counter 1 finished!”) }
});
$(‘.pause1’).click(function() {
$(“.countdown1”).jCounter(‘pause’);
});
$(‘.stop1’).click(function() {
$(“.countdown1”).jCounter(‘stop’);
});
$(‘.start1’).click(function() {
$(“.countdown1”).jCounter(‘start’);
});
//second counter
$(“.countdown3”).jCounter({
format: “ss”,
twoDigits: ‘on’,
customDuration: 60*9, //9 minutes
fallback: function() { console.log(“Counter 2 finished! “) }
});
$(‘.pause3’).click(function() {
$(“.countdown3”).jCounter(‘pause’);
});
$(‘.stop3’).click(function() {
$(“.countdown3”).jCounter(‘stop’);
});
$(‘.reset3’).click(function() {
$(“.countdown3”).jCounter(‘reset’);
});
$(‘.start3’).click(function() {
$(“.countdown3”).jCounter(‘start’);
});
//third counter
$(“.countdown2”).jCounter({
format: “dd:hh:mm:ss”,
twoDigits: ‘on’,
customRange: ’10:9999′,
fallback: function() { console.log(“Counter 3 finished!”) }
});
$(‘.pause2’).click(function() {
$(“.countdown2”).jCounter(‘pause’);
});
$(‘.stop2’).click(function() {
$(“.countdown2”).jCounter(‘stop’);
});
$(‘.reset2’).click(function() {
$(“.countdown2”).jCounter(‘reset’);
});
$(‘.start2’).click(function() {
$(“.countdown2”).jCounter(‘start’);
});
});
Date-based countdown
00
Days
00
Hours
00
Minutes
00
Seconds
Custom-Duration Counter
Custom-Range Count Up
00
Hours
00
Minutes
00
Seconds
/////////////////////////////
and finally the php file dateandtime.php
that has to be executed(+php server)
<?php
if (isset($_GET[‘timezone’])) {
$timezone = new DateTimeZone($_GET[‘timezone’]);
} else {
$timezone = new DateTimeZone(“Europe/London”);
}
$date = new DateTime();
$date->setTimezone($timezone);
$dateAndTime = array(“currentDate”=>$date->format(‘d F Y H:i:s’));
echo $_GET[‘callback’] . ‘(‘ . json_encode($dateAndTime) . ‘)’;
?>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////download //////////////////////////////////////////////////////////////////////////////////
Μακέτα υπερβατικής πολεοδομίας από τη διπλωματική εργασία φοιτητή στο ΕΜΠ, για «εναέρια» ένωση πάνω από τις στέγες των πολυκατοικιών του λόφου Στρέφη με άλλο σημείο της πόλης. Οδηγός και για άλλες περιοχές, για αποσυμφόρηση της Αθήνας…Μια προσπάθεια αποτύπωσης μιας άλλης πολεοδομικής σκέψης για το εγγύς μέλλον, που αποκαλείται υπερβατική ή ουτοπική πολεοδομία.
Ενα αντίστοιχο «εναέριο χωριό» βρέθηκε πριν από περίπου σαράντα χρόνια στη ζούγκλα της νοτιοανατολικής Ινδονησίας. Ενας πραγματικός οικισμός «χτισμένος» πάνω σε δέντρα από τη φυλή Koravai. Τα υπερυψωμένα ξύλινα σπίτια βρίσκονται σε ύψος που φτάνει έως και τα 35 μέτρα πάνω από το έδαφος. Μια κλειστή κοινωνία που ζει από το κυνήγι και τη συλλογή καρπών. Κατεβαίνει στα άλλα χωριά μόνο για να πουλήσει-ανταλλάξει δικά της πράγματα μ’ εκείνα άλλων φυλών. Θα μπορούσε να είναι το φανταστικό χωριό του Βερν.
![[ola+mazi.jpg]](http://polimesateet.files.wordpress.com/2013/03/b4331-ola2bmazi.jpg)
