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

    Cambiare sfondo da un pop-up

    Salve! sto cercando di rendere il mio sito più aèertp a gli utenti...(tempo fà infatti avevo già chiesto come cambiare lo sfondo) ora io vorrei che l'utente visualizza una barra con vari link (cambia sfondo, ecc) ora una volta che clicca su camvia sfondo si apre un pop up al centro della pagina con dei bottoni e sopra una miniatura dellos sfondo, se l'utente clicca su un bottone lo sfondo (della pagina sotto il pop up) viene cambiato ecco un pò di codice:

    LO SO CHE HO FATTO UN CASINO MA POTRESTE DARMI UNA MANO?

    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" lang="it">
    <
    head>
      <
    title>PROVA</title>
      <
    link rel="stylesheet" type="text/css" href="css/tab/dialog_box.css" />
      <
    script type="text/javascript" src="js/tab/dialog_box.js"></script>
      <script type="text/javascript" src="js/bg/bg.js"></script>
    </head>
    <body>
    <h1>[img]logo.png[/img]

    </h1>

    <div id="content">
    <a href="javascript:showDialog('Sfondo','Scegli uno sfondo:
    [img]img/sfondi/1.JPEG[/img]
    <INPUT TYPE="BUTTON" VALUE="Sfondo-1" onclick="cambia_bg('img/sfondi/1.JPEG')"">


    [img]img/sfondi/2.JPEG[/img]
    <INPUT TYPE="BUTTON" VALUE="Sfondo-2" onclick="cambia_bg('img/sfondi/2.JPEG')"">


    [img]img/sfondi/3.JPEG[/img]
    <INPUT TYPE="BUTTON" VALUE="Sfondo-3" onclick="cambia_bg('img/sfondi/3.JPEG')"">','warning');">Scegli lo sfondo che ti piace di più!</a> |
    [url="javascript:showDialog('Success','Your request has been successfully received.','success');"]Prova[/url] |
    [url="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');"]Prova[/url]



    </div>
    </body>
    </html> 
    FILE JS:

    bg.js (cambia sfondo)

    Codice PHP:
    function cambia_bg(uri) {
        
    document.body.style.backgroundImage "url(" uri ")";

    dialog_box.js (pop-up)
    Codice PHP:
    // global variables //
    var TIMER 5;
    var 
    SPEED 10;
    var 
    WRAPPER 'content';

    // calculate the current window width //
    function pageWidth() {
      return 
    window.innerWidth != null window.innerWidth document.documentElement && document.documentElement.clientWidth document.documentElement.clientWidth document.body != null document.body.clientWidth null;
    }

    // calculate the current window height //
    function pageHeight() {
      return 
    window.innerHeight != nullwindow.innerHeight document.documentElement && document.documentElement.clientHeight document.documentElement.clientHeight document.body != nulldocument.body.clientHeight null;
    }

    // calculate the current window vertical offset //
    function topPosition() {
      return 
    typeof window.pageYOffset != 'undefined' window.pageYOffset document.documentElement && document.documentElement.scrollTop document.documentElement.scrollTop document.body.scrollTop document.body.scrollTop 0;
    }

    // calculate the position starting at the left of the window //
    function leftPosition() {
      return 
    typeof window.pageXOffset != 'undefined' window.pageXOffset document.documentElement && document.documentElement.scrollLeft document.documentElement.scrollLeft document.body.scrollLeft document.body.scrollLeft 0;
    }

    // build/show the dialog box, populate the data and call the fadeDialog function //
    function showDialog(title,message,type,autohide) {
      if(!
    type) {
        
    type 'error';
      }
      var 
    dialog;
      var 
    dialogheader;
      var 
    dialogclose;
      var 
    dialogtitle;
      var 
    dialogcontent;
      var 
    dialogmask;
      if(!
    document.getElementById('dialog')) {
        
    dialog document.createElement('div');
        
    dialog.id 'dialog';
        
    dialogheader document.createElement('div');
        
    dialogheader.id 'dialog-header';
        
    dialogtitle document.createElement('div');
        
    dialogtitle.id 'dialog-title';
        
    dialogclose document.createElement('div');
        
    dialogclose.id 'dialog-close'
        
    dialogcontent document.createElement('div');
        
    dialogcontent.id 'dialog-content';
        
    dialogmask document.createElement('div');
        
    dialogmask.id 'dialog-mask';
        
    document.body.appendChild(dialogmask);
        
    document.body.appendChild(dialog);
        
    dialog.appendChild(dialogheader);
        
    dialogheader.appendChild(dialogtitle);
        
    dialogheader.appendChild(dialogclose);
        
    dialog.appendChild(dialogcontent);;
        
    dialogclose.setAttribute('onclick','hideDialog()');
        
    dialogclose.onclick hideDialog;
      } else {
        
    dialog document.getElementById('dialog');
        
    dialogheader document.getElementById('dialog-header');
        
    dialogtitle document.getElementById('dialog-title');
        
    dialogclose document.getElementById('dialog-close');
        
    dialogcontent document.getElementById('dialog-content');
        
    dialogmask document.getElementById('dialog-mask');
        
    dialogmask.style.visibility "visible";
        
    dialog.style.visibility "visible";
      }
      
    dialog.style.opacity .00;
      
    dialog.style.filter 'alpha(opacity=0)';
      
    dialog.alpha 0;
      var 
    width pageWidth();
      var 
    height pageHeight();
      var 
    left leftPosition();
      var 
    top topPosition();
      var 
    dialogwidth dialog.offsetWidth;
      var 
    dialogheight dialog.offsetHeight;
      var 
    topposition top + (height 3) - (dialogheight 2);
      var 
    leftposition left + (width 2) - (dialogwidth 2);
      
    dialog.style.top topposition "px";
      
    dialog.style.left leftposition "px";
      
    dialogheader.className type "header";
      
    dialogtitle.innerHTML title;
      
    dialogcontent.className type;
      
    dialogcontent.innerHTML message;
      var 
    content document.getElementById(WRAPPER);
      
    dialogmask.style.height content.offsetHeight 'px';
      
    dialog.timer setInterval("fadeDialog(1)"TIMER);
      if(
    autohide) {
        
    dialogclose.style.visibility "hidden";
        
    window.setTimeout("hideDialog()", (autohide 1000));
      } else {
        
    dialogclose.style.visibility "visible";
      }
    }

    // hide the dialog box //
    function hideDialog() {
      var 
    dialog document.getElementById('dialog');
      
    clearInterval(dialog.timer);
      
    dialog.timer setInterval("fadeDialog(0)"TIMER);
    }

    // fade-in the dialog box //
    function fadeDialog(flag) {
      if(
    flag == null) {
        
    flag 1;
      }
      var 
    dialog document.getElementById('dialog');
      var 
    value;
      if(
    flag == 1) {
        
    value dialog.alpha SPEED;
      } else {
        
    value dialog.alpha SPEED;
      }
      
    dialog.alpha value;
      
    dialog.style.opacity = (value 100);
      
    dialog.style.filter 'alpha(opacity=' value ')';
      if(
    value >= 99) {
        
    clearInterval(dialog.timer);
        
    dialog.timer null;
      } else if(
    value <= 1) {
        
    dialog.style.visibility "hidden";
        
    document.getElementById('dialog-mask').style.visibility "hidden";
        
    clearInterval(dialog.timer);
      }


  2. #2
    mi aiutate???????? per piacere...

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    1. PROVA cose?
    2. Da errori?
    3. La dialog_box carica i bottoni sfondo?
    4. Che browser usi?

    Per facilitare possibili risposte, metti un link alla demo online (cosi da testarla) se non hai firefox (con l'estensione firebug) scaricalo e molto utile per queste cose.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  4. #4
    allora io uso firefox senza il plugin che mi hai detto, comuque questo e il LINK io vorrei che l'utente possa premere su cambia sfondo > si apre il pop up con dentro delle miniature e sotto dei bottoni con scritto [PROVA] poi l'utente scegli uno sfondo clicca su prova e lo sfondo della pagina sotto al pop up cambia...alla fine cliacca sulla "x" e fa altre cose...

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ma da quello che vedo hai scaricato ed istallato il dialog_box.
    Implementarlo per quello che vuoi fare tu non è cosa semplice, visto che le dialog_box sono generate tramite codice javascript (e normalmente utilizzate per altri scopi tipo alert cofirm etc... cioè avvisi di sistema) inserire in queste i bottoni le immagini non è cosa semplice.
    Io ti consiglio di studiarti il DOM visto che viene utilizzato per generare le dialog_box, e che ti servirà per le modiche che ti occorrono.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Si ma per studiare il dom devo prima sapere il javascript.... e io non lo conosco... comunque...ti allego un immagine...ma non si potrebbe fare con un pop up? e un pò di javascript?
    Immagini allegate Immagini allegate

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.