Registreren

    Informatie

    Het is heel gemakkelijk om lid te worden. Door je gegevens op te geven op de registratie pagina ontvang je automatisch een email met je inlog gegevens.

  • Registreer je hier

Aanmelden

    Informatie

    Omdat je niet aangemeld bent is het gebruikerspaneel niet beschikbaar. Vul hiernaast je gegevens in om gebruik te maken van het gebruikerspaneel.

Aanmeldformulier


Foutje met jquery

Alles over javascript.

Foutje met jquery

Berichtdoor Topdancer » 09 Feb 2010 14:12

Beste mede webmasters

Url: http://www.steven-solutions.nl/test/

op bovenstaande url vind je de website waar ik mee bezig ben.
De slider doet het zeer goed, alleen als je gaat kijken in FF dan zie je dat hij op een gegevend moment terug slide naar de eerste voorbeeld, in IE doet hij dit niet (je kunt dus zelf even testen).

jquery-1.3.2.js (code is te lang dus download als je wilt)
Code: Alles selecteren
http://www.steven-solutions.nl/test/js/jquery-1.3.2.js


http://www.steven-solutions.nl/test/js/xmlSlider.js (downloaden of de code hier onder bekijken)
Code: Alles selecteren
(function($){
   $.fn.xmlSlider = function(options) {
      var
        defaults = {xmlFile:'',
                   width:500,
                   height:375,
                   speed:3000,
                   timeout:5000,
                   toggleBtn:false,
                   navBtn:false,
                   play:'Play',
                   pause:'Pause',
                   backward:'Backward',
                   forward:'Forward',
                   imageFail:''
                   },
        settings = $.extend({}, defaults, options),
        $this = this;       
        //get XML
      $.ajax({
      type: "GET",
      url: settings.xmlFile,
      dataType: "xml",
      async : false,
      error: function(){
         if(typeof(console) !== 'undefined' && console != null)
            console.log("Error: XML file URL is not valid!");
      },
      success: function(xml){
         //append divs

         $this.append("<div id='xsBg'></div><div id='xsCaptions'><ul></ul></div>").find('ul');
         $this.append("<div id='xsImages'><ul></ul></div>").find('ul');   
           //retrive info
           var xsUrl,xsLink,xsTitle,xsDesc;
         $(xml).find('info').each(function(){
            xsUrl  =  $(this).find('img').text();
            xsLink  =  $(this).find('link').text();
            xsTitle  =  $(this).find('title').text();
            xsDesc =  $(this).find('desc').text();
            $("#xsImages ul").append("<li><a href='"+xsLink+"' target='_blank'><img src='"+xsUrl+"' alt='"+xsTitle+"' /></a></li>");
            $("#xsCaptions ul").append("<li><a href='"+xsLink+"' target='_blank'><h1>"+xsTitle+"</h1></a><p>"+xsDesc+"</p></li>");
         });
         //begin
         var xsCount = $(xml).find('info').size();
         if($(xml).find('info').size() > 0){
            //declare some vars & bind events
            var   calcImg = settings.width*(xsCount-1)*-1,
               calcInfoHeight = $('#xsCaptions').height(),
               calcInfo = calcInfoHeight*(xsCount-1)*-1,
               RE = /^\d*$/,
               mouseOut = true,
               play = true;   
            //mouse events
            $this.mouseover(function(){mouseOut = false;});
            $this.mouseout(function(){mouseOut = true;});
            //decalre toggle
            if(settings.toggleBtn){
               $this.append('<div id="xsToggle">'+settings.pause+'</div>');
               $('#xsToggle').click(function(){
                  if(play){
                     play = false;
                     $('#xsToggle').html(settings.play);
                  }else{
                     play = true;
                     $('#xsToggle').html(settings.pause);
                  }
               });
            }
            //decalre left and right mav
            if(settings.navBtn){
               $this.append('<div id="xsLeft">'+settings.backward+'</div><div id="xsRight">'+settings.forward+'</div>');
               $('#xsLeft').html(settings.backward).click(function(){
                  play = false;
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == 0 ) ? calcImg : "+="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == 0  ) ? calcInfo : "+="+calcInfoHeight }, settings.speed,function(){
                     play = true;
                  });
               });
               $('#xsRight').html(settings.forward).click(function(){
                  play = false;
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed,function(){
                     play = true;
                  });
               });
            }
            //dress them up

            $('#xsCaptions,#xsBg').css({'top':(settings.height-calcInfoHeight)});
               $('#xsCaptions li,#xsBg').css({'height':calcInfoHeight});
               $('#xsImages ul').css({'width': settings.width*xsCount});
            //Determine the speed
            if(!RE.test(settings.timeout))
               settings.timeout = 3000;
            //movment
            var slideTheme = function(){               
               if(mouseOut && play){            
                  $("#xsImages ul:not(:animated)").animate({'left': ($("#xsImages ul").position().left == calcImg ) ? 0 : "-="+settings.width }, settings.speed);
                  $("#xsCaptions ul:not(:animated)").animate({'top': ($("#xsCaptions ul").position().top   == calcInfo  ) ? 0 : "-="+calcInfoHeight }, settings.speed ,
                     function(){
                        setTimeout(slideTheme, settings.timeout);
                  });   
               }else
                  setTimeout(slideTheme, settings.timeout);
            };
            //just at the 1st time
            imgCount = 0;
            $("#xsImages img").load(function(){
              imgCount++;
              if (imgCount == xsCount)
                setTimeout(slideTheme, settings.timeout);
            }).error(function(){
               this.attr('src',settings.imageFail);
            });   
         }else
            if(typeof(console) !== 'undefined' && console != null)
               console.log("Error: XML file is not valid!");
      }
      });
   };
})(jQuery);


