Tabooktron.es: Barra flotante o top bar que se desliza sobre tu web

Buenas tardes estimados visitantes, comparto este script, lo han solicitado varias veces. Este JavaScript nos permite visualizar una barra flotante que se desliza a medida que tu web avanza. Dentro de este script podemos incluir contenido Html con una opción de cerrar (X). En nuestra página web la usamos para mostrar los últimos artículos que publicamos. Tu puedes usar este código para agregar imágenes, links, códigos HTML, pruébalo espero les guste.

Copia este codigo javascript

Agregue el código siguiente en la sección del HEAD la página copia desde las hoja que sale encima junto al lado derecho al poner el raton encima y te debe salir copiado en el portapapeles:

01<br />
<script type="text/javascript">
02
//<![CDATA[
03
 
04
/***********************************************
05
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
06
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
07
* This notice must stay intact for legal use.
08
* Visit http://www.dynamicdrive.com/ for full source code
09
***********************************************/
10
 
11
var persistclose=0              //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
12
var startX = 10                //set x offset of bar in pixels
13
var startY = 40                 //set y offset of bar in pixels
14
var verticalpos="fromtop"    //enter "fromtop" or "frombottom"
15
var barID="ontopbar"            //element ID
16
 
17
 
18
function iecompattest(){
19
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
20
}
21
 
22
function get_cookie(Name) {
23
var search = Name + "="
24
var returnvalue = "";
25
if (document.cookie.length > 0) {
26
offset = document.cookie.indexOf(search)
27
if (offset != -1) {
28
offset += search.length
29
end = document.cookie.indexOf(";", offset);
30
if (end == -1) end = document.cookie.length;
31
returnvalue=unescape(document.cookie.substring(offset, end))
32
}
33
}
34
return returnvalue;
35
}
36
 
37
function closebar(){
38
if (persistclose)
39
document.cookie="remainclosed=1"
40
document.getElementById(barID).style.visibility="hidden"
41
}
42
 
43
function staticbar(){
44
        barheight=document.getElementById(barID).offsetHeight
45
        var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
46
        var d = document;
47
        function ml(id){
48
                var el=d.getElementById(id);
49
                if (!persistclose || persistclose && get_cookie("remainclosed")=="")
50
                el.style.visibility="visible"
51
                if(d.layers)el.style=el;
52
                el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
53
                el.x = startX;
54
                if (verticalpos=="fromtop")
55
                el.y = startY;
56
                else{
57
                el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
58
                el.y -= startY;
59
                }
60
                return el;
61
        }
62
        window.stayTopLeft=function(){
63
                if (verticalpos=="fromtop"){
64
                var pY = ns ? pageYOffset : iecompattest().scrollTop;
65
                ftlObj.y += (pY + startY - ftlObj.y)/8;
66
                }
67
                else{
68
                var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
69
                ftlObj.y += (pY - startY - ftlObj.y)/8;
70
                }
71
                ftlObj.sP(ftlObj.x, ftlObj.y);
72
                setTimeout("stayTopLeft()", 10);
73
        }
74
        ftlObj = ml(barID);
75
        stayTopLeft();
76
}
77
 
78
if (window.addEventListener)
79
window.addEventListener("load", staticbar, false)
80
else if (window.attachEvent)
81
window.attachEvent("onload", staticbar)
82
else if (document.getElementById)
83
window.onload=staticbar
84
//]]>
85
</script>

Copia este estilo css

Agregue en el < HEAD> de su pagina web

Copia este Html en un div o en un widget/html

Reemplaza los # por tus link o direcciones web. Reemplaza Tu texto por tus propias palabras, todo lo que este marcado en color rojo.Si deseas que la barra sea lateral eliminale los

Páginas

Translate

martes, 30 de septiembre de 2014

Barra flotante o top bar que se desliza sobre tu web

ENTRADAS POPULARES DEL MES