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

09/22/2012 17:54 Zettabytes*#1
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 Code:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    </head>
        <body>

            <div id="loaderbg">
                <div id="balken">
                    <div id="ladebalken"></div>
                    <script language="javascript" type="text/javascript">
                    if($("#ladebalken").attr({"width":"100px"},2000)){
                        $(location).attr('href','home.html');
                    };
                    $(document).ready(function(){
                    $("#ladebalken").animate({
                    width:'300px'
                    },10000);
                    });





                    </script>
                </div>
            </div>


        </body>
</html> 
Dort ist der jQuery Code auch drin.

CSS:
PHP Code:
body {
    background: url(img/background-intro.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

#loaderbg{
    background-color: white;
    height: 150px;
    left: 50%;
    margin: -75px auto 0 -200px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 400px;
    border-radius:15px;
    box-shadow:2px 13px 3px black;
    }

#balken{
    height: 25px;
    width: 300px;
    background-color: white;
    position: absolute;
    margin-top: -12.5px;
    top: 50%;
    margin-left: -150px;
    left:50%;
    border-radius:10px;
    border:1px solid black;
    box-shadow:0 0 3px black;
}

#ladebalken{
    background-image: url(img/ladebalken.jpg);
    height:25px;
    width: 0px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -150px;
    margin-top: -12.5px;
    border-radius:10px;
} 
#ladebalken ist das was überprüft werden soll...

Irgendwas will nicht, ... ?!
Ich bekomm es einfach nicht hin mit dem vergleich in jQUery
09/23/2012 00:59 ©ross#2
Wurde JS nicht immer im Header eingetragen?

Ändere es dochmal so ab das es so ausschaut:
PHP Code:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
         <script language="javascript" type="text/javascript">
                  if($("#ladebalken").attr({"width":"100px"},2000)){
                      $(location).attr('href','home.html');
                  };
                  $(document).ready(function(){
                  $("#ladebalken").animate({
                  width:'300px'
                   },10000);
                  });
          </script>
    </head>
        <body>

            <div id="loaderbg">
                <div id="balken">
                    <div id="ladebalken"></div>

                </div>
            </div>


        </body>
</html> 
Man könnte auch hergehn und das JS in einer Seperaten Datei (zb ladebalken.js) speichern und dann includen :)

bin zwar nicht so fit in sachen JS aber das sollte afaik richtig sein, wenn nicht bitte nicht schlagen *duck*
mfg
09/23/2012 01:07 Zettabytes*#3
Quote:
Originally Posted by ©ross View Post
Wurde JS nicht immer im Header eingetragen?

Ändere es dochmal so ab das es so ausschaut:
PHP Code:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
         <script language="javascript" type="text/javascript">
                  if($("#ladebalken").attr({"width":"100px"},2000)){
                      $(location).attr('href','home.html');
                  };
                  $(document).ready(function(){
                  $("#ladebalken").animate({
                  width:'300px'
                   },10000);
                  });
          </script>
    </head>
        <body>

            <div id="loaderbg">
                <div id="balken">
                    <div id="ladebalken"></div>

                </div>
            </div>


        </body>
</html> 
Man könnte auch hergehn und das JS in einer Seperaten Datei (zb ladebalken.js) speichern und dann includen :)

bin zwar nicht so fit in sachen JS aber das sollte afaik richtig sein, wenn nicht bitte nicht schlagen *duck*
mfg
Ist schon richtig, das mit dem einbinden weis ich, wollte aber nur zu Testzwecken das machen. Ausserdem funtkioniert die Animation auch, nur das es wenn es auf Max. 300px ist es nicht weiterleitet....

PHP Code:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    </head>
        <body>

            <div id="loaderbg">
                <div id="balken">
                    <div id="ladebalken"></div>
                    <script language="javascript" type="text/javascript">

                    $(document).ready(function(){
                    $("#ladebalken").animate({
                    width:'300px'
                    },10000);

                     if($("#ladebalken").attr({"width":}=={"300"},2000)){
                        $(location).attr('href','home.html');
                    };
                    });





                    </script>
                </div>
            </div>


        </body>
