stavo provando questo script che tecnicamente apre una pagina esterna ma non apre niente e non capisco dove va messo il link alla pagina esterna..Qualche idea?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<style>
html, body {
overflow: hidden;
height: 100%;width: 100%;
margin: 0px;padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
}
h1, h2{
font-size:18px;
margin: 0px;
padding: 5px 0px 5px 0px;
}
#header{
height: 50px;width: 100%;
margin: 0px;
padding: 0px 0px 0px 10px;
border-bottom: 5px solid #666666;
color: #FF0000;
background-color: #000000;
float: left;
}
#left {
width: 20%;height: 100%;
float: left;
border-right: 2px solid #666666;
}
#left h2{
margin-left: 30px;
}
#left ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 30px;
}
#left ul li a{
display: block;padding-top: 3px;
}
#right {
background-color: #FFFFFF;
height: 80%;margin: 0px;
}
#main {
margin-top: 20px;margin-left: 20px;position: relative;float: left;
}
#load{
z-index: 100;background: url(wait.gif) no-repeat;
margin-top: 20px;margin-left: 20px;
position: relative;float: left;
width: 50px;}
</style>
</head>
<body>
<div id="header">
<h1>Prototype e Scriptaculous - Esempio semplice caricamento pagina</h1>
</div>
<div id="left">
<h2>Links:</h2>
<ul>
<li><a class="menu" href="javascript:void(0);">Uno</a></li>
<li><a class="menu" href="javascript:void(0);">Due</a></li>
<li><a class="menu" href="javascript:void(0);">Tre</a></li>
</ul>
</div>
<div id="right">
<div id="load" style="display:none;">loading ...</div>
<div id="main">Clikkare i link di sinistra e la pagina viene caricata...</div>
</div>
<script>
$$('a.menu').invoke('observe', 'click', this.respondToClick);
function respondToClick(event) {
var url = this.readAttribute('link');
getPage(url);
function getPage(url)
{
$('main').hide();
new Effect.Appear('load');
var myAjax = new Ajax.Updater('main', url,
{
method: 'get',
onSuccess:Success
});
return;
};
function Success()
{
new Effect.Fade('load',{duration:30.3});
new Effect.Appear('main',{duration:0.1,queue: 'end'})
};
};
url = this.readAttribute('link')
new Effect.Appear('load')
new Effect.Fade('load',{duration:0.3})
new Effect.Appear('main',{duration:0.1,queue: 'end'})
</script>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<style>
html, body {
overflow: hidden;
height: 100%;width: 100%;
margin: 0px;padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
}
h1, h2{
font-size:18px;
margin: 0px;
padding: 5px 0px 5px 0px;
}
#header{
height: 50px;width: 100%;
margin: 0px;
padding: 0px 0px 0px 10px;
border-bottom: 5px solid #666666;
color: #FF0000;
background-color: #000000;
float: left;
}
#left {
width: 20%;height: 100%;
float: left;
border-right: 2px solid #666666;
}
#left h2{
margin-left: 30px;
}
#left ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 30px;
}
#left ul li a{
display: block;padding-top: 3px;
}
#right {
background-color: #FFFFFF;
height: 80%;margin: 0px;
}
#main {
margin-top: 20px;margin-left: 20px;position: relative;float: left;
}
#load{
z-index: 100;background: url(wait.gif) no-repeat;
margin-top: 20px;margin-left: 20px;
position: relative;float: left;
width: 50px;}
</style>
</head>
<body>
<div id="header">
<h1>Prototype e Scriptaculous - Esempio semplice caricamento pagina</h1>
</div>
<div id="left">
<h2>Links:</h2>
<ul>
<li><a class="menu" href="javascript:void(0);">Uno</a></li>
<li><a class="menu" href="javascript:void(0);">Due</a></li>
<li><a class="menu" href="javascript:void(0);">Tre</a></li>
</ul>
</div>
<div id="right">
<div id="load" style="display:none;">loading ...</div>
<div id="main">Clikkare i link di sinistra e la pagina viene caricata...</div>
</div>
<script>
$$('a.menu').invoke('observe', 'click', this.respondToClick);
function respondToClick(event) {
var url = this.readAttribute('link');
getPage(url);
function getPage(url)
{
$('main').hide();
new Effect.Appear('load');
var myAjax = new Ajax.Updater('main', url,
{
method: 'get',
onSuccess:Success
});
return;
};
function Success()
{
new Effect.Fade('load',{duration:30.3});
new Effect.Appear('main',{duration:0.1,queue: 'end'})
};
};
url = this.readAttribute('link')
new Effect.Appear('load')
new Effect.Fade('load',{duration:0.3})
new Effect.Appear('main',{duration:0.1,queue: 'end'})
</script>
</body>
</html>
