I have a div at the top of my page with a button inside of it that when clicked displays a hidden div with options. I want to fade in the div using JQuery to give it more eye candy. But when I add the javascript everything disappears! I have no idea why, either. Do I need to use this in the scene assistant? I wouldn't think so... All help is appreciated, thanks!
<body>
<style type="text/css">
.header {
color:#FFF;
width:100%;
margin-top:-60px;
position:absolute;
padding:15px;
background:#6699CC;
}
.header:hover #hidden {
display:none;
}
#hidden {
display:none;
}
.post {
background:#6699CC;
}
.post:hover #hidden {
display:block;
}
#pill {
position:absolute;
margin-left:65.5%;
margin-top:-34px;
}
#pill:hover {
opacity:0.4;filter:alpha(opacity=40)
}
h1 {
font-size:20px;
font-weight:normal;
}
.textPost, .photoPost, .quotePost, .linkPost, .chatPost, .audioPost {
width:80px;
height:90px;
padding:20px;
padding-top:10px;
text-align:center;
}
.textPost, .quotePost, .chatPost {
float:left;
}
.photoPost, .linkPost, .audioPost {
float:right;
margin-right:40px;
}
#bubble, #photograph, #quote, #link, #chat, #audio {
margin-top:10px;
margin-bottom:-20px;
}
.space {
background:#6699CC;
width:100%;
height:50px;
position:absolute;
margin-top:365px;
margin-left:-15px;
}
</style>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<style type="text/javascript" />
$(function(){
$('#pill').click(function(){
$('#hidden').fadeIn()
});
});
</script>
</head>
<div id="main" class="palm-hasheader"></div>
<div class="header">Dashboard<div class="post"><img id="pill"
src="http://27.media.tumblr.com/tumblr_lhbg3u8WLe1qajshqo1_100.png">
<div id="hidden">
<div class="textPost">
<img id="bubble" src="http://28.media.tumblr.com/tumblr_lhb72wBhjy1qajshqo1_100.png">
<h1>Text</h1>
</div>
<div class="photoPost">
<img id="photograph"
src="http://27.media.tumblr.com/tumblr_lhb7mjyYbm1qajshqo1_100.png">
<h1>Photo</h1>
</div>
<div class="quotePost">
<img id="quote"
src="http://30.media.tumblr.com/tumblr_lhb91dxhML1qajshqo1_100.png">
<h1>Quote</h1>
</div>
<div class="linkPost">
<img id="link" src="http://30.media.tumblr.com/tumblr_lhb9od3cPU1qajshqo1_100.png">
<h1>Link</h1>
</div>
<div class="chatPost">
<img id="chat" src="http://29.media.tumblr.com/tumblr_lhb9ziYQRJ1qajshqo1_100.png">
<h1>Chat</h1>
</div>
<div class="audioPost">
<img id="audio"
src="http://30.media.tumblr.com/tumblr_lhbbrcUSmP1qajshqo1_100.png">
<h1>Audio</h1>
</div>
<div class="space"></div>
</div>
</div>
</div>
</body>
<style type="text/javascript" />I believe is incorrect try:<script type="text/javascript">instead.Worked on my Pre.
Good luck!