</html> 
09/23/2012 01:52 ©ross#4
chromium sagt
Code:
Uncaught SyntaxError: Unexpected token }
und das zwischen

PHP Code:
if($("#ladebalken").attr({"width":}=={"300"},2000)){ 
und
PHP Code:
                        $(location).attr('href','home.html'); 
09/23/2012 13:08 boxxiebabee#5
Ich hab sowas vor nicht alt zu langer Zeit hier mal veröffentlicht als JQuery Plugin.
Siehe: [Only registered and activated users can see links. Click Here To Register...]

Achja, habs mir jetzt nicht genauer angesehen, aber die überprüfen sollte so aussehen:
Code:
if($("#ladebalken").width()==300)
09/23/2012 13:34 Zettabytes*#6
Quote:
Originally Posted by boxxiebabee View Post
Ich hab sowas vor nicht alt zu langer Zeit hier mal veröffentlicht als JQuery Plugin.
Siehe: [Only registered and activated users can see links. Click Here To Register...]

Achja, habs mir jetzt nicht genauer angesehen, aber die überprüfen sollte so aussehen:
Code:
if($("#ladebalken").width()==300)
Hey,

danke, aber momentan möchte ich aus Lernzwecke ganz einfach dinge wie diese selbst realisieren ohne ein Plugin.

Ich werde es versuchen. ;)
09/23/2012 21:34 boxxiebabee#7
Quote:
Originally Posted by Zettabytes* View Post
Hey,

danke, aber momentan möchte ich aus Lernzwecke ganz einfach dinge wie diese selbst realisieren ohne ein Plugin.

Ich werde es versuchen. ;)
Und die überprüfung sollte immer nur dann statt finden wenn sich die Weite von der Progressbar ändert, sonst hat es keinen Sinn.
09/23/2012 22:43 Zettabytes*#8
Quote:
Originally Posted by boxxiebabee View Post
Und die überprüfung sollte immer nur dann statt finden wenn sich die Weite von der Progressbar ändert, sonst hat es keinen Sinn.
Tut es sich ja, es geht von 0px auf 300px, wenn die 300px erreicht sind, sollte eine Umleitung auf eine andere Seite erzeugt werden. Leider blicke ich bei jQuery nicht wie das mit dem IF und die Syntax funktioniert, habe versucht das nachzulesen, leider versteh ich immer nicht was die da erzählen.
09/24/2012 02:38 boxxiebabee#9
Kannst du denn schon überhaupt normales Javascript? Das solltest auf jeden Fall schon vorher können, zumindest mal die grundlegendsten Sachen bevor du dich an ein Framework ranmachst.
09/24/2012 08:59 Zettabytes*#10
Nein kann ich nicht. Nichtmal ansatzsweise. xD
09/24/2012 14:38 boxxiebabee#11
Dann lern erstmal Javascript.. :>
09/24/2012 17:08 Muddy Waters#12
Ich würde dir auch raten, erstmal JS zu lernen, eine schöne Einführung findest du z.B. [Only registered and activated users can see links. Click Here To Register...].

Dein Beispiel funktioniert so schon fast, man merkt aber an einigen Stellen durchaus, dass du scheinbar mit zwei verbundenen Augen an die Sache herangehst oder zumindest mal keine Ahnung hast, was du eigentlich machst. So wie ich deine Problemstellung verstanden habe brauchst du jedenfalls keine Breite vergleichen. Du gibst bei der Animation schließlich schon den Endwert von 300px vor, es reicht also wenn du einen Callback Handler zuweist, also eine Funktion, die aufgerufen wird, sobald die Animation beendet ist.

Das sieht dann so aus (CSS habe ich minimal abgeändert, damit es auch ohne Bild klappt): [Only registered and activated users can see links. Click Here To Register...]