contact

Posts Tagged ‘javascript’

calculating the number of days between two dates

Sunday, November 9th, 2008

for a recent project I had to figure out how many days are between a given start and end date. My first very poor attempt was to split the dates and then get the monthes and then add up the days for each month. Very poor on performance.

The easy solution:

most modern programming languages offer Dates Objects that can handle timestamps, which makes our calculation very easy.

(Timestamp(endDate)-TimeStamp(startDate)) / 3600 / 24 = days

this will compute the amount of seconds between the start and end date, then divide by 3600 gives you get hours, divide by 24 and you have the number of days. This is especially nice since it automatically considers 29th of february.

note: if you use actionscript you have to again divide by 1000 since its timestamps are in milli seconds.

actionscript 3 screenshot

actionscript 3 screenshot

how to start a scriptaculous drag with code

Saturday, August 2nd, 2008

Usually a scriptaculous draggable will only start the drag if you click on it. As I was adding drag and drop functionality to a web based filebrowser I actually wanted to start the drag of an other object when the user clicked on a file and dragged it. So the user clicks on a file from a list view but does drag the actual dom element from the list view. the click on the file calls a function that slips a file icon under the mouse of the user and starts the drag of that file icon. That way a user can drag and drop just the icon which looks much nicer and gave me the ability to drag and drop all selected files from the list view. its actually pretty simple, you just pass on the click event to the initDrag method of your draggable.

</pre>
$('yourObjectThatWillBeClicked').observe('mousedown', function(event){
 //observe the object for clicks
 $('yourActualDraggable').setStyle({
 // slipping the draggable under the users mouse
 position:'absolute',
 top:Event.pointerY(event)-16+'px',
 // this gets us the position of the users cursor
 left:Event.pointerX(event)-24+'px'
 })
 Drager=new Draggable('yourActualDraggable',onEnd:function(){Drag.destroy()});
 // making it a real scriptaculous draggable
 Drager.initDrag(event)
 // passing on the event and starting the drag
 }
<pre>
screenshot that illustrates this technique in my application

screenshot that illustrates this technique in my application

script.aculo.us

Using Anchors and GET variables

Monday, February 18th, 2008

Well in general it is impossible to use them both. So http://www.yourdomain.com/yourpage.php?get=fubar#anchor1 is not going to work in most browsers, so we want to forget about that. I solved this problem with a little javascript workaround and an additional GET varibale. So step one is that your links would have to include a get variable “?a=YourAnchor”. Now we dont use the usual anchor but place a div with the id YourAnchor at the position we want the page to jump to. I use some javascript that is called when the page loads and the looks up the div with the id YourAnchor and scrolls the page to its position.

</pre>
<div id="YourAnchor"></div>
onload="go_to('<?php echo $_GET['a']; ?>')"

//in order to call the function simply place the following code in your body tag
<pre>

note that this is quite insecure though.