berguina

This is a test post from , a fancy photo sharing thing.

I wanted to improve the style of the maps of our website (hikr.org). In particularly, I wanted to add some nice and light buttons with a tool-tip, like the ones shown in the picture below:



So, I've started to have a look to the new syntax of HTML5 and put my attention on the possibility of customize the attributes.

In a first moment, I thought to obtain my nice tooltip using the TITLE attribute. This would have the advantage to have a customized tooltip in all modern browsers and use the standard TITLE in IE.  But, it doesn't work.
The problem with this, it's that, if in IE you can effectively see the attribute TITLE shown in the correct and standard way, in Firefox, Safari & Co. you will see both the nice customized tooltip and the standard TITLE attribute shown at the same time (and actually we only want the tooltip).

So, as you can see from the image below, the tooltip is hidden by the standard TITLE attribute, not at all what I want. In IE, of course only the standard TITLE attribute is shown, ignoring the specific CSS3 style of the tooltip.



At, this point I've thought to use the attribute DATA-TOOLTIP: this has the advantage to be completely ignored by IE. However, if I put both TITLE and DATA-TOOLTIP attributes, I'm back to the case of the previous image in Firefox and if I use only the attribute DATA-TOOLTIP, IE users wont see any tooltip/title.

At the end I didn't find anything better than:

1. use the tag <!--[if IE]> and the tag <![if !IE]> to separate HTML code for IE and the other browsers;
2. customize the DATA-TOOLTIP attribute;

The CSS code looks like this


.button{
...whatever you want for your button looking
}
.button:after,.button:before
{
...we don't want the tooltip showing up permanently, but only on focus and hover
content:"";
display:none;
position:relative;
text-decoration:none;
cursor:pointer;
opacity:0;
z-index:0;
}
.button:hover:before,.button:focus:before
{
...lets draw the arrow ..

opacity:0.94;
z-index:999;
outline:none;
content:"";
display:block;
position:absolute;
top:28px;
left:50%;
margin:0 0 0 -5px;
width:0;
height:0;
line-height:0px;
font-size:0px;
border-bottom:5px solid #aaa;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:transparent;

}

.button:hover:after,.button:focus:after
{

...lets draw the body of the tooltip ...

opacity:0.94;

...this is important: I'm saying to display the content of the DATA-TOOLTIP attribute as content ...

content:attr(data-tooltip);

display:block;
z-index:999;
position:absolute;
top:33px;
left:0;
margin:0 0 0 -20px;
width:65px;
padding:3px;

...some more code goes here to choose fonts, colors, borders, etc.


}

The HTML-Code looks like this:


<!--[if IE]>
<span class='button' title='Title'>...</span>
<![endif]-->
<![if !IE]>
<span class='button' data-tooltip='Title'>...</span>
<![endif]>


The result in modern browsers looks like this:





In IE, nothing else than a normal title attribute is shown.

I didn't found any information about this type of issues on the web. So, I've thought to share this here.
Maybe, there is a better solution and, if you know it, I would be glad to hear about it.

Imagine you did a fantastic hike and you have saved all data into a GPS Track.
Now you're home and you wanna repeat virtually your hike and see again, at least approximatively, the beatiful view you enjoyed during it.

In order to allow this, we - at hikr.org - employed an alien who walk on your track followed by an UFO with a video-camera filming the ET.

Sunday we went climbing, the first time on a Sunday. Because the weather were very bad (as usual this month), the whole SAC-Prattigau was there. There are a lot of new routes, build because of the Swissclimb contest. A lot of them are made by Susi Good, a former World Champion. I never did so much new routes in one day...and even I did some 5c+ on sight and one 6c+ top rope.

Today we went again....and it was a real disaster for both...But this is life...

Unbelievable!
Yesterday Google Street View came to Ramosch and Vnà. We had a lot of luck and the car took some picture of us. We even could speak with the driver. Unbelievable!
Let see if we will appear on the Google Map

Monday it was very bad weather. Theoretically the climbing wall should be closed and accessible only with the patch. So, we went there and find the obvious "surprise" that everything not only was open, but a real SAC meeting was going on. Never seen so many people at the same time in there. In the beginning we were a little shy, but in a few minutes we decided to act as usual and provide the music, after asking to the responsible of the mini-bar for that day. So few minutes later we saw and hear people singing, dancing, climbing and falling  down. There was a lot of noise, but somehow this was stimulating us to try something more. A lot of people were doing really difficult routes one after the other without any apparent big effort. We tried also some 7a, with a lot of effort. At the end we had for one hour the climbing wall only for us, our hurting heads thanking us. When we went out we realized to have done more than in the normal training day. We're still hurting all over ...

Today climbing again, lot of new routes, that makes it always more interesting. Some weeks ago, we came up with the crazy idea to try some really difficult routes, So, today again we tried some 7a and 7a+. Not really that we succeed, but we see some progress.

In the train coming back, I've tried for the first time, to play with an old game boy. I've enjoyed it.

And to conclude some music from Gruppa Leningrad

Quest'anno i fiori (svizzeri) sono stati puntuali come un orologio svizzero e cioè sono apparsi esattamente il 21 marzo, primo giorno di primavera. Nei campi, vicino alla strada cantonale, sono apparsi i primi fiori gialli. Nel seguito, fino al 31 marzo, sono tutti apparsi, nonostante qualche nevicata qua e là. Abbiamo visto perfino le Kuhschelle.

Alle calende di aprile, nonostante il rito delle calende di marzo(**), è nevicato di nuovo.

Chalandamarz, chaland'avrigl laschai las vachas our d'uigl, cha l'erba crescha e la naiv svanescha ..

Primo marzo, primo aprile lascia uscire le mucche dalla stalla che l'erba cresca e che la neve sparisca ...