✔ Cant find variable: $

D34DL1NES · 28. Juni 2009

Hallo, ich kotze.

Also, nun zum Problem:

Ich habe mit jquery einen Slideshow-script geschrieben welcher wunderbar funktioniert hat (auf einer testseite) als ich den script samt html&css auf der Seite wo es im endeffekt hin soll eingebunden habe, warf das script den Fehler: "Cant find variable: $". Alle anderen scripts welche jquery nutzen funktionieren aber tadellos.

html:

HTML:

<div id="feature">
            
        <div id="SliderContainer">
        
        <div id="ImageContainer">
        
            <!--Buttons-->          
        	<div id="ButtonHover"></div>
        	<div class="Button" id="ButtonLeft"></div>
        	<div class="Button" id="ButtonRight"></div>
        	<!--Ende Buttons-->
        
            <div class="MoveContainer" id="ImageMoveContainer">
     
       		    <img class="Image" id="Image1" src="Images/Slides/Slide1.png" alt="" >
       
                <img class="Image" id="Image2" src="Images/Slides/Slide1.png" alt="" >
            
                <img class="Image" id="Image3" src="Images/Slides/Slide1.png" alt="" >
                
            </div>
            
        </div>
        
        <div id="InfoBoxes">
        
        	<div class="Box" id="InfoBox">info:</div>
            <div class="Box" id="WorkBox">work:</div>
            <div class="Box" id="URLBox">url:</div>
        
        </div>
        
        <div id="TitleContainer">
        	<div id="AlphaContainer"></div>
        	<p id="PreLink">available at </p>
        
        	<div id="Title1">
            	<p class="Title">advative1</p>
                <a class="Link" href="http://advative.pl" target="_blank">http://advative.pl</a>
            </div>
            
            <div id="Title2">
            	<p class="Title">advative2</p>
                <a class="Link" href="http://advative.pl" target="_blank">http://advative.pl</a>
            </div>
            
            <div id="Title3">
            	<p class="Title">advative3</p>
                <a class="Link" href="http://advative.pl" target="_blank">http://advative.pl</a>
            </div>
        
        </div>
        
        <div id="TextContainer">
        
            <div class="Text" id="Text1">
                <p class="Info">TestInfoText1</p>
                <p class="Work">TestWorkText1</p>
                <a class="URL" href="http://advative.pl" target="_blank">TestURLText1</a> 
            </div>
        
            <div class="Text" id="Text2">
                <p class="Info">TestInfoText2</p>
                <p class="Work">TestWorkText2</p>
                <a class="URL" href="http://advative.pl" target="_blank">TestURLText2</a>                
            </div>

            <div class="Text" id="Text3">
                <p class="Info">TestInfoText3</p>
                <p class="Work">TestWorkText3</p>
                <a class="URL" href="http://advative.pl" target="_blank">TestURLText3</a>               
            </div>
        
        </div>
               
</div>

css:

HTML:

* {
	margin:0;
	padding:0
}
#AlphaContainer {
	position:absolute;
	top:2px;
	left:2px;
	background-color:White;
	width:180px;
	height:40px
}
#SliderContainer {
	float:left;
	position:absolute;
	top:0px;
	left:0px
}
.MoveContainer {
	position:absolute;
	top:0px;
	left:0px;
}
#ImageContainer {
	position:absolute;
	left:25px;
	top:15px;
	width:445px;
	height:290px;
	overflow:hidden;
}
.Image {
	position:absolute
}
.Box {
	position:absolute;
	color:White;
	font-family:sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	background-color:#61523F;
	width:50px;
	height:15px
}
#InfoBox {
	left:0px;
	top:5px
}
#WorkBox {
	left:0px;
	top:160px
}
#URLBox {
	left:0px;
	top:180px
}
#InfoBoxes {
	position:absolute;
	top:70px;
	left:520px;
	width:85px;
	height:200px
}
#TitleContainer {
	position:absolute;
	top:15px;
	left:515px;
	width:386px;
	height:44px;
	background-image:url(Images/InfoHeader.png)
}
.Title {
	position:absolute;
	top:1px;
	left:5px;
	font-family:sans-serif;
	font-size:26px
}
#PreLink {
	position:absolute;
	top:28px;
	left:5px;
	font-size:11px;
	font-family:sans-serif
}
.Link {
	position:absolute;
	top:28px;
	left:62px;
	color:#903;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	font-family:sans-serif
}
#TextContainer {
	position:absolute;
	left:600px;
	top:70px;
	width:300px;
	height:200px;
	overflow:hidden;
}
.Text {
	position:absolute;
	left:0;
	top:0
}
.Info {
	position:absolute;
	top:5px;
	font-family:sans-serif;
	font-size:11px;
	color:White;
	width:300px;
	height:150px
}
.Work {
	position:absolute;
	top:160px;
	font-family:sans-serif;
	font-size:11px;
	color:White
}
.URL {
	position:absolute;
	top:180px;
	color:#903;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	font-family:sans-serif
}
.Button {
	width:20px;
	height:20px;
	background-color:Red;
}
#ButtonLeft {
	position:absolute;
	left:0px;
	top:135px
}
#ButtonRight {
	position:absolute;
	left:425px;
	top:135px
}
#ButtonHover {
	background-color:Black;
	position:absolute;
	width:445px;
	height:290px;
}

