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

Zettabytes* · 09/22/2012, 17:54

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

©ross · 09/23/2012, 00:59

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

Zettabytes* · 09/23/2012, 01:07

Quote:

Originally Posted by ©ross

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>

©ross · 09/23/2012, 01:52

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');

boxxiebabee · 09/23/2012, 13:08

Ich hab sowas vor nicht alt zu langer Zeit hier mal veröffentlicht als JQuery Plugin.
Siehe:

Achja, habs mir jetzt nicht genauer angesehen, aber die überprüfen sollte so aussehen:

Code:

if($("#ladebalken").width()==300)

Zettabytes* · 09/23/2012, 13:34

Quote:
Originally Posted by boxxiebabee
Ich hab sowas vor nicht alt zu langer Zeit hier mal veröffentlicht als JQuery Plugin.
Siehe:

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.

boxxiebabee · 09/23/2012, 21:34

Quote:

Originally Posted by Zettabytes*

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.

Zettabytes* · 09/23/2012, 22:43

Quote:

Originally Posted by boxxiebabee

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.

boxxiebabee · 09/24/2012, 02:38

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.

Zettabytes* · 09/24/2012, 08:59

Nein kann ich nicht. Nichtmal ansatzsweise. xD

boxxiebabee · 09/24/2012, 14:38

Dann lern erstmal Javascript.. :>

Muddy Waters · 09/24/2012, 17:08

Ich würde dir auch raten, erstmal JS zu lernen, eine schöne Einführung findest du z.B.

.

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):