Cambiare sfondo da un pop-up in una pagina
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 alt="logo" src="logo.png" /><br />
</h1>
<div id="content">
<a href="javascript:showDialog('Sfondo','Scegli uno sfondo:
<img style="width: 72px; height: 72px;" alt="sfondo 1" src="img/sfondi/1.JPEG">
<INPUT TYPE="BUTTON" VALUE="Sfondo-1" onclick="cambia_bg('img/sfondi/1.JPEG')"">
<br>
<img style="width: 72px; height: 72px;" alt="sfondo 2" src="img/sfondi/2.JPEG">
<INPUT TYPE="BUTTON" VALUE="Sfondo-2" onclick="cambia_bg('img/sfondi/2.JPEG')"">
<br>
<img style="width: 72px; height: 72px;" alt="sfondo 3" src="img/sfondi/3.JPEG">
<INPUT TYPE="BUTTON" VALUE="Sfondo-3" onclick="cambia_bg('img/sfondi/3.JPEG')"">','warning');">Scegli lo sfondo che ti piace di più!</a> |
<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Prova</a> |
<a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prova</a><br />
<br />
</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 != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.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);
}
}