en in de index roep ik hem dus zo aan:
Code: Alles selecteren
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/xmlSlider.js" type="text/javascript"></script>


en in de <head> en </head> zet ik dit:
Code: Alles selecteren
<script type="text/javascript">
$(document).ready(function() {
   $("#slider").xmlSlider({'xmlFile':"sample.xml", 'width':890,'height':275 ,
                     'toggleBtn':false,
                     'navBtn':false,
                     'play':"<img src='images/play.png' alt='play'/>",
                     'pause':"<img src='images/pause.png' alt='pause'/>",
                     'backward':"<img src='images/backward.png' alt='backward'/>",
                     'forward':"<img src='images/forward.png' alt='forward'/>"
                    });
});
</script>


hij word dus in de div slider gezet.
Alles werkt verder ook met FF alleen in IE draait hij na het laatste plaatje dus niet terug naar begin, de tekst er onder wel maar de plaatjes niet.
Wie weet waar dit aan ligt?
Opzoek naar een programmeur die mij qua sponsoring wilt helpen :P Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Topdancer
Teamlid
 
Berichten: 331
Geregistreerd: 26 Aug 2008 01:11
Woonplaats: Arnhem

Re: Foutje met jquery

Berichtdoor Topdancer » 10 Feb 2010 22:10

Inmiddels opgelost door gewoon een ander slider te nemen.
Beetje raar gedoe, we hebben 1000 dingen geprobeerd en nog geen resultaat.

Linkjes werken dus ook niet meer.
Opzoek naar een programmeur die mij qua sponsoring wilt helpen :P Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Topdancer
Teamlid
 
Berichten: 331
Geregistreerd: 26 Aug 2008 01:11
Woonplaats: Arnhem

Re: Foutje met jquery

Berichtdoor Theo » 11 Feb 2010 10:08

Het is altijd frustrerend als een bestaand script niet zo werkt als je wilt.

De code is vaak ook te gecompliceerd om te kunnen zien waar het in zit. Elke scripter heeft zo zijn eigen werkwijze.
I rather feel pain than nothing at all
Theo
Oprichter
 
Berichten: 1792
Geregistreerd: 11 Jun 2005 17:43
Woonplaats: in_array()


Terug naar JS



Wie is er online?

Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast