Adding Class with javascript(picture inside the div wont show up)

[trav5567]

To better understand what i am trying to do click here to view my page.

The backgorund image for the child div to #lightcube is not showing up. its supposed to be a arrow that is positioned in the center of the uparrow class.

Please this has been driving me nuts and any help would be greatly appreciated.

here is the script

$(document).ready(function() {
		
		$("a.contact-btn").toggle(
      		function () {
       			 $("#contact").animate( {"top": "0"}, 900, "linear" );
       			 $("#lightbox").fadeIn(300);
     		 },
      		function () {
        		$("#contact").animate( {"top": "-400px"}, 900, "linear" );
        		$("#lightbox").fadeOut(300);  
    	});
    	  

		$('body').click(function() {
        		$("#contact").animate( {"top": "-400px"}, 900, "linear" );
        		$("#lightbox").fadeOut(300);
			});

			$('#contact').click(function(event){
 				  event.stopPropagation();
				});
		
		 $("a.contact-btn").mouseover(function(){
   		   		$("body").css("border-color", "#a7d614");
   		   		$("#contact").css("background-color", "#a7d614");

    				}).mouseout(function(){
   		   		$("body").css("border-color", "#8db510");
   		   		$("#contact").css("background-color", "#8db510");
   	 		});
   	 		
   	 	$('a.contact-btn').hover(
      		 function(){ $(this).addClass('.lightcube') 
      		 		$('#lightcube').fadeIn(200);},
      		 function(){ $(this).removeClass('.lightcube')
      		 		$('#lightcube').fadeOut(200); }
)
   	 	
});

[Rowsdower!]

Do you mean #lightbox as opposed to #lightcube?

If so, then the problem seems to be that there is no child element to #lightbox. If not, then the problem seems to be that there is no element with the #lightcube ID.

[trav5567]

The class .uparrow is nested inside of the the div #lightcube. the background image of the uparrow class is not showing up.

[trav5567]

<style>

#contact {
	width:1000px; 
	height:400px; 
	background:#8db510; 
	position:absolute; margin-left:-500px; top:-400px; left:50%;
	display:block;
	z-index:1005;
}
a.contact-btn:hover {
	color:#fff;
	background: #a7d614;
}
a.contact-btn  {
	display:block;
	line-height:100%;
	width:80px;
	height:25px;
	padding:10px 5px 5px 5px;
	position:absolute;
	bottom:-35px; right:0;
	font-size:.8em;
	color:#222222;
	text-align:center;
	text-decoration:none;
	font-family:helvetica;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	background:#8db510;
}
#lightbox {  
 display:none;  
 background:#000000;  
 opacity:0.7;  
 filter:alpha(opacity=70);  
 position:absolute;  
 top:0px;  
 left:0px;  
 min-width:100%;  
 min-height:100%;  
 z-index:1000;  
}

#lightcube {  
 display:none;  
 background:#000;
 opacity:0.7;  
 filter:alpha(opacity=70);  
 position:absolute;  
 top:0px;  
 left:0px;  
 min-width:100%;  
 min-height:100%;  
 z-index:1300;  
}
.uparrow {  
 display:block;  
 background:url(../images/arrowup.png) no-repeat center;  
 z-index:1301;  
 width:150px;
 height:150px;
}
</style>

[Rowsdower!]

OK, #lightcube now exists in the page but the image location provided returns a 404 error.

You either have the wrong path, the wrong file name, or you have moved/deleted your image by mistake.

Turns out, after some poking around, that your path was wrong. You had this:

../images/arrowup.png

when it should have been this:

./images/arrowup.png

(note that one period has been removed from the front of the relative file path)

You just need to update your CSS with that change and your arrow will appear as intended.