We Keep Coding

What's wrong with my jquery syntax and formating?

What's wrong with this code? Probably a lot cus I'm new to jquery. I'm trying to fadeIn the page then fade the background to a different one the fade up and in the nav and set it up so the links will fade the page out and bring in the new page. The code I have now isn't quite working and I think some syntax and formatting is the problem.
$(document).ready(function() {
$('body').fadeIn(1500);
});
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Thanks!

$(document).ready triggers as soon as the DOM is fully loaded. Any javascript outside of the $(document).ready block is run while the browser is still loading the page. so if your $('#background') element is not yet loaded to the DOM jQuery cannot add the 'background' class to it. And more than likely only some of your $('.link') elements will have the click event listener added since they weren't yet loaded when the javascript ran. That's why you should embed such things inside the $(document).ready function.
$(document).ready(function() {
$('body').fadeIn(1500);
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
Notice with proper indentation you can easily see what is inside the $(document).ready function. Also notice you don't put standard functions like your newpage() function inside the $(document).ready.

How to reduce my code in both jQuery and CSS

Here is my code:
jQuery:
$(document).ready(function () {
$("#news").hover(function () {
$('#news_img').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news1").hover(function () {
$('#news_img1').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news3").hover(function () {
$('#news_img3').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news4").hover(function () {
$('#news_img4').animate({
height: 'toggle'
}, 290, function () {
});
});
});
JSFIDDLE here:
http://jsfiddle.net/huydq91/N89Kw/
I would like to reduce my code and make it easier to manage in the future whenever I would love to add more <tr> or <td> tags without editing too much in the jQuery and CSS.

You can target the hover elements by its class news and find the target element by appending the last digits in the hovered element's id to news_img like
$(document).ready(function () {
$(".news").hover(function () {
$('#news_img' + this.id.replace('news', '')).stop(true).animate({
height: 'toggle'
}, 290, function () {});
});
});
Demo: Fiddle
You can remove the css part of the hover by adding some data-* attributes to the image like
<img src="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_zps923b43dc.jpg" border="0" alt="Showroom1" data-hover="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_1_zpse41d0851.jpg" />
then
$(document).ready(function () {
//since the news elements has a common class, use it to target all the news elements instead of using individual ids
$(".news").hover(function (e) {
//you can find the `news_img` within the current news item using .find() instead of using its class to target it
$(this).find('.news_img').stop(true).animate({
height: 'toggle'
}, 290);
//find the image element within the current news
var $img = $(this).find('.imgswap img');
//if the current event is mouseenter then show the hover image else the src image
//the hover handler registers 2 handler one for mouseenter another for mouseleave
$img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src'));
});
//when we leaves the news elements we need to put back the original src, so store it using data api
$('.news .imgswap img').each(function () {
$(this).data('src', this.src);
})
});

Combine your jQuery calls into one function family. Instead of 4 separate .hover() calls, use class names and do the following:
$(document).ready(function () {
$(".news").hover(function(){
$(this).find(".news_img").animate({
height: "toggle"
}, 290, function(){
});
});
});
On your CSS, you're pretty compact already and there's really not much more you can do to reduce the amount of code you have.
Updated fiddle

Use attribute selector in jquery.
$(document).ready(function () {
$("[id^=news]").hover(function () {
$('#news_img').stop().animate({
height: 'toggle'
}, 290, function () {
});
});
});
Fiddle

Spritely div .click not working

I am using the JS plugin called "Spritely" to animate background images. Everything works (backgrounds are moving). But I can't get a function to be active when clicked on a div(sprite).
(I have the script.js, jquery and spritely included in the ).
HTML is just 2 divs (#container and #hills)
css
#container
{
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(clouds.jpg);
background-repeat:repeat-x;
z-index:-3;
position:absolute;
}
#hills
{
width:100%;
height:250px;
background-image:url(hills.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:1;
position:absolute;
bottom:0px;
}
javascript
$(document).ready(function() {
$(hills).click(function(){
alert("hey");
});
});
var hills;
$(document).ready(function(){
var hills = document.getElementById('hills');
$(hills).pan({fps: 30, speed: 2, dir: 'left'});
});

Looks like you are attempting using hills without first adding the element to it, try this:
$(document).ready(function() {
var $hills = $('#hills');
$hills.pan({fps: 30, speed: 2, dir: 'left'});
$hills.click(function(){
alert("hey");
});
});
I also cleaned up your code a bit with this. There is no need to have two separate ready()s here. I'm using a jQuery selector for #hills since you are using jquery functions on it anyway. I also cache that object so that we don't have to wrap the same jquery object twice.

You have a variable scope issue (see the comments I added):
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills; // Your click handler uses this variable, which is never set
$(document).ready(function () {
//this "hills" variable, since you prefaced with "var",
// is local to this anonymous function,
// meaning the click handler can't see it.
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Why have two DOM ready handlers? Why not combine them like this:
$(document).ready(function () {
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
$(hills).click(function () {
alert("hey");
});
});
Another option is to have the second DOM ready handler use the global variable by removing the var keyword:
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills;
$(document).ready(function () {
hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Or simply remove the global variable altogether. These snippets only execute once, so there's not much to gain by caching the DOM element:
$(document).ready(function () {
$('#hills').click(function () {
alert("hey");
});
});
$(document).ready(function () {
$('#hills').pan({
fps: 30,
speed: 2,
dir: 'left'
});
});

jQuery fadein fadeout text

I have this at the moment: (the list is longer, but this is just one element)
<a href="Products.aspx"
onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"
onmouseout="onMouseOverCatDisplay("DSC_0414_SS.jpg", "You see: bike");">Car</a>
and above the html, I have this javascript:
<script type="text/javascript" language="javascript">
// <![CDATA[
function onMouseOverCatDisplay(catimg, catnaam)
{
$("#lh").stop().animate({ color: "#1C1C1C" }, 2000);
$("#lh").html(catnaam);
$("#lh").stop().animate({ color: "#DBDBD6" }, 2000);
$("#imgCat").attr("src", catimg);
}
// ]]>
</script>
and this:
<h4 id="lh">Bikes</h4>
<img id="imgCat" src="img/bike.jpg" />
now everything works fine, but the animation does not work.
I'd like to fade out the h4, replace the text and then fade back in.
EDIT set the image source also with jQuery instead of javascript
EDIT2
rewritten the part so that it didn't use the mouseout and mouseover to trigger the javascript. but can't figure out a way to pass another paramter to the jquery (the image)
<script type="text/javascript">
$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
},
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
});

For starters, you are using jQuery, but attaching the events as inline javascript function calls. Don't do that. Attach your event to your DOM objects inside the document ready jQuery function.
Then you are using "document.getElementById" which is fine, but why not just use a standard jQuery selector to be consistent (which, in turn, will use getElementById for you).
Finally, what's likely happening is that your function is calling two animations at the same time. What you want is the second animation to happen only after the first one is finished. To ensure that, you want to call the first animation, then call the html swap and second animation via a callback function in the first. See the documentation for an example:
http://api.jquery.com/animate/
Finally, while animating the color is fine, you may prefer to use fadeIn and fadeOut instead.
UPDATE:
Also, you have this:
onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"
Try this instead:
onmouseover="onMouseOverCatDisplay('H5032.jpg', 'Go to: cars');"

final Demo : http://jsfiddle.net/VdFD9/
If you would like to do this using title attribute, just modify the below code and set your title attributes as reference links(image links if you would like to).
HTML :
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a>
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a>
<br />
<br />
<h4 id="lh">Bikes</h4>
<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" />
javascript :
var arr = [];
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG";
arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG";
//for instance i'm using an array to cache your image links
//if you can want these links as your anchor tag "title" attrib just modify the below code
$(document).ready(function() {
var which_image = null; //detect which Image to use
$(".subCatLinksSelected").hover(function() {
var catn = $(this).attr('title');
if(catn == 'cars') {
which_image = arr[1];
} else {
which_image = arr[2];
}
onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9');
},function() {
var catn = $("a.subCatLinksSelected").first().attr('title');
which_image = arr[0]
onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000');
});
});
function onMouseOverCatDisplay(catimg, catnaam, color) {
$('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg);
$("#lh")
.css({opacity:0.2,color:"#1c1c1c"})
.html(catnaam)
.css({color: color})
.stop()
.animate({opacity:1 },2000);
}

Did you try
$("#lh").stop().animate({ color: "#1C1C1C" }, 2000, function() {
$("#lh").html(catnaam);
$("#lh").stop().animate({ color: "#DBDBD6" }, 2000);
});
Because I think the two animations are overlapping eachother. This way the second one will start after the first one is finished.

$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
},
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
});
Should work, however, if you want to access the image you'll need to bind it to each function... try this:
$(document).ready(function () {
$('div.divLeftCatMenu a').hover(
function () {
$(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
var catn = $(this).attr('title');
$("#lh").html(catn);
}.bind($(some selector for your image)),
function () {
$(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
var catn = $("a.subCatLinksSelected").attr('title');
$("#lh").html(catn);
}.bind($(some selector for your image)));
You'll then be able to access the image in each function using this, like this.src

jquery hover on dialog

<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
<script>
var bar = '<img class="myclass" src="button.png" >&nbsp&nbsp' ;
$view = jQuery('#view') ;
$view.dialog({
height: 650,
width: 650,
buttons: { "welcome" :
function() { msg() ; }
},
open: function(event, ui)
{ if (full_toggle == 1)
{
$bar.dialog('open') ;
}
}
}) ;
bar = $(".bar", "#view").dialog({
height: 30,
width: '100%',
textAlign : "justify",
marginLeft : "auto",
marginRight:"auto"
})
</script>
</div>
In the above script since bar is a dialog how can i do a hover or mouseover property on bar

How about this:
$('.myclass').mouseover(function(){
// whatever....
});
Or
$('.myclass').hover(function(){
// whatever....
});

You don't need to mix javascript code with HTML. you can put it on the HEAD section inside $(function(){}); like the bellow code.
$(function(){
$('.bar').hover(
function(){ alert('Hover!'); },
function(){ alert('Hover Out!'); }
);
});
after saw your updated the question about the dialog:
jQuery UI dialog render some html. I suggest you hook in into the html that you want to hover.
For example:
$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );
You can also use:
$view.dialog({
open: function(){
$('.ui-dialog').hover( function(){ alert('Hover!'); } });
}
});
Look here for additional resource.

$('#bar').hover(function(){
alert('I was hovered...');
//function code here...
},
function(){
alert('No longer hovered...');
//function code here...
}
});
I would also recommend modifying your code a bit... Its cleaner to read if you put all of the HTML elements in there such as your image and then at the bottom of the page, place your document ready jQuery code that initializes all of the other items like dialogues, etc. Placing JavaScript at the bottom of your page will improve load times.