www.webdeveloper.com
Results 1 to 5 of 5

Thread: BG image of class not showing up on hover

  1. #1
    Join Date
    Feb 2012
    Posts
    12

    BG image of class not showing up on hover

    I am stuck on why the background-image of the DivClass '.uparrow' isnít showing up when i hover over the contact button 'a.contact-btn'. Plus if you have any thoughts on making this smoother much would be appreciated

    Basically i want to give the user an indication that by clicking the button the div will toggle back up with a watermark of an arrow pointing up displayed on the center of the contact div. If you have opinions on this feel free to give me criticism

    http://travismichael.net/new_tmdesigns/index.php

    If someone could help me out with why this is not working that would be awesome.

    Here is my CSS
    <style>
    Code:
    #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: 3px;
    	border-bottom-right-radius: 3px;
    	-moz-border-radius-bottomleft: 3px;
    	border-bottom-left-radius: 3px;
    	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; 
     display:none; 
     background:url(../images/arrowup.png) no-repeat center;  
     z-index:1301;  
     width:150px;
     height:150px;
    }
    </style>
    JAVASCRIPT
    Code:
    <script>
    $(document).ready(function() {
      						
    	    	$("a.contact-btn").toggle(
          			 function (e) {
          				e.preventDefault(); // stops link from making page jump to the top
           			 $("#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");
       		   		$("#lightcube").fadeIn(300);
       		   		$(".uparrow").fadeIn(300);
       		   		$("#contact").css("background-color", "#a7d614");
    
        		}).mouseout(function(){
       		   		$("body").css("border-color", "#8db510");
       		   		$("#lightcube").fadeOut(300);
       		   		$(".uparrow").fadeOut(300);
       		   		$("#contact").css("background-color", "#8db510");
       	 		});
       	 		
       	     	$('a.contact-btn').hover(
          		 	function(){ $(this).addClass('.lightcube')},
          			 function(){ $(this).removeClass('.lightcube')
    			})
       	 	
    });
    </script>
    HTML
    Code:
    <div id="contact">
    <h1>Go ahead we're listening</h1>
    <section id="contact_wrapper">
    <section id="ct_wrapper-left">
    	<article id="header">
    			<h2>We're based in Atlanta, Georgia.</h2>
    			<p>You can contact us using the contact form below.That said, if you have a project
    			in mind, our <span>Project Planner</span> might be more suitable. It won't take more than five 
    			minutes and the more information you can provide us with, the better equipped 
    			we will be to respond to your enquiry.</p>
    	</article>
    <div class="clear"></div>
    <section id="form_wrapper">
    	<form id="contact-form" action="FormtoEmail.php">
    	<section class="left">
     	 	<input id="full_name" name="full_name" type="name" placeholder="Your Name" required >
     	 	<input id="email_addr" name="email_addr" type="email" placeholder="Your Email" required >
    	</section>
    	<section id="comment_left">
    			<textarea id="comments" form="contact_form" type="text" placeholder="Comment Here"></textarea>  
    			<input type="submit" name="submit" value="SUBMIT"/> 
    	</form>
    	</section><!-- END OF COMMENT_LEFT -->
    </section><!-- END OF FORM_WRAPPER -->
    
    </section><!-- END OF CT_WRAPPER -->
    <section id="ct_wrapper-right">
    <h2>Get In Touch</h2>
    <ul>
    <li>Email: travis@travismichael.net</li>
    <li>Phone: 404-406-2811</li>
    <li>Location: Atlanta, GA</li>
    </ul>
    
    <ul class="social-list">
    <a href=""><li class="youtube">You-Tube</li></a>
    <a href=""><li class="facebook">Facebook</li></a>
    <a href=""><li class="twitter">Twitter</li></a>
    <a href=""><li class="vimeo">Vimeo</li></a>
    <a href=""><li class="skype">Skype</li></a>
    <a href=""><li class="wordpress">WordPress</li></a>
    <a href=""><li class="linkin">LinkedIn</li></a>
    <a href=""><li class="rss">RSS</li></a>
    </ul>
    </section>
    <a href="#" class="contact-btn"><h3>CONTACT</h3></a>
    </section><!-- END OF CONTACT_WRAPPER -->
    <div id="lightcube"><div class="uparrow"></div> </div>
    </div><!-- END OF CONTACT -->
    travismichael.net/new_tmdesigns/index.php

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    EDIT:
    The issue is the background URL.
    It points to: http://travismichael.net/images/arrowup.png (that 404ed)
    It should point to: http://travismichael.net/new_tmdesig...es/arrowup.png
    Change:
    Code:
    background:url(../images/arrowup.png) no-repeat center
    to
    Code:
    background:url(images/arrowup.png) no-repeat center
    in the .uparrow css area

    and correct me if I'm wrong (may have overlooked it) but nowhere in your script does it tell...
    Code:
    .uparrow {  
     display:block; 
     display:none; 
     background:url(../images/arrowup.png) no-repeat center;  
     z-index:1301;  
     width:150px;
     height:150px;
    }
    ..to change.
    Last edited by NoEffinWay; 02-24-2012 at 03:38 PM. Reason: Found real issue. I kept playin... X_X

  3. #3
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    There is still something wrong, just havin trouble narrowing it down. Take the arrow div out of the light box div and left them be changed independently...that may work

  4. #4
    Join Date
    Feb 2012
    Posts
    12
    Thanks for the help.
    I forgot i was writing inline css cause of the javascript and didn't change the path accordingly.

  5. #5
    Join Date
    Feb 2012
    Posts
    12
    So i appreciate you helping me out with why the image wasn't showing up. Can anyone help out with the fact that its a little buggy. Not exactley sure why it's so buggy so not sure where to start.
    Any help would be awesome.

    www.travismichael.net/new_tmdesigns/index.php

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles