Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Javascript "Mouse Effect" e Scroll Bar

    Buonasera ^_^

    E' da qualche tempo che armeggio con l'html per cercare di personalizzare, per quanto possibile, il mio blog personale. Vi lascio immaginare... Subentrano subito gli inevitabili cambiamenti del font, dei colori, degli stili... Insomma, ci si diverte un po' a migliorare secondo i propri gusti l'aspetto grafico.

    Cerca e ricerca, tra le tante 'migliorie', m'imbatto in uno javascript che mi promette un effetto 'fairy dust' benfatto. Intrigato, lo prendo e lo copio tra i tag <head> ed </head>, proprio come mi suggerisce. E il bello è che tutto funziona perfettamente.

    C'è un solo problema, però: la presenza di questo script determina la comparsa di una scrollbar orizzontale che comincia a spostarsi, praticamente da sola, verso sinistra. Per quanto posta in basso, l'occhio, almeno il mio, cade inevitabilmente su quell'ospite indesiderato, e più che di una miglioria, a questo punto preferirei parlare di un'aggiunta superflua.

    Tra l'altro, non è la prima volta che mi capita una situazione del genere: poco tempo fa provai un altro script, sempre relativo al mouse, dove immettendo l'url di un'immagine, il mouse si 'portava a spasso' la suddetta immagine (che doveva chiaramente avere una risoluzione molto piccola). Ebbene, anche in questo caso, compariva una fatidica scrollbar orizzontale.

    Per concludere vi dico che un mio amico ha provato a visualizzarlo con Opera, e questo problema nn lo vedeva: mentre, con internet explorer, sussiste (>.< purtroppo, aggiungo io).

    C'è qualcosa che si può fare al riguardo? Vi posto lo script qui in basso. Grazie in anticipo della vostra risposta. ^_^





    <script type="text/javascript">
    // <![CDATA[
    var colour="#f0f";
    var sparkles=50;
    /****************************
    * Tinkerbell Magic Sparkle *
    * (c) 2005 mf2fm web-design *
    * http://www.mf2fm.com/rv *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
    }}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>

  2. #2
    Salve ancora... Tra le tante cose che si sono sul web ho trovato da solo la soluzione che cercavo. La scrivo qui nel caso in cui qualcuno dovesse aver riscontrato il mio stesso problema... Poi fatene quel che preferite. ^.^


    E' sufficiente inserire tra i tag <head>...</head>

    <style type="text/css">
    <!--
    .html, body {
    overflow-x:hidden;
    }
    -->
    </style>



    E' tutto. Buona continuazione.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.