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

    Testo scorrevole con pulsanti di controllo

    Salve,

    Vorrei creare un testo scorrevole in 'verticale', con dei pulsanti che permettano all'utente il controllo della velocità di scorrimento, la direzione, la pausa e lo stop ecc.

    Inoltre vorrei poterlo fare con più temi di scorrimento, cioè come impostazione di default fa scorrere per un loop il testo riguardante un argomento, poi passa al testo di un altro argomento.

    Sono rimasto bloccato sulla proggrammazione di alcune di queste opzioni di controllo.
    :master: Lo stop cioè il 'riavvolgimemento e blocco dello scorrimento perché non riesco a portare il testo all'inizio non so come fare!
    :master: E il cambio di argomento, perché non so come determinare la fine di un loop a Javascript, che sarebbe la condizione che provocherebbe l'azione di cambio argomento.

    l'esempio e su www.free-italyguide.com/index.php?hm=ecoturismo .

    Questo è la bozza di script che ho fatto:

    <script type="text/javascript" language="javascript">

    function txt_scrrvl(x, azione){
    var marq = document.getElementById(x);
    switch(azione){
    case 'up': marq.direction = 'up'; break;
    case 'down': marq.direction = 'down'; break;
    case 'stop': marq.stop(); break;
    case 'play': marq.start();
    case 'more': var speedA = marq.scrollAmount; speedA++; marq.scrollAmount = speedA; break;
    case 'less': var speedA = marq.scrollAmount; speedA--; marq.scrollAmount = speedA; break;
    }

    }
    </script>

    <div>[img]img/testo_scorrevole/scorrevole_1.gif[/img][img]img/testo_scorrevole/scorrevole_button_plus.gif[/img][img]img/testo_scorrevole/scorrevole_button_less.gif[/img][img]img/testo_scorrevole/arrow_up.gif[/img][img]img/testo_scorrevole/arrow_down.gif[/img][img]img/testo_scorrevole/play.gif[/img][img]img/testo_scorrevole/pause.gif[/img][img]img/testo_scorrevole/stop.gif[/img]</div>


    <marquee behavior="scroll" direction="up" scrollamount="2" scrolldelay="30" id="marq" style="height:166px; padding-bottom: 0px; padding-left: 15px; padding-top: 0px; padding-right: 15px;">
    &bull; PROVA 1.


    &bull; fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine 1.


    &bull; fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine 10.


    &bull; fine fine fine fine fine fine fine fine fine fine fine fine fine fine fine 11.


    &bull; end end end end end end end end end .


    </div>
    </marquee>

    Qualcuno può darmi una qualsiasi indicazione?
    Accetto tutto, anche un metodo completamente diverso, senza il tag marquee.

    p.s.
    Poi non capisco perché con Opera 9... non funziona neanche quello già fatto, che invece funziona su explorer, firefox e il vecchio netscape 7.2

  2. #2
    Ok,

    Ho sperato tanto che qualcuno mi rispondesse e magari mettendoci anche un breve scriptino con tutto già fatto, ma, dopo tutti questi giorni, niente.

    Nel frattempo ho provato a risolvere il mio problemino da solo:

    Prima di tutto mi sono documentato ed ho chiarito perchè con opera non funzionavno le opzioni di controllo: ara dovuto al fatto che ad esempio "stop()" erano dei metodi di explorer e che non venivano riconosciuti da altri browser, se non nelle versioni successive; evidentemente oper non ancora.

    Comunque poi ho lasciato perdere il tag marquee ed ho cercato di sviluppare una soluzione documentata in una discussione di questo forum: http://forum.html.it/forum/showthread/t-1079544.html .

    Be alla fine sono riuscito a fare tutto quello che desideravo fare, mi è venuto un bel giochino, certo va rivisto graficamente, come i pulsantini che sono troppo grandi oltre che alcune scelte nella progrmmazione, ma pazienza.

    Anche se non penso serva a nessuno provo a metterlo qui sotto, e avvertendo che sono un programmatore inesperto e che ancora non ho dimestichezza con i fogli di stile.

    -->il file di javascript:
    // JavaScript Document
    var contB, contC, contD, contE, contF, contG1,idset;
    var contG = 4;
    function scorr_actions(action,type,object){
    switch(action){
    case 'ciclo' :
    if(contC){contC = null; object.src ="img/scorrevole/arrows_up_down_active.jpg";}
    else{ contC = true; object.src ="img/scorrevole/arrows_up_down.gif";}
    break;
    case 'pause':
    if(contD){contD = null; object.src="img/scorrevole/pause.gif";}
    else{contD = true; object.src="img/scorrevole/pause_active.jpg";}
    break;
    case 'play':
    object = document.getElementById(object);
    if(!contD && type == 'out'){contE = null; object.src="img/scorrevole/play.gif";}
    if(!contD && type == 'over'){contE = true; object.src="img/scorrevole/play_active.jpg";}
    break;
    case 'direction':
    if(contF && type == 'su'){
    contF = null; object.src="img/scorrevole/arrow_up_active.jpg";
    document.getElementById('scrl_arrow_down').src = 'img/scorrevole/arrow_down.gif';
    }
    if(!contF && type == 'giu'){
    contF = true; object.src="img/scorrevole/arrow_down_active.jpg";
    document.getElementById('scrl_arrow_up').src = 'img/scorrevole/arrow_up.gif';
    }
    break;
    case 'speed':
    if(type == 'more'){
    if(contG > 1){
    contG--;
    object.src ='img/scorrevole/scorrevole_plus_active_1.jpg';
    idset = setTimeout(function(){
    for(i=0;i<1;i++){
    object.src = 'img/scorrevole/scorrevole_button_plus.gif';
    if(i==1){clearTimeout(idSet);}
    }
    },200);
    }
    if(contG <=1){
    object.src ='img/scorrevole/scorrevole_plus_active_2.jpg';
    idset = setTimeout(function(){
    for(i=0;i<1;i++){
    object.src = 'img/scorrevole/scorrevole_button_plus.gif';
    if(i==1){clearTimeout(idSet);}
    }
    },200);
    }
    }
    if(type == 'less'){

    if(contG < 20){
    contG++;
    object.src ='img/scorrevole/scorrevole_less_active_1.jpg';
    idset = setTimeout(function(){
    for(i=0;i<1;i++){
    object.src = 'img/scorrevole/scorrevole_button_less.gif';
    if(i==1){clearTimeout(idSet);}
    }
    },200);
    }

    if(contG >= 20){
    object.src ='img/scorrevole/scorrevole_less_active_2.jpg';
    idset = setTimeout(function(){
    for(i=0;i<1;i++){
    object.src = 'img/scorrevole/scorrevole_button_less.gif';
    if(i==1){clearTimeout(idSet);}
    }
    },200);
    }
    }
    break;
    }
    }

    function DivTitoli_visible(option)
    {
    if(document.getElementById('brbH501s')){
    var onlyDIV = document.getElementById('brbH501s');
    if(option == 'visibile'){
    setTimeout(function(){onlyDIV.style.visibility = "visible"; onlyDIV.style.display = "block";},400);
    }
    else {
    if(!onlyDIV.onmouseover || !onlyDIV.childNodes.onmouseover){
    setTimeout(function(){ onlyDIV.style.visibility = "hidden"; onlyDIV.style.display = "none";},400);
    }
    }
    }
    else{ return false;}
    }

    function argSelezionato(valore){contB = parseInt(valore.name);}

    function div_movie(titoli,box){
    var nome = new Array();
    var titolo = new Array();
    var last = new Array();
    box = document.getElementById(box);
    titoli = document.getElementById(titoli);
    var x = box.getElementsByTagName('div');
    var testo, divTitoli, xz, clone, nuovo, vecchio, link_arg;

    divTitoli = document.createElement('div');
    //Contenitore degli argomenti da scegliere.
    divTitoli.setAttribute('id', 'brbH501s');
    divTitoli.style.border = 'solid #000066 1px';
    divTitoli.style.padding = '2px 5px 2px 5px';
    divTitoli.style.position = 'absolute';
    divTitoli.style.visibility = 'hidden';
    divTitoli.style.fontWeight = '600';
    divTitoli.style.fontColor ='#FFFFFF';
    divTitoli.style.backgroundColor = '#F7F9FB';
    divTitoli.style.filter = 'Alpha(Opacity=92, FinishOpacity=10, StartX=10, StartY=10, FinishX=10, FinishY=10)';

    divTitoli.onmouseout = function(option){ DivTitoli_visible('no') };
    titoli.parentNode.appendChild(divTitoli);

    var Titoli = titoli;
    var xleft=0;
    var ytop=titoli.offsetHeight;
    while(Titoli)
    {
    xleft += Titoli.offsetLeft;
    ytop += Titoli.offsetTop;
    Titoli = Titoli.offsetParent;
    }
    //Mac
    if(navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined")
    {
    xleft += document.body.leftMargin;
    ytop += document.body.topMargin;
    }

    divTitoli.style.left = xleft+'px';
    divTitoli.style.top = (ytop-2)+'px';
    //segue creazione degli array per il ciclo argomenti:---
    for(i=0;i<x.length;i++){
    nome[i] = x[i].id;
    titolo[i] = x[i].getAttribute('name');
    nuovo = document.createElement('div');
    nuovo.style.padding = '1px';
    nuovo.onmouseover = function(option){ DivTitoli_visible('visibile') };
    link_arg = document.createElement('a');
    link_arg.setAttribute('href', '#');
    link_arg.setAttribute('name', i);
    link_arg.onclick = function(valore){ argSelezionato(this) };
    testo = document.createTextNode(titolo[i]);
    link_arg.appendChild(testo);
    nuovo.appendChild(link_arg);
    divTitoli.appendChild(nuovo);
    if(nuovo.offsetWidth > titoli.offsetWidth){
    if(nuovo.clientWidth != nuovo.offsetWidth){ titoli.style.width = nuovo.offsetWidth; }//Explorer
    else{titoli.style.width = nuovo.clientWidth+'px';}//Netscape - Firefox ecc.
    }
    }
    // fine creazione ciclo---------------------------------

    div = document.getElementById('box');

    if(!div.hasChildNodes()){
    div.appendChild(document.getElementById(nome[0]));
    var titolo = document.createTextNode(document.getElementById(no me[0]).getAttribute('name'));
    if(titoli.hasChildNodes()){
    titoli.replaceChild( titolo, titoli.firstChild);
    }
    else {titoli.appendChild(titolo);}
    //sfondi links menu argomento quando sono in scorrimento ---------------------->
    document.getElementById('brbH501s').childNodes[0].style.backgroundColor = "#C9D7E4";
    // fine links menu argomento quando sono in scorrimento <----------------------|
    }

    if(!contA || contA !== 0 ){ var contA = 0;}
    div.style.visibility = 'hidden';
    div.scrollTop =-1;

    var text = div.innerHTML;
    div.innerHTML = "";
    while(!div.scrollTop)
    div.innerHTML = div.innerHTML.concat(++div.scrollTop, "
    ");
    div.scrollTop = 0;
    div.innerHTML = div.innerHTML.replace(/[0-9]+/g, "");
    div.innerHTML = div.innerHTML.concat(text, div.innerHTML);
    //Inizio scorrimento ----------------------------->
    intervalID = setInterval(function(){
    //Valori di last Scroll per lo scorrimento inverso--------------------------------------->
    if(!last[0]){
    for(i=0;i<nome.length;i++){
    if(i==0){
    div.scrollTop = -1;
    while(div.lastScroll !== div.scrollTop){
    div.lastScroll = div.scrollTop++;
    }
    last[i]= div.lastScroll;
    }
    if( document.getElementById(nome[i]) && i !=0){
    vecchio = document.getElementById(nome[(i-1)]);
    nuovo = document.getElementById(nome[i]);
    clone = vecchio.cloneNode(true);
    box.appendChild(clone);
    div.replaceChild(nuovo, vecchio);
    div.scrollTop = -1;
    while(div.lastScroll !== div.scrollTop){
    div.lastScroll = div.scrollTop++;
    }
    last[i]= div.lastScroll;
    }
    if( i== (nome.length-1) && document.getElementById(nome[(i)]) ){
    vecchio = document.getElementById(nome[(i)]);
    nuovo = document.getElementById(nome[0]);
    clone = vecchio.cloneNode(true);
    box.appendChild(clone);
    div.replaceChild(nuovo, vecchio);
    div.scrollTop = -1;
    }
    }
    }//if not last
    div.style.visibility = 'visible';
    // fine ------------------------------|

    if(contB || contB === 0){// Selezione da menu
    if(contB == contA ){
    if(!contF){ div.scrollTop = -1; contB = null;}
    if(contF){ div.scrollTop = last[contA]; contB = null;}
    }
    else {
    vecchio = document.getElementById(nome[contA]);
    nuovo = document.getElementById(nome[contB]);
    clone = vecchio.cloneNode(true);
    box.appendChild(clone);
    div.replaceChild(nuovo, vecchio);
    if(!contF){ div.scrollTop = -1;}
    if(contF){ div.scrollTop = last[contA];}
    titolo = document.createTextNode(document.getElementById(no me[contB]).getAttribute('name'));
    titoli.replaceChild( titolo, titoli.firstChild);
    //sfondi links menu argomento quando sono in scorrimento ------- x links --------------->
    if(document.getElementById('brbH501s').childNodes[(contA)]){
    document.getElementById('brbH501s').childNodes[(contA)].style.backgroundColor = "";
    }
    document.getElementById('brbH501s').childNodes[contB].style.backgroundColor = "#C9D7E4";
    // fine links menu argomento quando sono in scorrimento <------- x links ---------------|
    contA = contB;
    contB = null;
    }
    }//fine selezione da menu

    if(div.lastScroll === div.scrollTop && !contF){

    if(!contC){
    vecchio = document.getElementById(nome[contA]);
    if(contA < (nome.length-1)){contA++;}
    else {contA = 0;}
    nuovo = document.getElementById(nome[contA]);
    clone = vecchio.cloneNode(true);
    box.appendChild(clone);
    div.replaceChild(nuovo, vecchio);
    }
    div.scrollTop = -1;
    titolo = document.createTextNode(document.getElementById(no me[contA]).getAttribute('name'));
    titoli.replaceChild( titolo, titoli.firstChild);

    //sfondi links menu argomento quando sono in scorrimento ---------------------->
    document.getElementById('brbH501s').childNodes[contA].style.backgroundColor = "#C9D7E4";
    if((contA-1) === 0 || contA === 0){
    document.getElementById('brbH501s').childNodes[(nome.length-1)].style.backgroundColor = "";
    }
    if(document.getElementById('brbH501s').childNodes[(contA - 1)] && contA < nome.length){
    document.getElementById('brbH501s').childNodes[(contA - 1)].style.backgroundColor = "";
    }
    // fine links menu argomento quando sono in scorrimento <----------------------|
    }
    else{
    if(!contD && !contE && !contF){
    if(!contG){contG = 1;}
    if(contG1 < contG){contG1++;}
    else{div.lastScroll = div.scrollTop++; contG1=1;}
    }
    }
    // +++++++++++++++++++++++++++++++++++++
    if(div.scrollTop === 0 && contF){

    if(!contC){
    vecchio = document.getElementById(nome[contA]);
    if(contA < (nome.length-1)){contA++;}
    else {contA = 0;}
    nuovo = document.getElementById(nome[contA]);
    clone = vecchio.cloneNode(true);
    box.appendChild(clone);
    div.replaceChild(nuovo, vecchio);
    }
    div.scrollTop = last[contA];
    titolo = document.createTextNode(document.getElementById(no me[contA]).getAttribute('name'));
    titoli.replaceChild( titolo, titoli.firstChild);
    //sfondi links menu argomento quando sono in scorrimento ---------------------->
    document.getElementById('brbH501s').childNodes[contA].style.backgroundColor = "#C9D7E4";
    if((contA-1) === 0 || contA === 0){
    document.getElementById('brbH501s').childNodes[(nome.length-1)].style.backgroundColor = "";
    }
    if(document.getElementById('brbH501s').childNodes[(contA - 1)] && contA < nome.length){
    document.getElementById('brbH501s').childNodes[(contA - 1)].style.backgroundColor = "";
    }
    // fine links menu argomento quando sono in scorrimento <----------------------|
    }
    else{
    if(!contD && !contE && contF){
    if(!contG){contG=1;}
    if(contG1 < contG){contG1++;}
    else{div.lastScroll = div.scrollTop--; contG1=1; }
    }
    }
    }, 1);
    }
    -->fine file di javascript: 11Kb
    Segue file foglio di stile e file html con le altre risposte

  3. #3
    -->foglio di stile
    @charset "utf-8";
    /* CSS Document */

    .box_generale {
    height: 80px;
    width: 350px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    text-align: left;
    }
    .testata-grigio {
    border-top: 1px solid #000066;
    border-right: 1px solid #000066;
    border-bottom: 0px solid #000066;
    border-left: 1px solid #000066;
    padding: 3px 2px 3px 2px;
    background-color: #F4F5F7;
    position: static;
    }
    .float_right {
    position:relative;
    float:right;
    width: 201px;
    vertical-align: top;
    background-image: url(img/scorrevole/scorrevole3.gif);
    text-align: right;
    }
    .grigio_chiaro {
    color: #EEEEEE;
    }

    .float_left {
    padding-left:3px;
    padding-bottom:8px;
    }
    #box {
    height: 100%;
    /*width: 99%;*/
    border: 1px solid #000066;
    padding: 2px;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 8pt;
    overflow: hidden;
    }
    -->fine foglio di stile

    -->file html
    <div class="box_generale">
    <div class="testata-grigio">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td background="img/scorrevole/scorrevole_4.gif" style="font-weight: 600;"><span class="float_left">Links
    Utili </span></td>
    <td background="img/scorrevole/scorrevole_4.gif" ><div class="float_right">[img]img/scorrevole/scorrevole_1.gif[/img][img]img/scorrevole/scorrevole_button_plus.gif[/img][img]img/scorrevole/scorrevole_button_less.gif[/img][img]img/scorrevole/arrow_up_active.jpg[/img][img]img/scorrevole/arrow_down.gif[/img][img]img/scorrevole/play.gif[/img][img]img/scorrevole/pause.gif[/img][img]img/scorrevole/stop.gif[/img]</div></td>
    </tr>
    <tr>
    <td height="23" colspan="3" valign="middle" background="img/scorrevole/sfondo_blu.gif" bgcolor="#FF3300"><div class="grigio_chiaro" style="float:left; padding-left:3px; padding-right:5px; padding-top:1px">Argomento:</div>
    <div style="float:left; font-weight: 600; padding-right:5px; padding-left:5px; background-color:#F4F5F7; height:16px; margin-bottom:2px; padding-top:0px; border-color:#999999; border-left-width:2px; border-style:ridge; border-width:1px" id= "titoli" onmouseover="DivTitoli_visible('visibile')" onmouseout="DivTitoli_visible('no')"></div>
    <div style="float:left">[img]img/scorrevole/triangolo_menu.gif[/img]</div>
    <div style="float:right; ">[img]img/scorrevole/arrows_up_down_active.jpg[/img]</div></td>
    </tr>
    </table>
    </div>
    <div id="box" name="box" onmouseover="scorr_actions('play','over', 'img_play_scr')" onmouseout="scorr_actions('play','out', 'img_play_scr')"></div>
    </div>

    <div id ="argomenti" style="display:none;">
    <div id="a" name="Associazioni Ambientali">
    Associazioni Ambientali Associazioni Ambientali Associazioni Ambientali Associazioni
    </div>

    <div id="b" name="Associazioni Ecoturismo">
    Associazioni Ecoturismo Associazioni Ecoturismo Associazioni Ecoturismo Associazioni Ecoturismo Associazioni Ecoturismo Associazioni Ecoturismo Associazioni Ecoturismo </div>
    <div id="c" name="Parchi Nazionali">
    Parchi Nazionali Parchi Nazionali Parchi Nazionali Parchi Nazionali Parchi Nazionali Parchi </div>

    <div id="d" name="Associazioni Naturalistiche">
    Associazioni Naturalistiche Associazioni Naturalistiche Associazioni Naturalistiche (4)</div>

    <div id="e" name="Associazioni Varie">
    Associazioni Varie Associazioni Varie Associazioni Varie Associazioni Varie Associazioni Varie Associazioni Varie Associazioni Varie (5)</div>

    </div>

  4. #4
    Il concetto è semplice:

    C'è un div con il suo id al quale viene associato uno script che provochi l'effetto scorrevole, Questo div contiene un altro div che a sua volta contiene tutto cio che si vuole abbia l'effetto scorrevole chiamiamolo "div2"; poi c'è a altro script che si preoccupa di rimpiazzare il div2" conn un altro quando questo ha compiuto il suo scorrimento fino a sparire.

    I div di rimpiazzo sono contenuti a loro volta in un div contenitore ed hanno tutti un attributo 'name' (che farà da titolo argomento) e un id univoco.

  5. #5
    Il concetto è semplice:

    C'è un div con il suo id al quale viene associato uno script che provochi l'effetto scorrevole, Questo div contiene un altro div che a sua volta contiene tutto cio che si vuole abbia l'effetto scorrevole chiamiamolo "div2"; poi c'è a altro script che si preoccupa di rimpiazzare il div2" conn un altro quando questo ha compiuto il suo scorrimento fino a sparire.

    I div di rimpiazzo sono contenuti a loro volta in un div contenitore ed hanno tutti un attributo 'name' (che farà da titolo argomento) e un id univoco.

  6. #6
    Lo script javascript del testo scorrevole è stato subito cambiato da quando fu pubblicato sul forum, poiché bastava qualsiasi div diverso da quelli stabiliti come argomento, quindi qualsiasi div senza id e attributo name, a causare errore.

    Lo script corretto e all'interno del sito su scritto, perché funzioni con tutti i browser bisogna tener conto di un piccolo accorgimento per ogni div argomento e il suo contenitore.

    In futuro migliorerò lo script togliendo anche tutti i bugs, come quello che se si apre la finestra del browser ad una larghezza ridotta, quando poi si allargerà la stessa , magari mettendo "ingrandisci tutto" il menù non appare più dove dovrebbe, ma spostato nell'asse orizzontale.

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.