mindfullsilence
14 May 2009, 03:05 AM
New to this js and jQuery gig (just started learning today) and think I've done something wrong - my js isn't working.
var y = document.getElementById("advanced").checked;
if (y == true){
$(function(){
$("#advanced").click(function () {
$("#searchTools").show("blind", { direction: "vertical" }, 700);
});
});
}
else {
$(function(){
$("#advanced").click(function () {
$("#searchTools").hide("blind", { direction: "vertical" }, 700);
});
});
}
The html that goes with it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MusicBrainz!</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
<script type="text/javascript" src="js/divgrow.js"></script>
<style type="css/text">
#seachTools {
display: none;
height: 220px;
width: 450px;
overflow: hidden;
display: none;
}
</head>
<body>
<div id="searchTools">
<label title="Search For">Search For: </label>
<input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
</div>
<div id="inputWrap">
<label>
<input type="checkbox" id="advanced" />
</label>
<label>Advanced Search Options</label>
Basically when a checkbox is checked, I want the div "#searchTools" to grow using jQuery; and when it's unchecked I want it to shrink.
Any ideas where I went wrong?
var y = document.getElementById("advanced").checked;
if (y == true){
$(function(){
$("#advanced").click(function () {
$("#searchTools").show("blind", { direction: "vertical" }, 700);
});
});
}
else {
$(function(){
$("#advanced").click(function () {
$("#searchTools").hide("blind", { direction: "vertical" }, 700);
});
});
}
The html that goes with it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MusicBrainz!</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
<script type="text/javascript" src="js/divgrow.js"></script>
<style type="css/text">
#seachTools {
display: none;
height: 220px;
width: 450px;
overflow: hidden;
display: none;
}
</head>
<body>
<div id="searchTools">
<label title="Search For">Search For: </label>
<input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
</div>
<div id="inputWrap">
<label>
<input type="checkbox" id="advanced" />
</label>
<label>Advanced Search Options</label>
Basically when a checkbox is checked, I want the div "#searchTools" to grow using jQuery; and when it's unchecked I want it to shrink.
Any ideas where I went wrong?