jQuery ... .attr(width) vergleichen ?`

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • jQuery ... .attr(width) vergleichen ?`

      Hallo,

      bin anfänger in jQuery. Möchte eine Progressbar machen, wenn width==300px hat soll es auf eine andere Seite laden.

      Mein HTML Code:

      PHP-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <link rel="stylesheet" type="text/css" href="css/style.css" />
      5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
      7. </head>
      8. <body>
      10. <div id="loaderbg">
      11. <div id="balken">
      12. <div id="ladebalken"></div>
      13. <script language="javascript" type="text/javascript">
      14. if($("#ladebalken").attr({"width":"100px"},2000)){
      15. $(location).attr('href','home.html');
      16. };
      17. $(document).ready(function(){
      18. $("#ladebalken").animate({
      19. width:'300px'
      20. },10000);
      21. });
      27. </script>
      28. </div>
      29. </div>
      32. </body>
      33. </html>
      Alles anzeigen


      Dort ist der jQuery Code auch drin.

      CSS:

      PHP-Quellcode

      1. body {
      2. background: url(img/background-intro.jpg) no-repeat center center fixed;
      3. -webkit-background-size: cover;
      4. -moz-background-size: cover;
      5. -o-background-size: cover;
      6. background-size: cover;
      7. }
      9. #loaderbg{
      10. background-color: white;
      11. height: 150px;
      12. left: 50%;
      13. margin: -75px auto 0 -200px;
      14. opacity: 0.5;
      15. position: absolute;
      16. top: 50%;
      17. width: 400px;
      18. border-radius:15px;
      19. box-shadow:2px 13px 3px black;
      20. }
      22. #balken{
      23. height: 25px;
      24. width: 300px;
      25. background-color: white;
      26. position: absolute;
      27. margin-top: -12.5px;
      28. top: 50%;
      29. margin-left: -150px;
      30. left:50%;
      31. border-radius:10px;
      32. border:1px solid black;
      33. box-shadow:0 0 3px black;
      34. }
      36. #ladebalken{
      37. background-image: url(img/ladebalken.jpg);
      38. height:25px;
      39. width: 0px;
      40. position: absolute;
      41. left:50%;
      42. top:50%;
      43. margin-left: -150px;
      44. margin-top: -12.5px;
      45. border-radius:10px;
      46. }
      Alles anzeigen


      #ladebalken ist das was überprüft werden soll...

      Irgendwas will nicht, ... ?!

      Ich bekomm es einfach nicht hin mit dem vergleich in jQUery

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Ist zwar nicht meine Art hier alles auf dem Silbertablett zu servieren. Aber heute ist Sonntag da mach ich eine Ausnahme.

      HTML-Quellcode

      1. <!DOCTYPE HTML>
      2. <html lang="en-US">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title></title>
      6. <!--<link rel="stylesheet" type="text/css" href="css/style.css" />-->
      7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
      8. </head>
      9. <body>
      10. <div id="loaderbg">
      11. <div id="balken">
      12. <div id="ladebalken" data-width="400" style="background: red; height: 25px;"></div>
      13. </div>
      14. </div>
      17. <script type="text/javascript">
      18. // Name des Div's
      19. var ladebalken = $('#ladebalken');
      22. // Standard Width auslesen
      23. var width = ladebalken.attr('data-width');
      26. // Div auf ein Minus Width setzten damit es sich richtig aufbauen kann
      27. ladebalken.css({'width' : '-1px'});
      30. // Div Animieren
      31. ladebalken.animate({
      32. 'width' : width+'px'
      33. }, 10000, function(){
      34. // Falls breite == Wert ist dann umleiten
      35. // Könnte man auch auf ein breite > Wert machen damit es immer geht auch wenn es breiter ist
      36. if(width == '400')
      37. {
      38. window.location.href = 'http://google.de';
      39. }
      40. });
      43. </script>
      46. </body>
      47. </html>
      Alles anzeigen


      Ich hoffe du kommst damit klar. Bei Fragen - jQuery: The Write Less, Do More, JavaScript Library :P