I am playing around with some jQuery.
3 menu items, when you click on a menu item the content fades in.
Its a bit messy, but what I would like to know is can I not add a line of jQuery to make "#first-item" load its content, at the moment it is hidden.
Can I not duplicate this and say $('.more #first-item') ? Still pretty hard getting to grips with the logic of jQuery.
Should I not be telling jQuery to .load the #first-item ?
3 menu items, when you click on a menu item the content fades in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#wrap { width: 920px; padding: 20px; position: relative; margin: 0 auto; overflow: hidden; color: #333; background-color: #fff; }
#ajax { width: 400px; padding: 20px; }
.loader { border: 0 none; float: left; clear: both; margin: 100px 0 0 200px; }
</style>
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="slide-fade-content.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'500px'},function(){
$('#ajax').html('<img class="loader" src="loader.gif" alt="">');
$('#ajax').load('slide-fade-content.html #'+href,function(){
$('#ajax').fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
});
</script>
</head>
<body>
<div id="outer">
<div id="logo">
</div>
<div id="container">
<div id="menu">
<ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul>
</div>
<div id="ajax"></div>
<div id="menubottom"></div>
</div>
</div>
</body>
</html>
Its a bit messy, but what I would like to know is can I not add a line of jQuery to make "#first-item" load its content, at the moment it is hidden.
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
Can I not duplicate this and say $('.more #first-item') ? Still pretty hard getting to grips with the logic of jQuery.
Should I not be telling jQuery to .load the #first-item ?
