Forum : Lier un JS avec Cakephp

Salut,

Regarde le script généré pour less et js dans le haut de l'HTML. Rien à voir avec ce que tu as mis en bas, en fait js/NOMJS, c'est pas suffisant.
Le mieux c'est que tu utilises $this->Html->script();

A+

gilles40

Auteur

salut Extrarox,

merci de m'aider, j'ai mis ce code là mais toujours rien

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title><?php echo $title_for_layout; ?></title>
   <link rel="stylesheet/less" href="<?php echo $this->Html->url('/css/bootstrap.less'); ?>">
    <!--<link rel="stylesheet" href="<?php echo $this->Html->url('/css/style.css'); ?>">-->
    <link rel="alternate" type="application/rss+xml" title="Mon blog" href="<?php echo $this->Html->url(array('controller'=>'posts','action'=>'feed','ext'=>'rss')); ?>">
    <?php echo $this->Html->script('less'); ?>
    <?php echo $this->Html->script('js'); ?>
    <?php echo $this->Html->script("jquery.spasticNav.js"); ?>
    <?php echo $scripts_for_layout; ?>
    </head> 
      <body>       
        <div id="container">
            <div class="topbar">
            <!--nocache-->
                <?php echo $this->element('menu',array(),array('cache'=>false)); ?>
            <!--/nocache-->
            </div>
            <div class="container">
                <!--nocache-->
                <?php echo $this->Session->flash(); ?>
                <!--/nocache-->
                <br />
                <?php echo $content_for_layout; ?>
            </div> 
                     <?php echo $this->element('sql_dump'); ?>

        </div>

          <script type="text/javascript" src=<?php echo $this->Html->script("jquery.spasticNav.js") ; ?></script>
      </body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src=<?php echo $this->Html->script("jquery.nivo.slider.pack.js") ; ?></script>
</html>

extrarox

En fait il faut juste mettre :

<?php echo $this->Html->script("jquery.spasticNav") ; ?>

Il en faut pas plus et il ne faut pas mettre l'extension, il le met tout seul.

gilles40

Auteur

merci extrarox
j ai fait comme tu me dit mais c est pareil

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title><?php echo $title_for_layout; ?></title>
   <link rel="stylesheet/less" href="<?php echo $this->Html->url('/css/bootstrap.less'); ?>">
    <!--<link rel="stylesheet" href="<?php echo $this->Html->url('/css/style.css'); ?>">-->
    <link rel="alternate" type="application/rss+xml" title="Mon blog" href="<?php echo $this->Html->url(array('controller'=>'posts','action'=>'feed','ext'=>'rss')); ?>">
    <?php echo $this->Html->script('less'); ?>
    <?php echo $scripts_for_layout; ?>
    </head> 
      <body>       
        <div id="container">
            <div class="topbar">
            <!--nocache-->
                <?php echo $this->element('menu',array(),array('cache'=>false)); ?>
            <!--/nocache-->
            </div>
            <div class="container">
                <!--nocache-->
                <?php echo $this->Session->flash(); ?>
                <!--/nocache-->
                <br />
                <?php echo $content_for_layout; ?>
            </div> 
                     <?php echo $this->element('sql_dump'); ?>

        </div>
           <?php echo $this->Html->script("spasticNav"); ?>
    <?php echo $this->Html->script("nivo.slider.pack") ; ?>

      </body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</html>

Gilles

extrarox

Pourquoi tu as enlever "jquery." aux noms? Tu as changé leur nom?

gilles40

Auteur

oui j ai changé leurs nom dans le repertoire js mais toujours le meme soucis

Gilles

extrarox

Essaye de les mettre après les scripts jquery en bas de ta page.

gilles40

Auteur

c est juste ce que je viens de faire mais tjrs pareil

extrarox

Tu peux vérifier si le HTML qui sort de ces fonctions amène bien au répertoire qu'il faut?

Sinon regarde dans la console si tu as une erreur.

gilles40

Auteur

ok je jette un oeil demain merci je te tiens au courant
Gilles

gilles40

Auteur

Bonsoir,
Voila mes test de la journée, le jquery se charge bien car lorsque je fait une "alert" dans un fichier "main.js" je vois bien apparaitre le alert.
maintenant est-ce que je peux mettre plusieurs fonction dans le fichier "main.js"?
et y a t'il des chose a modifier avant de copier le tout dans le fichier "main.js?

