un widget avec jquery

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu un widget avec jquery

Message par vmcf Mer 24 Nov 2010 - 15:58

Bonjour , pour les fêtes de fin d'années je souhiterais mettre le code ( outrageusement pompé Siffleur ) de cette page dans un widget central du portail ( en redimenssionnant bien sur ) mais j'ai une erreur js car le "$" est systématiquement remplacé par & # 36;

une idée ?

pour le code de la page ( click droit etc etc )






Dernière édition par vmcf le Ven 26 Nov 2010 - 10:10, édité 1 fois
vmcf

vmcf
**

Masculin
Messages : 76
Inscrit(e) le : 29/01/2010

http://vmcf.forumactif.com
vmcf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par Adam_sfp Mer 24 Nov 2010 - 19:20

Bonjour

Ah ben tiens cette animation me dit quelque chose ..
Apparemment avant vous elle à été " outrageusement pompée "ICI Tssss

Vous avez au moins la bienveillance de venir demander et d'annoncer la couleur Wink

A moins que ce ne soit vous même qui avez pompée quelques éléments de cette page vu votre pseudo et l'adresse du forum concerné...
Si c'est le cas je suis plutôt du style à partager et en faire profiter la communauté Forumactif..
la moindre des choses aurait été de demander....



le code HTML à placer dans une page HTML