script:

HTML:

$(function() {
    /* Wird am Start ausgeführt*/
	ReadyUpSite();

    /* Gecachte Variablen */
    var ImageContainer = $("#ImageMoveContainer");
    var LeftButton = $("#ButtonLeft");
    var RightButton = $("#ButtonRight");

    LeftButton.click(function()
    {

        if ((TextIndex) == Slides)
        {
            $("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed);
            TextIndex = 1;
            $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
        }
        else
        {
            $("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);	
			$("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed);
            TextIndex++;
            $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
        }
    });

    RightButton.click(function() {

        if ((TextIndex - 1) == 0) {
            $("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed);
            TextIndex = Slides;
            $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
        }
        else {
            $("#Text" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 0 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 0 }, ImageSpeed);
            TextIndex--;
            $("#Text" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Title" + TextIndex).stop().animate({ "opacity": 1 }, TextSpeed);
			$("#Image" + TextIndex).stop().animate({ "opacity": 1 }, ImageSpeed);
        }
    });

    /* Hover State für Buttons */
    $("#ImageContainer").hover(function()
    {
        $("#ButtonHover").stop().animate({ "opacity": .45 });
        LeftButton.stop().animate({ "opacity": 1 });
        RightButton.stop().animate({ "opacity": 1 });

    }, function()
    {
        $("#ButtonHover").stop().animate({ "opacity": 0 });
        LeftButton.stop().animate({ "opacity": 0 });
        RightButton.stop().animate({ "opacity": 0 });
    });

});

/* Statische Werte */
var ImageWidth = 445;   /* Breite der Bilder */
var ImageHeight = 290;  /* Höhe der Bilder */
var TextWidth = 400;    /* Breite des gesamten Textes */
var TextHeight = 280;   /* Höhe des gesamten Textes */
var StartImage = 3;     /* Das Bild das als erstes Angezeigt werden soll. */
var Slides = 3;         /* Anzahl der Bilder */
var ImageSpeed = 1500;   /* Bestimmt die Geschwindigkeit der Animationen mit "fast", "normal" oder ""(default), "slow" oder einer Zahl in Millisekunden. */
var TextSpeed = 1000;   /* Bestimmt die Geschwindigkeit der Animationen mit "fast", "normal" oder ""(default), "slow" oder einer Zahl in Millisekunden. */

/* Nicht Ändern */
var TextIndex = StartImage;

function ReadyUpSite()
{ 
    for ( i = 1; i <= Slides; i++) {
        $("#Text" + i).animate({ "opacity": 0 }, 1);
		$("#Title" + i).animate({ "opacity": 0 }, 1);
		$("#Image" +i).animate({ "opacity": 0 }, 1);
    }

    $("#Text" + StartImage).animate({ "opacity": 1 }, 1);
    $("#Title" + StartImage).animate({ "opacity": 1 }, 1);
	$("#Image" + StartImage).animate({ "opacity": 1 }, 1);

	var LeftButton = $("#ButtonLeft");
	var RightButton = $("#ButtonRight");


    $("#ButtonHover").animate({ "opacity": 0 }, 1);
    LeftButton.animate({ "opacity": 0 }, 1);
    RightButton.animate({ "opacity": 0 }, 1);
	$("#AlphaContainer").animate({"opacity": .45 }, 1);
}

Maik · 28. Juni 2009

Hi,

der Fehlermeldung zufolge fehlt wohl dieses Script in deinem Dokument:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

mfg Maik

D34DL1NES · 28. Juni 2009

Nein, habe ich bloß hier nicht extra angegeben. In der eigentlichen html file sieht das dann so aus:

HTML:

    <script type="text/javascript" src="scripts/slider-home.js"></script>
	<script type="text/javascript" src="scripts/jquery.js"></script>
	<script type="text/javascript" src="scripts/jquery-color.js"></script>
	<script type="text/javascript" src="scripts/main.js"></script>
	
	<script type="text/javascript" src="scripts/chili-1.7.pack.js"></script>
	
	<script type="text/javascript" src="scripts/jquery.easing.js"></script>
	<script type="text/javascript" src="scripts/jquery.dimensions.js"></script>
	<script type="text/javascript" src="scripts/jquery.accordion.js"></script>
    <script type="text/javascript" src="scripts/accordion.js"></script>

Maik · 28. Juni 2009

Befindet sich obiger Scriptcode in dem Script "main.js"?

Setz es doch mal ans Ende der Scriptaufrufe.

mfg Maik

D34DL1NES · 28. Juni 2009

Das Script war in der Slide-Home.js

Danke das war der Fehler, das Script muss nach der Library geladen werden die es benutzt.

✔ Cant find variable: $

D34DL1NES

Erfahrenes Mitglied

Maik

D34DL1NES

Erfahrenes Mitglied

Maik

D34DL1NES

Erfahrenes Mitglied

Neue Beiträge