(function($) {
    $.fn.spasticNav = function(options) {

        options = $.extend({
            overlap : 20,
            speed : 500,
            reset : 1500,
            color : '#0b2b61',
            easing : 'easeOutExpo'
        }, options);

        return this.each(function() {

            var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;

            $('<li id="blob"></li>').css({
                width : currentPageItem.outerWidth(),
                height : currentPageItem.outerHeight() + options.overlap,
                left : currentPageItem.position().left,
                top : currentPageItem.position().top - options.overlap / 2,
                backgroundColor : options.color
            }).appendTo(this);

            blob = $('#blob', nav);

            $('li:not(#blob)', nav).hover(function() {
                // mouse over
                clearTimeout(reset);
                blob.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
            }, function() {
                // mouse out    
                reset = setTimeout(function() {
                    blob.animate({
                        width : currentPageItem.outerWidth(),
                        left : currentPageItem.position().left
                    }, options.speed)
                }, options.reset);

            });

        }); // end each

    };
})(jQuery);

et il y a aussi ce petit script en plus:

<script type="text/javascript">
    $('#nav').spasticNav();
</script>

pour etre complet je vous joint l'index html avec lequel cela fonctionne

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Ensemble Vocal l'Odyssée</title>
    <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
    <ul id="nav">
        <li id="selected"><a href="index.html">Accueil</a></li>
        <li><a href="about.html">Notre histoire</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Livre d'or</a></li>
        <!--<li><a href="#"></a></li>-->
        <li><a href="#">Espace Membres</a></li>
    </ul>
       <div class="name"><p>Ensemble Vocal l'Odyssée</p></div>
        <div class="top-image"></div>
         <div id="defilement" style="font-weight: bold; color: #fff; width: 70%; height:22px; margin-top: -21px; margin-left: 137px;"><span>En 2012 l'Odyssée fête ses 10 ans... le 14 Janvier 2012 concert à l'espace culturel de Hinx à partir de 20h30</span></div>
         <div class="content">
                    <div class="container">
                        <div class="article">
                            <div class="titre"><h1>Bienvenue sur le site de l'Odyssée</h1></div>
                                <div class="contenu">
                                <p>Chœur mixte d'une trentaine de personnes, sous la direction d'<a href="effix.html">Effix Huvet</a>, musicien professionnel, chanteur et arrangeur.</p>
                                <p>Chants polyphoniques et polyrythmiques sur des arrangements originaux.</p>
                                    <p>Répertoire très large, alliant chants sacrés et traditionnels, chansons françaises et étrangères,</p><p>oeuvres classiques, créations.</p>
                                    <p>Les choristes chantent sans partitions et sans direction, les chants et les présentations sont mis en</p><p>scène.</p>
                                    <p>L'Odyssée se produit en concerts et anime aussi messes et messes de mariage.</p>
                                </div>
                        </div>
                        <div class="article">
                            <div class="slider-wrapper theme-default">
                                <div class="ribbon"></div>
                                <div id="slider" class="nivoSlider">
                                    <img src="images/dax.jpg" alt="" />
                                    <img src="images/atrium.jpg" alt="" />
                                    <img src="images/montfort1.jpg" alt="" />
                                    <img src="images/montfort9.jpg" alt="" />
                                    <img src="images/avril-2010.jpg" alt="" />
                                </div>
                            </div>
                        </div>
                     </div>  

                        <div class="sidebar">
                        <div class="titre-sidebar"><h2>Rubriques</h2></div>
                        <ul class="nav-secondary">
                        <li><a href="audio.html">Extrait Audio</a></li>
                        <li><a href="#">Extrait Vidéo</a></li>
                        <li><a href="albums.html">Photos</a></li>
                        <li><a href="#">test</a></li>
                        </ul>
                        <br />
                        <div class="titre-sidebar"><h2>Rubriques</h2></div>
                        <ul class="nav-secondary">
                        <li><a href="#">Extrait Audio</a></li>
                        <li><a href="#">Extrait Vidéo</a></li>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">test</a></li>
                        </ul>
                        <br />
                        <div class="titre-sidebar"><h2>Rubriques</h2></div>
                        <ul class="nav-secondary">
                        <li><a href="#">Extrait Audio</a></li>
                        <li><a href="#">Extrait Vidéo</a></li>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">test</a></li>
                        </ul>
                        </div>

                        </div>
                        <div class="cb"></div>
