XD blog

blog page

javascript


2013-07-27 Logging click events on your server

Many websites log events, where users clicked for example. They want to optimize for a better use. You would assume every time a user requests a page, your server needs to provide the user with the content of the page. However some cache mechanism could prevent you from getting that information, a user could click on a link leading outside your website or the same page could be obtained from different others pages. You need a more precise information. How to log a click event then?

To do that, we first need to do something when a user clicks on a url: we need to catch this event and to call another function. We use the following syntax:

<a href="url" onmousedown="sendlog('url')">anchor</a>
The function sendlog will be executed when the user clicks on this particular url. The string between the quotes is the information to log. The function sendlog is defined in another file, defsendlog.js in this case. The following lines must be added to the HTML page (header section):
<script type="text/javascript" src="/defsendlog.js"></script>


more...

2013-07-26 Keep the scrolling position after resfreshing

I added the scrolling property to a div section:

div.divblogs{
	position:absolute; 
	margin-top:10%; 
	margin-left:0%; 
	margin-right:0%;
	text-align: left;
	width:20%;
	height:80%;
	overflow:scroll;
} 
Unfortunately, after a refresh or a click somewhere which makes only helf the page change, every list returned to its first position. It was bothering me. I finaly found a way to keep list the way they are after a refresh. It requires cookies: we store the position of each section in cookies.
function createCookie(name,value,days) 
{
	if (days) 
    {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) 
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function savePosition(document, divId)
{
    var intY = document.getElementById(divId).scrollTop;
    if (intY >= 0) {
        createCookie("divid" + divId, "y" + intY + "_", 1) ;
    }
}

function getPosition(document, divId)
{
    var cook  = readCookie("divid" + divId) ;
    if (cook == null) return 0 ;
    var start = cook.indexOf("y") ;
    if (start == -1) return 0 ;
    var end   = cook.indexOf("_", start) ;
    var sub = cook.substring( start+1, end) ;
    return sub ;
}
So to save the scrolling position of a div section, you just need to call the function savePosition each time it is updated:
<div class="divblogs" id="divblogs" onscroll="savePosition(document,'divblogs')">
...
</div>
The last detail left is a function called when the page is reloading to restore each section's position:
<body onload="setPositions(document,['divblogs', 'divpostsshort', 'divpostsext'])">
The function setPositions is defined as follows:
function setPositions(document, listDiv)
{
    for (var i = 0 ; i < listDiv.length ; ++i)
    {
        var divObject = document.getElementById(listDiv[i]);
        divObject.scrollTop = getPosition(document,listDiv[i]) ;
    }
}
Last detail, each section div has attributes (class and id). They are important to enable the scrolling and the make them easily accessible.

2013-02-12 Graph using Javascript and D3.js

I don't remember how I found this library D3.js, probably while looking for something than Graphviz because I was not able to easily connect to draw a graph on a webpage. I discovered two days ago than a Python library (PIL) I used to recommend to my student was not maintained any more and had been replaced by another one (Pillow). To draw graph, I usually recommend Matplotlib but I was wondering why not trying another one and another language which allows animated graphs. So here are my first steps with D3.js which I intent to use to draw a very simple plot.

Before writing the script

The first step starts by create a spot on the webpage:

<div id="graphid"></div>
It also requires data which I stored in a separate file marathon.txt:
city	year	time	seconds
PARIS	2011	02:06:29	7589
PARIS	2010	02:06:41	7601
PARIS	2009	02:05:47	7547
PARIS	2008	02:06:40	7600
PARIS	2007	02:07:17	7637
PARIS	2006	02:08:03	7683
...
I like the fact, every time I press F5, the browser opens up and show me my page. I use SciTE as a text editor. Simple but debugging is quite difficult. For that, I used Chrome to the error (look at option activate the debug console). Anyway, let's begin. It first requires to inclure the library:
<script src="http://d3js.org/d3.v3.js"></script>
It can be placed in the header or in the body. You should then configure the style otherwise your graph may not have the look you are looking for:


more...

2013-02-04 Insérer des formules en code Latex dans un blog

Ce blog est plus pour moi. Je cherchais un moyen de transcrire des documents Latex au format HTML. Je n'avais pas pensé à écrire mes formules directement dans un blog. J'ai suivi les instructions de ce site. On insère un lien vers un script au début du document :

<html>
<head>
<script type="text/javascript" src="
http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
Puis on insère une formule :
<div lang="latex">
\frac{1+sin(x)}{y}
</div>
Et on regarde si ça marche :
\frac{1+sin(x)}{y}

Et si ça marche aussi lorsqu'on veut l'insérer dans le texte \frac{1+sin(x)}{x^3} en utilisant le code suivant :

<span lang="latex">\frac{1+sin(x)}{x^3}</span>
Dans quelques boîtes, il est désormais possible d'écrire ses propres blogs comme si finalement on avait abandonné l'idée de structurer l'information interne dans une société. Chaque employé peut maintenant faire circuler de l'information qu'on récupère en faisant des recherches par mots-clés. Quoiqu'il en soit, on découvre la date à laquelle chacun à commencer à blogger car le premier blog s'appelle invariablement Welcome to my blog, ce à quoi ce blog m'a fait penser.


<--

Xavier Dupré