jQuery Problem?!

Zettabytes* · 09/08/2012, 13:12

Hallo,

also ich möchte nun ein bisschen jQuery ausprobieren.
Mit Firebug funktioniert alles hervorragend. Nun möchte ich das
in eine .js Datei schreiben. Bloss es wird nicht ausgeführt.

Erstmal habe ich jQuery richtig eingebunden:

Code:

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

Und die .js Datei habe ich folgend eingefügt:

Code:

    <script type="text/javascript" src="js/js-test.js"></script>

Das sollte alles richtig sein. Wenn ich mit Firebug die .js Datei suche finde ich es auch
sowie den Inhalt.

Mein .js Code ist folgender:

Code:

$('#box1').click(function(){
   $('#box1').css('background-color','black');
});

Wenn ich auf die Box klicke, soll die Box Schwarz werden.
In FireBug funktioniert das auch, nur wenn ich das in der Datei
haben möchte funktioniert das nicht.

Zur Information ich Arbeite Localhost und auf Ubuntu 12.04, mit Lampp.

PHP DOKUMENT:

Code:

<!DOCTYPE html>
    <head>
        <title></title>
        <link href="css/css.css" type="text/css" rel="stylesheet" />
        <link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="js/js-test.js"></script>
        
        
        
        
    </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    <div id="header">
                        <p id="headerschrift">YourSite</p>
                        <div id="nav">
                            <ul class="ula">
                                <a href="#"><li class="clearfloat">Home</li></a>
                                <a href="#"><li class="clearfloat">Firma</li></a>
                                <a href="#"><li class="clearfloat">Kunden</li></a>
                                <a href="#"><li class="clearfloat">Links</li></a>
                            </ul>
                        </div>
                    </div>
                    <div id="inside">
        
                            
                            
                            <div id="box1">Klick mich</div>
                            
                                
                            
                </div>
            </div>
            <div id="footer">Copyright 2012 | Kevin D. </div>
        </body>


</html>

CSS DOKUMENT:

Code:

/* v1.0 | 20080212 */
 
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    
    /* tables still need cellspacing=0 in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
/*--------------------------------------------------------*/
/*-----------CSS STYLE ZURUECK SETZEN --------------------*/
/*--------------------------------------------------------*/


/*<-<-<-<-<-<-<-START->->->->->->*/


/*Background*/
body{
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;

}


#content{
    height: 100%;
    width: 1000px;
    border: 1px solid black;
    background-color: white;
    opacity: 40%;
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 0px 0px 5px black;
    margin-top: 20px;
}

#footer{
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
}

#header{
    background-image: url(img/header.jpg);
    height: 100px;
    width: 1000px;
    border-radius:9px 9px  0 0 ;
    opacity: 90%;
}

#headerschrift{
    text-align: center;
    font-size: 70px;
    line-height: 80px;
    font-family: 'Dr Sugiyama', cursive;
}

.clearfloat{
    float:left;
    margin-left: 70px;
    text-align: center;
    margin-top: 12px;
}

ul{
     width: 500px;
     margin: 0 auto;
    
}

#nav{
    width: 1000px;
    height: 40px;
    background: #b8e1fc; /* Old browsers */
    background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
    position: absolute;
    font-family: 'Princess Sofia', cursive;
    font-size: 20px;
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    text-shadow:0px 0px 3px black;
}

#inside{
      height: 100%;
      margin: 60px auto 60px;
      width: 90%;

}

#box1{
    position:absolute;
    left:20px;
    top:20px;
    height:50px;
    width:50px;
    background-color:green;
  
}

JAVASCRIPT DOKUMENT

Code:

$('#box1').click(function(){
   $('#box1').css('background-color','black');
});

Vielen Dank!

flickz. · 09/08/2012, 13:23

So müsste es gehen:

Code:

$(document).ready(function() {
	$("#box1").click(function() {
		$("#box1").css({"background-color" : "#000000"});
	});
});

Du musst Farbcodes benutzen, also statt "black" musst du "#000000" nehmen.
Und es fehlt document.ready in deinem Script.^^

//Edit: Okay mit black gehts doch, aber es fehlte halt document.ready^^

Zettabytes* · 09/08/2012, 13:26

Woah, vielen Dank. Doch so Simple

Also verstehe ich es richtig, ohne document.ready funktioniert das nicht?
Liegt das dadran das es dann nur funktioniert wenn die Seite fertig geladen ist?

Vielen Vielen Dank!

Muddy Waters · 09/08/2012, 16:03

Man kann das ganze übrigens auch noch kürzer schreiben, nämlich so:

Code:

$(function() {
	$("#box1").click(function() {
		$("#box1").css({"background-color" : "#000000"});
	});
});

Denn wenn man die jQuery Funktion aufruft und nur eine Funktion übergibt, wird diese als callback handler für das document.ready Event interpretiert und entsprechend zugewiesen. Zugegeben, macht wenig aus, ist aber trotzdem eine feine Sache.

boxxiebabee · 09/08/2012, 23:07

Quote:
Originally Posted by Muddy Waters
Man kann das ganze übrigens auch noch kürzer schreiben, nämlich so:
Code:
$(function() {
	$("#box1").click(function() {
		$("#box1").css({"background-color" : "#000000"});
	});
});
Denn wenn man die jQuery Funktion aufruft und nur eine Funktion übergibt, wird diese als callback handler für das document.ready Event interpretiert und entsprechend zugewiesen. Zugegeben, macht wenig aus, ist aber trotzdem eine feine Sache.

Sollte eher so aussehen:

Code:

$(function() {
	$("#box1").click(function() {
		$(this).css({"background-color" : "#000000"});
	});
});

Dann muss er nicht nochmal das ganze DOM nach dem durchsuchen.