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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JavaScript - Expand div onClick

    I'm a total noob in JS.
    I created this simple function: http://jsfiddle.net/9UzNq/1/ but I'd need some more help with it:
    - Make it reverse onClick
    - Make the image change when hovering anywhere on the white bar
    - Make the image stay at the bottom of the div, not top
    - Make the image stay as onMouseOver

    I'm planning on learning JS, but I'm already learning 5 different programming languages. So while waiting that, I need some JavaScript solutions for my websites, it'll also help me learn.
    Could you modify those to the fiddle and add some comments to help me understand the concept?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    When you are writing your message, in the tool bar above you is an icon "#" It will give you [code] tags, paste your code in there, please.

    - Make it reverse onClick You might use a toggle for this, I didn't
    - Make the image change when hovering anywhere on the white bar DID
    - Make the image stay at the bottom of the div, not top DID
    - Make the image stay as onMouseOver Have no idea what you want here

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    #ABCD {
        background:white;
    	width:100%;
    //z-index:2; THIS IS NOT NEEDED
    	border-bottom: 1px solid gray;
    	box-shadow: 0px 0px 10px;
    //position:fixed; CAN'T MOVE THIS IF IT'S FIXED
    position:absolute;
    	height: 70px;
    	top:0px;
    }
    #container {
    	position:absolute;
    	font-family:century gothic;
    	width:100%;
    	top: 45px;
    	font-size: 20px;
    	margin:0px;
    	height:130px;
    	margin-top:0px;
    	text-align:center;
    }
    img{
    	margin-top:0px;
    	height:70px;
    	position:absolute;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="ABCD">
    		<img id="pic" src="http://i43.tinypic.com/10qanv9.gif" >
    	</div>
    </div><!-- THIS WAS MISSING IN YOUR CODE  -->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$('#ABCD').click(function(){
    		if($('#ABCD').css("height") == "70px"){
    			$('#ABCD').animate({height: "300px"}, 1000);
    			$("#pic").animate({top: "230px"}, 1000);
    		}else{
    			$('#ABCD').animate({height: "70px"}, 1000);
    			$("#pic").animate({top: "0px"}, 1000);
    		}
    	});
    	$("#ABCD").mouseenter(function(){
    		$("#pic").attr("src", "http://i43.tinypic.com/28150s3.gif");
    	});
    	$("#ABCD").mouseleave(function(){
    		$("#pic").attr("src", "http://i43.tinypic.com/10qanv9.gif");
    	});
    });
    </script>
    </body>
    </html>
    My changes should be in the CSS and not indented.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    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
    •