</div>
<div class="footer">
<div class="footer-nav">
    <div class="col31">
   <div class="footer-titre"><h3>Derniers commentaires</h3></div>
    <div class="comments">
        <div class="comments-bulle"></div>
        <div class="comments-pseudo"><h4>Cécile</h4></div>
        <div class="comments-content"><h4>Super concert ce week end à Hinx...</h4></div>
    </div>
    <div class="comments">
        <div class="comments-bulle"></div>
        <div class="comments-pseudo"><h4>Gilles</h4></div>
        <div class="comments-content"><h4>Super le nouveau site du groupe vocal l'Odyssée...</h4></div>
    </div> 

    </div>
    <div class="col32">
            <div class="footer-titre"><h3>Prochains concerts</h3></div>
    <div class="comments">
        <div class="comments-pseudo"><h4>14 Janvier 2012 à 20h30</h4></div>
        <div class="comments-content"><h4>Concert de l'Odyssée à l'Espace Culturel de Hinx...</h4></div>
    </div>
    <div class="comments">
        <div class="comments-pseudo"><h4>15 Janvier 2012 à 16h30</h4></div>
        <div class="comments-content"><h4>Concert de l'Odyssée à Candresse...</h4></div>
    </div>
    </div>
    <div class="col33">
                <div class="footer-titre"><h3>Engagez l'Odyssée</h3></div>
                <br />
        <div class="comments">

        <div class="comments-content"><h4>Vous pouvez engager l'Odyssée pour vos messes, messe de mariage, soirées...</h4></div>
        <div class="comments-pseudo"><h4>Nous contacter:</h4></div>
        <div class="comments-content"><h4>Tel: 05 58 .. .. .. <br />E-mail: xxxxxxxxxx.yyyyyyyy@free.fr</h4></div>

    </div>
    </div>
    <div class="copyright"><h5>Groupe vocal l'Odyssée - 2012</h5></div>
</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<!--.<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>-->
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript" language="javascript" >
                jQuery(document).ready(function() {
                jQuery('#slider').nivoSlider({
                /* direction : 'alternate', // left, right, alternate, random */
                effect:'random', //Specify sets like: 'fold,fade,sliceDown'
                slices:15,
                animSpeed:500,
                pauseTime:5000,
                startSlide:0, //Set starting Slide (0 index)
                directionNav:false, //Next and Prev
                directionNavHide:true, //Only show on hover
                controlNav:true, //1,2,3...
                controlNavThumbs:false, //Use thumbnails for Control Nav
                controlNavThumbsFromRel:false, //Use image rel for thumbs
                controlNavThumbsSearch: '.jpg', //Replace this with...
                controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                keyboardNav:true, //Use left and right arrows
                pauseOnHover:true, //Stop animation while hovering
                manualAdvance:false, //Force manual transitions
                captionOpacity:1, //Universal caption opacity
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){} //Triggers after all slides have been shown
                    });
                });
    </script>
<script type="text/javascript">
    $('#nav').spasticNav();
</script>
 <script type="text/javascript">
  var id = "defilement"; // id du div conteneur
  var vitesse = 70; // en ms
  var pas = 2; // en px

  var div, sp;
  window.onload=function() {
    div = document.getElementById(id);
    sp = div.getElementsByTagName("span")[0];

    div.style.position = "relative";
    div.style.height = sp.offsetHeight;
    div.style.overflow = "hidden";
    div.style.whiteSpace = "nowrap";
    sp.style.position = "absolute";
    sp.style.left = div.offsetWidth+"px";
    setTimeout(defile,vitesse);
  };

  function defile() {
    sp.style.left = (parseInt(sp.style.left,10) - pas)+"px";
    if(parseInt(sp.style.left,10)+sp.offsetWidth < 0) {
      sp.style.left = div.offsetWidth+"px";
    }
    setTimeout(defile,vitesse);
  }
</script>
</body>
</html>

j ai essayer de retourner le truc dans tout les sens mais là je suis bloqué.

merci pour votre aide

Gilles

XciD

Tu peux tout regrouper dans le meme fichier main.js
Regarde avec chrome (inspection d’élément) pour voir si tu as bien un retour sur les scripts chargés

Lier un JS avec Cakephp

12 réponses