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?
FILE JS: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>
bg.js (cambia sfondo)
dialog_box.js (pop-up)Codice PHP:function cambia_bg(uri) {
document.body.style.backgroundImage = "url(" + uri + ")";
}
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);
}
}
Rispondi quotando