Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post

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

    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

    Code:
    $(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); }
    )
       	 	
    });

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post
    The class .uparrow is nested inside of the the div #lightcube. the background image of the uparrow class is not showing up.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <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>

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:
    Code:
    ../images/arrowup.png
    when it should have been this:
    Code:
    ./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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •