- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Problema esecuzione codice javascript
-
Problema esecuzione codice javascript
Buongiorno,
sto cercando di realizzare un news slider nella mia home page. Ho prelevato, partendo dal sito di jquery.com (sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/) un esempio che fa proprio a caso mio.
Ho scaricato il file e provato l'esempio in locale che ha funzionato perfettamente. A questo punto ho fatto il copia ed incolla nelle mie pagine php e quando lancio il tutto nessun browser esegue il codice javascript.
Allego il codice da me usato
Index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> <head> <title>Homepage</title> <!-- Stile per tutte le pagine --> <link rel="stylesheet" type="text/css" media="screen" href="css/body.css"/> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css"/> <link rel="stylesheet" type="text/css" media="screen" href="css/menu.css"/> <!-- Stile per la sezione --> <link rel="stylesheet" type="text/css" media="screen" href="css/home.css"/> <!-- Stile test --> <link rel="stylesheet" type="text/css" media="screen" href="css/pippo.css"> <link rel="stylesheet" type="text/css" media="screen" href="css/test2.css"> <!-- JavaScript per notizie in homepage --> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="sjs/home_news.js"></script> </head> <body> <div id="pagina"> <div id="logo"></div> <!-- Menù principale --> <? include ('inc/mnu/principale.php'); ?> <!-- Box News --> <? include ('inc/sez/home/news.php'); ?> </div> </body> </html>
home_news.js
$(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Set width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position){ // Hide left arrow if position is first slide if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } });
news.php
<div id="news"> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <h2>Web Development Tutorial</h2> <p>Paragrafo 1</p> </div> <div class="slide"> <h2>Web Development Tutorial</h2> <p>Paragrafo 2</p> </div> </div> </div> </div>
Qualcuno sa spiegarmi dove sbaglio?