Code:
<!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" xml:lang="eng" lang="eng">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Spritely 0.3 Examples</title>
   <meta name="keywords" content="" />
   <meta name="generator" content="ArchimedesCMS from Artlogic - http://www.artlogic.net/" />
   <meta name="viewport" content="width = 320" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   

   
   <style type="text/css">
      * {
         margin: 0;
         padding: 0;
      }
      #container  {
         min-width:900px;
         padding-top:359px;
         position:relative;
         width:100%;
      }


      #logo {
         background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/Happy.png) 0 0 no-repeat;
         width: 350px;
         height: 230px;
         position: absolute;
         top: 7px;
         left: 10px;
         z-index: 1900;
         text-indent: -9999px;
      }

      #cont {
                  display: block;
                 height: 300px;
            width: 550px;
              position: absolute;
              left: 50%;
            top:130px;
            z-index: 1000;
      }
   
      #stage {
         top: 0px;
         left: 0px;
         z-index: 100;
      }
      .stage {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         min-width: 900px;
         height: 359px;
         overflow: hidden;
      }
      #bg {
         background: #aedfe5 url(http://sd-1.archive-host.com/membres/up/37821634957680146/sky1.png) 0 0 repeat-x;
      }
      #clouds {
         background: transparent url(http://sd-1.archive-host.com/membres/up/37821634957680146/clou.png) 305px 102px repeat-x;
      }
      #hill2 {
         background: transparent url(http://sd-1.archive-host.com/membres/up/37821634957680146/hill2.png) 0 258px repeat-x;
      }
      #hill1 {
         background: transparent url(http://sd-1.archive-host.com/membres/up/37821634957680146/hill-with-windmill.png) 0 104px repeat-x;
      }
      #bird {
         background: transparent url(http://sd-1.archive-host.com/membres/up/37821634957680146/bird-forward-back9.png) 0 0 no-repeat;
         position: absolute;
         top: 150px;
         left: 65px;
         width: 180px;
         height: 123px;
         z-index: 2000;
         cursor: pointer;
      }
   </style>
   
   <!-- IE6 fixes are found in styles/ie6.css -->
   <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="styles/ie6.css" /><![endif]-->
   
   <script src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-132min.js" type="text/javascript"></script>
   <script src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-ui-172spritelycustommin.js"></script>
   <script src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryspritely-03b.js" type="text/javascript"></script>
   <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/swfobject.js"></script>
   <script type="text/javascript">

      (function($) {
         $(document).ready(function() {
            $('#logo').click(function() {
               document.location.href = 'http://www.spritely.net/';
            });
         
            $('#bird')
               .sprite({fps: 9, no_of_frames: 3})
               .spRandom({top: 50, bottom: 200, left: 300, right: 320})
               .isDraggable()
               .activeOnClick()
               .active();
            $('#clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10});
            $('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
            $('#hill1').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
            $('#hill1, #hill2, #clouds').spRelSpeed(8);
            
            window.actions = {
               fly_slowly_forwards: function() {
                  $('#bird')
                     .fps(10)
                     .spState(1);
                  $('#hill1, #hill2, #clouds')
                     .spRelSpeed(10)
                     .spChangeDir('left');
               },
               fly_slowly_backwards: function() {
                  $('#bird')
                     .fps(10)
                     .spState(2);
                  $('#hill1, #hill2, #clouds')
                     .spRelSpeed(10)
                     .spChangeDir('right');
               },
               fly_quickly_forwards: function() {
                  $('#bird')
                     .fps(20)
                     .spState(1);
                  $('#hill1, #hill2, #clouds')
                     .spRelSpeed(30)
                     .spChangeDir('left');
               },
               fly_quickly_backwards: function() {
                  $('#bird')
                     .fps(20)
                     .spState(2);
                  $('#hill1, #hill2, #clouds')
                     .spRelSpeed(30)
                     .spChangeDir('right');
               },
               fly_like_lightning_forwards: function() {
                  $('#bird')
                     .fps(25)
                     .spState(1);
                  $('#hill1, #hill2, #clouds')
                     .spSpeed(40)
                     .spChangeDir('left');
               },
               fly_like_lightning_backwards: function() {
                  $('#bird')
                     .fps(25)
                     .spState(2);
                  $('#hill1, #hill2, #clouds')
                     .spSpeed(40)
                     .spChangeDir('right');
               }
            };
            
            window.page = {
               hide_panels: function() {
                  $('.panel').hide(300);
               },
               show_panel: function(el_id) {
                  this.hide_panels();
                  $(el_id).show(300);
               }
            }
            
         });
      })(jQuery);
   
   </script>
</head>
<body>
<div id="container">
   <div id="stage" class="stage">
      <div id="tap" class="stage"></div>
      <div id="bg" class="stage"></div>
      <div id="clouds" class="stage"></div>
      <div id="hill2" class="stage"></div>
      <div id="hill1" class="stage"></div>
      <div id="logo">Spritely</div>
   </div>
   <div id="bird"></div>
   <div id="flashcontent">
      <strong>You need to upgrade your Flash Player</strong>
       <code>noscript</code>
      tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
   

<script type="text/javascript">
      // <![CDATA[
      
      var so = new SWFObject("http://sd-1.archive-host.com/membres/up/37821634957680146/train.swf", "cont", "550", "300", "9", "");
      so.addParam("quality", "high");
        so.addParam("wmode", "transparent");
      so.write("flashcontent");
      
      // ]]>
   </script>
   

</body>
</html>

Vous pouvez remplacer le logo et sa position par une image de votre choix modifiez à ce moment dans la partie CSS


Code:
#logo {
         background: url(http://sd-1.archive-host.com/membres/up/37821634957680146/Happy.png) 0 0 no-repeat;
         width: 350px;
         height: 230px;
         position: absolute;
         top: 7px;
         left: 10px;
         z-index: 1900;
         text-indent: -9999px;
      }

Vous pouvez ensuite l'insérer en iframe

Code:
<iframe src=adresse de la page html width=100% height=400 frameborder=0 border=0 marginwidth=0 marginheight=0 scrolling=no></iframe>

En mettant l'adresse de votre page et en changeant la taille si besoin..

Cordialement.

*Source Spritely
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par vmcf Jeu 25 Nov 2010 - 9:48


Bonjour,

Toutes mes excuses pour l'emprunt du code de votre page , à partir du moment ou il était a dispo sur https://forum.forumactif.com/annonces-mises-a-jour-f1/astuce-forumactif-effet-tournepage-t284540.htm

je pensais que les membres de forum actif pouvaient l'utiliser.

je vais de ce pas retirer la page qui pose problème.

et je vous réitère mes excuses
vmcf

vmcf
**

Masculin
Messages : 76
Inscrit(e) le : 29/01/2010

http://vmcf.forumactif.com
vmcf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par Adam_sfp Jeu 25 Nov 2010 - 9:58

Bonjour

Vous pouvez l'utiliser sans problèmes maintenant qu'il est mis à disposition et y apporter les modifications que vous voulez... Wink
Essayez de demander la prochaine fois... santa

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par vmcf Jeu 25 Nov 2010 - 10:01

Un grand Merci ! santa
vmcf

vmcf
**

Masculin
Messages : 76
Inscrit(e) le : 29/01/2010

http://vmcf.forumactif.com
vmcf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par Adam_sfp Jeu 25 Nov 2010 - 21:13

un widget avec jquery  Check10Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur un widget avec jquery  Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton un widget avec jquery  50378

A bientôt sur ForumActif Smile
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum