Forums

Ash149

Hello all!

So i'm trying to write my first bit of jQuery to do something on a site and I'm sure I could probably copy some code to do it but I want to do it myself, I've been watching lots of jQuery tutorials (just watching the first one on here that Chris did) and basically I can't seem to get my coding working correctly.

Here is the code I've written:


<script src="js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(function() {
  	$("#start-here").click(fuction(){
  		$("#media-bar").animate(){
  		top: "0px"
  	    });
  	  });
    });
</script>

That's exactly how it is in my header section on the site. Basically trying to get it to change the 'top' of the media-bar, here is the HTML:


  <div id="media-bar">
      <div id="media-bar-content">
    This is the media bar<br>
    This is another line.<br>
    This is yet another line of text.
      </div>
  </div>
  <div id="start-here-holder">
      <div id="start-here">
  <a href="#">Start here</a>
      </div>
</div>

The CSS for the media bar is as follows:


#media-bar {
	width:100%;
	height:200px;
	background:yellow;
	position:fixed;
	max-height:200px;
	top:-200px;
	
}

It's basically hidden from the page. If I change the #media-bar 'top' to 0px it displays where I want it to once you have clicked the 'start here' div. If you get what I mean. I can't see why it shouldn't be working?

Thanks a lot if anyone can help!

Ash

Fourize

Well the main problem appears that your targeting the div #start-here and then click an anchor link, not the actual div...

change your html to this

<div id="start-here">
  	<p>Start here</p>
</div>

your jquery to something like this...

<script src="http://code.jquery.com/jquery-latest.js"></script&gt;
<script type="text/javascript">
  $(document).ready(function() {
        $('#start-here').click(function() {
  			$('#media-bar').animate({
    			"top": "0"
  			}, 1000, function() {
								});
			});
    });
</script>

and your css, just so the div appears clickable

#media-bar {
        width:100%;
        height:200px;
        background:yellow;
        max-height:200px;
	top: -200px;
	position: relative;

}

#start-here {
	width: 200px;
	height: 50px;
	background: #318ba2;
	cursor: pointer;
}

someone will be able to make it much better than this, and also the start-here div positions itself ready for the media-bar, not sure if you want that... anyway good luck

Ash149

Thanks fourize, the code you supplied worked fine, I used to it add a top value to the start-here DIV to move that down 200px.

Though the only way I could get it working properly was to use the mouseover the header and page-wrap so put it back away, but that's ok for now, I'm gonna watch some more tutorials/read up on jQuery as I need to be able to do this kinda stuff properly, but for now my code will work ok, this is what the jQuery ended up being like:

<script type="text/javascript">
  $(document).ready(function() {
        $('#start-here').click(function() {                       $('#media-bar').animate({
                "top": "0"
                    }, 600, function() {
                    });
$('#start-here-holder').animate({
                "top": "200"
                    }, 600, function() {
                    });
          });
            $('#page-wrap').mouseover(function() {                       $('#media-bar').animate({
                    "top": "-200"
                        }, 600, function() {
                        });
    $('#start-here-holder').animate({
                    "top": "0"
                        }, 600, function() {
                        });
              });
               $('header').mouseover(function() {                       $('#media-bar').animate({
                        "top": "-200"
                            }, 600, function() {
                            });
        $('#start-here-holder').animate({
                        "top": "0"
                            }, 600, function() {
                            });
                  });
    });
</script>

So for now that will have to suffice :)

treehouse : what would you like to learn today?

Forums

Why is my very basic jQuery code not working? :/