Condividi:
Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!
Moderatori: Anthony47, Triumph Of Steel, archimede
di gahan » 27/04/09 18:14
Premetto che purtroppo non conosco il linguaggio Javascript, ma lo farò prima o poi.
Quindi, navigando su internet ho trovato alcuni siti dov'è applicato questo script che rende molto accattivante lapagina web.Ho fatto alcune ricerche e ho trovato uno script gia pronto sul sito HTML nella sezione Javascript.Lo script in questione è proprio "smoothscroll.js".
Io però devo applicarlo in un div all'interno del sito, non all'intera pagina, con uno scrolling verticale ...solo che in questo modo non funziona?
Chi mi aiuta? grazie.
words like violence, break the silence
-
gahan
- Moderatore
-
- Post: 1397
- Iscritto il: 23/01/08 16:09
di archimede » 28/04/09 08:39
-
archimede
- Moderatore
-
- Post: 2851
- Iscritto il: 07/11/02 12:41
- Località: Genova
-
di gahan » 29/04/09 11:37
Sono riuscito a far funzionare lo scroll animato nel div che mi interessava ma ha un comportamento anomalo.
Il codice è il seguente:
- Codice: Seleziona tutto
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^=#]:not([href=#])').click(function(e){
$('div#serv').animate({
scrollTop: $($(this).attr("href"))
.offset().top }, 2000);
e.preventDefault();
});
});
</script>
Adesso, io nel div#serv ho creato diverse "ancore" collegate tramite <a id="xxx">-----</a> <a href="#xxx"></a>
solo che lo scroll si comporta in maniera errata, cioè per esempio cliccando sulla prima ancora non mi porta al rispettivo collegamento.
Qualche consiglio?
-
gahan
- Moderatore
-
- Post: 1397
- Iscritto il: 23/01/08 16:09
di archimede » 05/05/09 14:18
Bisognerebbe vedere una pagina di esempio completa credo.
Alessandro
-
archimede
- Moderatore
-
- Post: 2851
- Iscritto il: 07/11/02 12:41
- Località: Genova
-
di gahan » 06/05/09 09:13
questi sono i codici:
HTML
- Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prova</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^=#]:not([href=#])').click(function(e){
$('div#serv').animate({
scrollTop: $($(this).attr("href"))
.offset().top }, 3000);
e.preventDefault();
});
});
</script>
</head>
<body>
<div id ="container">
<div id="content">
<div id="menu">
<a class="menu" href="index.html">HOME</a>
<a class="menu" href="azienda.html">AZIENDA</a>
<a class="menu" id="current" href="#">SERVIZI</a>
<a class="menu" href="contatti.html">CONTATTI</a>
<a class="menu" href="photogallery.html">PHOTOGALLERY</a>
</div>
<div id="box">
<div id="serv">
<div id="top"></div>
<a href="#1"><img src="img/servizi/0b.png"></a>
<a href="#2"><img src="img/servizi/1b.png"></a>
<a href="#3"><img src="img/servizi/2b.png"></a>
<a href="#4"><img src="img/servizi/3b.png"></a>
<a href="#5"><img src="img/servizi/4b.png"></a>
<a href="#6"><img src="img/servizi/5b.png"></a>
<div id="1">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/1.jpg" align="left"></a>
</div>
</div>
<div id="2">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/2.jpg" align="left"></a>
</div>
</div>
<div id="3">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/3.jpg" align="left"></a>
</div>
</div>
<div id="4">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/4.jpg" align="left"></a>
</div>
</div>
<div id="5">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/5.jpg" align="left"></a>
<
</div>
</div>
<div id="6">
<div id="nser">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/6.jpg" align="left"></a>
</div>
</div>
</div>
</div>
</div>
<div id="navigation">
<div id="bal">
<ul id="gallery">
<li><a href="#nogo"> <img src="photo/1.jpg" alt="#1" title="#1"></a></li>
<li><a href="#nogo"> <img src="photo/2.jpg" alt="#2" title="#2"></a></li>
<li><a href="#nogo"> <img src="photo/3.jpg" alt="#3" title="#3"></a></li>
<li><a href="#nogo"> <img src="photo/4.jpg" alt="#4" title="#4"></a></li>
<li><a href="#nogo"> <img src="photo/5.jpg" alt="#5" title="#5"></a></li>
<li><a href="#nogo"> <img src="photo/6.jpg" alt="#6" title="#6"></a></li>
<li><a href="#nogo"> <img src="photo/7.jpg" alt="#7" title="#7"></a></li>
<li><a href="#nogo"> <img src="photo/8.jpg" alt="#8" title="#8"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
- Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prova</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^=#]:not([href=#])').click(function(e){
$('div#serv').animate({
scrollTop: $($(this).attr("href"))
.offset().top }, 3000);
e.preventDefault();
});
});
</script>
</head>
<body>
<div id ="container">
<div id="content">
<div id="menu">
<a class="menu" href="index.html">HOME</a>
<a class="menu" href="azienda.html">AZIENDA</a>
<a class="menu" id="current" href="#">SERVIZI</a>
<a class="menu" href="contatti.html">CONTATTI</a>
<a class="menu" href="photogallery.html">PHOTOGALLERY</a>
</div>
<div id="box">
<div id="serv">
<div id="top"></div>
<a href="#1"><img src="img/servizi/0b.png"></a>
<a href="#2"><img src="img/servizi/1b.png"></a>
<a href="#3"><img src="img/servizi/2b.png"></a>
<a href="#4"><img src="img/servizi/3b.png"></a>
<a href="#5"><img src="img/servizi/4b.png"></a>
<a href="#6"><img src="img/servizi/5b.png"></a>
<div id="1">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/1.jpg" align="left"></a>
</div>
</div>
<div id="2">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/2.jpg" align="left"></a>
</div>
</div>
<div id="3">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/3.jpg" align="left"></a>
</div>
</div>
<div id="4">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/4.jpg" align="left"></a>
</div>
</div>
<div id="5">
<div id="nser"class="space">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/5.jpg" align="left"></a>
<
</div>
</div>
<div id="6">
<div id="nser">
<div id="puls"><a href="#top"><img src="img/up.jpg" ></a></div>
<img src="img/big/6.jpg" align="left"></a>
</div>
</div>
</div>
</div>
</div>
<div id="navigation">
<div id="bal">
<ul id="gallery">
<li><a href="#nogo"> <img src="photo/1.jpg" alt="#1" title="#1"></a></li>
<li><a href="#nogo"> <img src="photo/2.jpg" alt="#2" title="#2"></a></li>
<li><a href="#nogo"> <img src="photo/3.jpg" alt="#3" title="#3"></a></li>
<li><a href="#nogo"> <img src="photo/4.jpg" alt="#4" title="#4"></a></li>
<li><a href="#nogo"> <img src="photo/5.jpg" alt="#5" title="#5"></a></li>
<li><a href="#nogo"> <img src="photo/6.jpg" alt="#6" title="#6"></a></li>
<li><a href="#nogo"> <img src="photo/7.jpg" alt="#7" title="#7"></a></li>
<li><a href="#nogo"> <img src="photo/8.jpg" alt="#8" title="#8"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
poi occorre anche lo script jquery che carico nel codice HTML scaricabile da QUI:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.js
words like violence, break the silence
-
gahan
- Moderatore
-
- Post: 1397
- Iscritto il: 23/01/08 16:09
di gahan » 06/05/09 09:15
Scusate ho copiato 2 volte il codice HTML:
CSS
- Codice: Seleziona tutto
body{margin:0 auto;padding:0;background:#fff;text-align:center;font-family:verdana,arial,sans-serif;font-size:11px;
background-attachment:fixed;background-color:#fff;}
h5{color:#005D2A;}
div#container{position:relative;width:806px;height:600px; margin:0 auto; background:url(img/1.jpg) no-repeat;}
div#navigation {position:absolute;text-align:center;left:-5px; top:-1px; width:280px;padding:0;}
div#content {position:absolute;height:auto;text-align:center;left:32px;top:0; padding:0; margin-left:263px;}
div#footer{bottom:0;width:798px;margin:0 auto;height:30px;background:#fff;}
div#bal{margin:265px auto 0;width:202px;padding:7px 8px;border:1px solid #fff;}
div#box{position:absolute;width:470px;height:255px;padding:8px 0 5px 8px;border:1px solid #fff;margin:278px 0 0 0;text-align:justify;}
div#az{background:#fff;position:absolute;width:454px;padding:8px 0 6px 8px;height:238px;}
div#desc{width:179px;padding:0 0 0 0;text-align:justify;margin:-215px 0 0 247px;}
div#serv{position:absolute;width:462px;padding:0 0 0 0;text-align:left;overflow:auto;height:252px;}
div#serv img{border:0; margin:0 8px 8px 0;}
div#nser{position:relative;background:#fff;width:420px;border:1px solid #fff;padding:9px 12px 0 10px;height:241px;text-align:justify;}
div#nserv img{position:relative;margin:0 12px 0 0;}
.space{margin:40px 0 40px 0;}
div#dser{width:204px;float:left;margin:0 0 0 5px;}
div#puls{position:absolute;top:228px;left:347px;}
#gallery {padding:0;margin:0 auto; list-style-type:none; overflow:hidden; width:200px; height:266px; border:1px solid #fff;
background:#fff url(photo/sfondo.jpg) no-repeat;}
#gallery li {float:left;}
#gallery li a {display:block; height:5px;width:200px;overflow:hidden;float:left; text-decoration:none; border-bottom:1px solid #fff;cursor:default;}
#gallery li a img {border:0;}
#gallery li a:hover {background:#eee; height:200px;}
div#menu {font-size: 10px;font-family: arial,verdana,sans-serif;letter-spacing:2px;position:absolute;margin:263px 0 0 4px;width:470px;text-align:center;padding:1px;}
a.menu {text-align:center;background:transparent;color: #005D2A;text-decoration: None;width: 100px;padding: 1px 6px 2px 7px;margin:0 5px;}
a:hover.menu {background-color: #fff;color: #005D2A;text-decoration: None;width: 100px;padding: 1px 6px 1px 7px;}
div#menu a#current{background-color: #fff;color:#005D2A;text-decoration: None;width: 100px;padding: 1px 6px 1px 7px;}
@media screen {body>div#navigation { position: fixed;}}
words like violence, break the silence
-
gahan
- Moderatore
-
- Post: 1397
- Iscritto il: 23/01/08 16:09
di archimede » 06/05/09 09:56
Il tuo codice HTML contiene non pochi errori: vai
qui per i dettagli da sistemare. Già che ci sei, valida anche il CSS (io non l'ho fatto).
HTH.
Alessandro
-
archimede
- Moderatore
-
- Post: 2851
- Iscritto il: 07/11/02 12:41
- Località: Genova
-
di gahan » 06/05/09 11:12
grazie, il CSS è a posto, mentre per quanto riguardal'HTML ho sistemato quasi tutti gli errori tranne che per alcuni dove ad essere sincero non capisco dov'è il problema.
Comunque lo scroll animato si comporta molto stranamente:
Ho sei link (che poi sarebbero i servizi) che corrispondono alle "ancore". Cliccando sul primo link mi porta sulla seconda ancora, il secondo link sulla terza ancora e cosi via.Di conseguenza sia il 5° che 6° link portano entrambi sulla sesta ancora.
words like violence, break the silence
-
gahan
- Moderatore
-
- Post: 1397
- Iscritto il: 23/01/08 16:09
Torna a Programmazione
Topic correlati a "[Javascript] Smooth scroll":
Chi c’è in linea
Visitano il forum: Nessuno e 26 ospiti