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:
Und die .js Datei habe ich folgend eingefügt:
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:
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:
Alles anzeigen
CSS DOKUMENT:
Alles anzeigen
JAVASCRIPT DOKUMENT
Vielen Dank!
ERLEDIGT!!!!
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:
Und die .js Datei habe ich folgend eingefügt:
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:
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:
Quellcode
- <!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:
Brainfuck-Quellcode
- /* 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
Vielen Dank!
ERLEDIGT!!!!
$(document).ready(function() { $("#box1").click(function() { $("#box1").css({"background-color" : "#000000"}); }); });