un widget avec jquery

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

Résolu un widget avec jquery

Message par vmcf le 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
**

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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par vmcf le 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 http://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
**

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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: un widget avec jquery

Message par vmcf le Jeu 25 Nov 2010 - 10:01

Un grand Merci ! santa

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 le Jeu 25 Nov 2010 - 21:13

Bonjour,

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


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
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


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