We Keep Coding

'$' is undefined error

Trying to use a jQuery plugin and it is not working and this error
'$' is undefined
keeps popping up. I am very new to Javascript and jQuery so please be as simple as possible
<script type="text/javascript" src="wpscripts/jquery-1.4.1.min.js"></script>
<!--[if IE 6]>
<script src="thumb-images/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('#preview_inner div a');</script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width();
thumbs.click(function () {
preview_pos = preview_els.eq(thumbs.index(this)).position();
outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500);
arrow.stop().animate({ 'left': $(this).position().left }, 500);
});
arrow.css({ 'left': thumbs.eq(0).position().left }).show();
outer.animate({ 'scrollLeft': 0 }, 0);
$("#preview_inner").css('width', preview_els.length * image_width);
});
</script>

That usually means that you have to import jquery at the top like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Edit: Here is the link for the updated version. I believe that this page will always update to the latest version of jQuery whereas my above answer won't: HERE

Check your script source path. It's likely not loading in.
If it's at the root of a site use:
<script type="text/javascript" src="/wpscripts/jquery-1.4.1.min.js"></script>
I see you have also tagged ASP.NET, so If it's in a control or somewhere that can be different for each page load, then use the following to have .Net figure out the actual relative path.
<script type="text/javascript" src="<%= ResolveClientUrl("~/wpscripts/jquery-1.4.1.min.js") %>"></script>

I see you are using WordPress.
You often are not able to define links with a relative path.
try using the php function "get_theme_root();" to get the theme root and navigate from there

jQuery event listener for fully loaded DOM with dynamic content

I'm trying to use jQuery script to align height of two divs. Everything works fine until I have some dynamic content in one of divs.
When I hardcode some static content in one of divs like:
<br>asd<br>asd<br> x 20
both divs has the same height property, but when I load some data from DB to one of divs, they are different.
I guess that the problem is in .ready() listener. Documentation says that it fires when DOM is fully loaded but it looks like it's not the truth.
My question is: what kind of listener or other 'trick' should I use? I think that jquery/javascript solution is cleaner than messing with css and I would like to have this kind of solution.
Thanks in advance.
jquery script:
$(document).ready(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});

jquery in the base work with event document.ready is means when all DOM is ready until here make the jquery code. is for don't have a option to render jquery code without render jquery library
if you want to add event just when all the dom is loaded include content and images you need to do this
$(document).ready(function(){
$(window).load(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});
});

You can use window.onload to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.
window.onload = function() {
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
};

Content isn't loading in scroll

So I've created a dynamic scroll that worked in jsfiddle --> http://jsfiddle.net/9zXL5/39/
var movelist = document.getElementById('movelist');
function yHandler() {
var contentHeight = movelist.scrollHeight;
var yOffset = movelist.clientHeight;
var y = yOffset + movelist.scrollTop;
if (y >= contentHeight) {
movelist.innerHTML += '<div class ="newData">yooooo</div>';
}
}
movelist.onscroll = yHandler;​
but it had uncaught errors such as yHandler not being defined. So I fixed the errors by placing var movielist=.. and movielist.onscroll = yHandler; inside my $(document).ready. The errors are gone, but now content won't load when my scroll hits the bottom as seen --> http://jsfiddle.net/9zXL5/40/
$(document).ready(function() {
var movelist = document.getElementById('movelist');
movelist.onscroll = yHandler;
});
function yHandler (){
var contentHeight = movelist.scrollHeight;
var yOffset = movelist.clientHeight;
var y = yOffset + movelist.scrollTop;
if(y >= contentHeight){
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
});
}
}
and I cannot figure out why. I would really appreciate it if someone explained to me why this is so.

You have several errors in your fiddle:
You where not loading jQuery
You had several syntax errors
Here is a working fiddle: http://jsfiddle.net/9zXL5/42/
It helps if you use a console (chrome/devtools or FF/firebug) to spot the errors and correct them. In your case, you had closing parentheses and brackets here:
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
}); // <-- remove the );
} // <-- remove this line

You had a number of JavaScript syntax errors in that jsFiddle, caused by:
not loading jQuery,
having an unnecessary bracket and semi-colon ();) after your function declaration and having an additional, unmatched closing curly-brace (}) also after that function declaration.
If you haven't already I'd highly suggest you install, or start using, a JavaScript debugger. If you use Firefox, I'd personally suggest using Firebug. In Internet Explorer and Chrome the built-in developer tools can be accessed using the F12 key.
Here's an updated jsFiddle.

jquery.rotate error

I have an image that I am trying to rotate 30 degrees and move horizontally across a page. However, I don't think I am handling the jquery right because I am getting several errors in the Firefox Web Console. Here are the errors:
[10:30:27.260] ReferenceError: jQuery is not defined # file:///home/ladmin/Desktop/javascriptAnimations/jquery.rotate.1-1.js:1
[10:30:27.274] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. # file:///home/ladmin/Desktop/javascriptAnimations/si110cockroach.html
[10:31:03.416] ReferenceError: $ is not defined # file:///home/ladmin/Desktop/javascriptAnimations/si110cockroach.html:12
I included the script tags with the jquery source at the top like this:
<script language="javascript" type="text/javascript" src="jquery.rotate.1-1.js"></script>
And here is the code where I call the jquery:
function moveLeft(object,x,y){
$(object).rotateRight(30);
object.style.right = x + "px";
object.style.top = y + "px";
if (x < 0 || x > 1500 || y < 0 || y > 1500)
{
object.style.visibility="hidden";
}
else
{
var t = setTimeout(function() { moveLeft(object,x+3,y+0); }, 5);
}
}
Am I not including the source file right or am I not calling the jquery right?

You have to include jquery.min.js before the jquery.rotate.1-1.js script:
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.rotate.1-1.js"></script>

Javascript error: Object Required in ie6 & ie7

I have a javascript function (epoch calendar) which displays a calendar when focus is set on certain text boxes. this works fine in ie8, ff (all versions as far as I can test), opera etc but doesn't work in ie7 or previous.
If i have it set up in a blank html test page it will work so I'm fairly sure it's a conflict with my css (provided to me by a designer).
I've traced the error to these lines of code -
Epoch.prototype.getTop = function (element) //PRIVATE: returns the absolute Top value of element, in pixels
{
var oNode = element;
var iTop = 0;
while(oNode.tagName != 'BODY') {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
return iTop;
};
Epoch.prototype.getLeft = function (element) //PRIVATE: returns the absolute Left value of element, in pixels
{
var oNode = element;
var iLeft = 0;
while(oNode.tagName != 'BODY') {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
return iLeft;
};
More specifically, if i remove the actual while loops then the calendar will display OK, just that its positioning on the page is wrong?
EDIT
Code below which sets 'element'
<script type="text/javascript">
window.onload = function() {
var bas_cal, dp_cal, ms_cal;
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDateOfDiag.ClientID%>'));
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDOB.ClientID%>'));
};
</script>
Note: I am using asp.net Master pages which is why there is a need for the .ClientID
EDIT
A further update - I have recreated this without applying css (but including the .js file provided by the designer) the code still works fine which, there must be some sort of conflict between the CSS and my JavaScript?

That would lead me to believe that the tagName does not match, possibly because you have it in upper case. You might try while(!oNode.tagName.match(/body/i)) {

what happens if you add a line of debug code like this:
var oNode = element;
var iLeft = 0;
alert(oNode);
This might give different results in different browsers; I think it may be NULL for IE.
You may want to have a look at the code that provides the value of the 'element' parameter to see if there's a browser-dependant issue there.