En esta misma página podéis ver la demo del autor, sí como sus indicaciones en cuanto a la descarga de los scripts, y las piezas básicas del HTML y del CSS. deslizando la barra del slide, o picando en las imágenes "+/-", podéis ver cómo la letra aumenta y disminuye de tamaño y el indicador muestra el tamaño que estáis pulsando.
Podéis ver cómo funciona en blogger, en esta PRUEBA que acabo de hacer.
Veamos los pasos:
.- CSS:
.slider_container {
position: absolute;
height: 25px;
top: 170px;
left: 165px;
}
.minus {
background: url(http://.../minus-trans.png) no-repeat;
height: 9px;
width: 25px;
overflow: hidden;
float: left;
cursor: pointer;
}
.slider_bar {
background: url(http://.../bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}
.add {
background: url(http://.../add-trans.png) no-repeat;
height: 25px;
width: 23px;
float: left;
position: relative;
top: -5px;
cursor: pointer;
}
.slider_handle {
background: url(http://.../selector-trans.png) no-repeat;
height: 25px;
width: 12px;
position: absolute;
top: -8px;
}
#slider_caption {
background: url(http://.../caption-trans.png) no-repeat;
height: 45px;
width: 38px;
overflow: hidden;
position: absolute;
top: -50px;
margin-left:-10px;
padding: 5px 0px 0px 0px;
font-family: "Myriad Pro";
color: #36665d;
font-weight: bold;
text-align: center;
}
#text {
font-family: Helvetica, Arial, sans-serif;
width: 655px;
background: #f9f9f9;
margin-left: auto;
margin-right: auto;
padding: 20px 20px 20px 25px;
position: relative;
}
#text p {
font-size: 12px;
text-align: left;
color: black;
}
#text h1 {
text-align: left;
margin-left: 20px;
}
p{
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
#font_indicator{
position: absolute;
right: 100px;
top: 50px;
font-size: 10px;
display: none;
}
.- SCRIPTS: Necesitamos un "plugin" llamado "cookie", además de un query:
<script src='http://.../jquery.ui.js' type='text/javascript'/>
<script src='http://.../cookie.js' type='text/javascript'/>
además de un "añadido" para la función cookie, el texto, la función "menos/más" y los efectos del slider, que el autor del hack nos muestra paso a paso y que debéis subir a vuestro host para encerrar en un script. Puede ser algo así (tal y como él propone en su demo):
$(function() {
var startSize = $.cookie('fontSize');
var startSize = parseFloat(startSize, 12);
$('#text p').css('font-size', startSize);
$('#slider_caption').hide();
var captionVisible = false;
$('.slider_bar').slider({
handle: '.slider_handle',
startValue: startSize*100/15 - 53.3 ,
minValue: 0,
maxValue: 100,
start: function(e, ui) {
$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
$('#font_indicator').fadeIn('slow');
},
stop: function(e, ui) {
if (captionVisible == false) {
$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
$('#font_indicator').fadeIn('slow');
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").animate({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
$('#slider_caption').fadeOut('fast', function() { captionVisible = false; });
$('#font_indicator').fadeOut('slow');
},
slide: function(e, ui) {
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").css({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
});
$(".add").click(function(){
var currentFontSize = $('#text p').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum+1;
if (newFontSize < 23) {
$('#text p').css('font-size', newFontSize);
$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
$('.slider_handle').css('left', newFontSize*19.75 - 158);
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text(Math.round(newFontSize ));
$('#font_indicator').fadeOut('slow');
}
else{
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text("Isn't 23 big enough?");
$('#font_indicator').fadeOut('slow');
}
return false;
});
$(".minus").click(function(){
var currentFontSize = $('#text p').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum-1;
if (newFontSize > 8) {
$('#text p').css('font-size', newFontSize);
$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
$('.slider_handle').css('left', newFontSize*19.75 - 158);
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text(Math.round(newFontSize ));
$('#font_indicator').fadeOut('slow');
}
else{
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text("Isn't 8 small enough?");
$('#font_indicator').fadeOut('slow');
}
return false;
});
});
window.onbeforeunload = leaveCookie;
function leaveCookie()
{
var FontSize = $('#text p').css('font-size');
var IntFontSize = parseFloat(FontSize, 10);
$.cookie('fontSize', IntFontSize);
}
.- Por último, el HTML:
<div id='text'>
<h1>Text Size Slider</h1>
<div id='font_indicator'>Current Font Size: <b/> </div>
<p> Había una vez un barquito chiquitito. Había una vez un barquito chiquitito, que no podía, que no sabía, que no podía navegar. Pasaron un, dos, tres, cuatro, cinco, seis, semanas. Pasaron un dós, tres, cuatro, cinco, seis semanas, y aquél baequito, y aquél barquito, y aquél barquito navegó. Y si esta historia parece corta, volveremos, colveremos a empezar.
Había una vez un barquito chiquitito. Había una vez un barquito chiquitito, que no podía, que no sabía, que no podía navegar. Pasaron un, dos, tres, cuatro, cinco, seis, semanas. Pasaron un dós, tres, cuatro, cinco, seis semanas, y aquél baequito, y aquél barquito, y aquél barquito navegó. Y si esta historia parece corta, volveremos, colveremos a empezar. </p>
</div>
Una muy buena idea, sí señor...
✍ ¿Quieres hacer algún comentario? ✍