Back To Programming / Scripting / Coding Forum

If...Else syntax might be wrong?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 13th, 2009, 8:57 pm

I'm using the jQuery "blind" function to expand and hide a div depending on whether or not the checkbox is checked. My if else statement isn't working though.
Code: [ Select ]
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);
});
 
  });
}
  1. var y = document.getElementById("advanced").checked;
  2. if (y == true){
  3. $(function(){
  4.  
  5.     $("#advanced").click(function () {
  6.       $("#searchTools").show("blind", { direction: "vertical" }, 700);
  7. });
  8.  
  9.   });
  10. }
  11. else {
  12. $(function(){
  13.    
  14. $("#advanced").click(function () {
  15.       $("#searchTools").hide("blind", { direction: "vertical" }, 700);
  16. });
  17.  
  18.   });
  19. }


my html looks something like this:
Code: [ Select ]
<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>
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>MusicBrainz!</title>
  5. <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  6. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  7. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
  8. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
  9. <script type="text/javascript" src="js/divgrow.js"></script>
  10.  
  11. <style type="css/text">
  12. #seachTools {
  13.         display: none;
  14.     height: 220px;
  15.     width: 450px;
  16.     overflow: hidden;
  17.     display: none;
  18. }
  19. </head>
  20.  
  21. <body>
  22. <div id="searchTools">
  23. <label title="Search For">Search For: </label>
  24. <input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
  25. </div>
  26. <div id="inputWrap">
  27. <label>
  28. <input type="checkbox" id="advanced" />
  29. </label>
  30. <label>Advanced Search Options</label>
  31.  


Anyone know why?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 13th, 2009, 8:57 pm

  • Nightslyr
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Sep 21, 2005
  • Posts: 274
  • Status: Offline

Post May 14th, 2009, 11:47 am

Well, first, your code doesn't make much sense from a logical standpoint. You essentially have:

If 'advanced' has been checked:
when 'advanced' is clicked, show an element.
Else:
when 'advanced' is clicked, hide an element.

It's extraneous as a click on 'advanced' is the same as whether or not it's been checked.

Instead, why not tie everything to a toggle?

Code: [ Select ]
$("#advanced").toggle(
function()
{
$("#searchtools").show("blind", { direction: "vertical" }, 700);
},
function()
{
$("#searchtools").hide("blind", { direction: "vertical" }, 700);
});
  1. $("#advanced").toggle(
  2. function()
  3. {
  4. $("#searchtools").show("blind", { direction: "vertical" }, 700);
  5. },
  6. function()
  7. {
  8. $("#searchtools").hide("blind", { direction: "vertical" }, 700);
  9. });


I've never used the UI component of jQuery, but I don't see why a simple toggle wouldn't suffice.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 14th, 2009, 12:30 pm

just tried your suggestion and it didn't do anything, though I do think your .toggle solution sounds easier. Any ideas as to why it's not working?
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 14th, 2009, 2:24 pm

check it out guys, finally got it working. I found a jQuery effect called slideToggle. I'll go ahead and explain what's going on for anyone who needs it.

The code:

Code: [ Select ]
Javascript Code
$(document).ready(function() {
  $('#searchtools').hide();
  $('#advanced').click(function() {
    $('#searchTools').slideToggle(1000);
    return false;
  });
});
  1. Javascript Code
  2. $(document).ready(function() {
  3.   $('#searchtools').hide();
  4.   $('#advanced').click(function() {
  5.     $('#searchTools').slideToggle(1000);
  6.     return false;
  7.   });
  8. });


Code: [ Select ]
HTML Code:
<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>
 
  1. HTML Code:
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>MusicBrainz!</title>
  6. <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  7. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  8. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
  9. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
  10. <script type="text/javascript" src="js/divgrow.js"></script>
  11.  
  12. <style type="css/text">
  13. #seachTools {
  14.         display: none;
  15.     height: 220px;
  16.     width: 450px;
  17.     overflow: hidden;
  18.     display: none;
  19. }
  20. </head>
  21.  
  22. <body>
  23. <div id="searchTools">
  24. <label title="Search For">Search For: </label>
  25. <input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
  26. </div>
  27. <div id="inputWrap">
  28. <label>
  29. <input type="checkbox" id="advanced" />
  30. </label>
  31. <label>Advanced Search Options</label>
  32.  




The first part of the javascript tells the document to hide the div that has the id "searchTools" before the page loads:
Code: [ Select ]
 
// The first line asks the document if it's ready to load:
$(document).ready(function() {
 
//When the document is ready to load, but before it actually does,
//this line tell the document to hide the div "searchTools."
  $('#searchtools').hide();
 
  1.  
  2. // The first line asks the document if it's ready to load:
  3. $(document).ready(function() {
  4.  
  5. //When the document is ready to load, but before it actually does,
  6. //this line tell the document to hide the div "searchTools."
  7.   $('#searchtools').hide();
  8.  


This second part initiates when the user has triggered an event:
Code: [ Select ]
 
//This line initiates the next line whenever the user clicks on the checkbox with the id "advanced"
  $('#advanced').click(function() {
 
//This line tells the div with the id "searchTools"
//to unhide with a verticle sliding motion (slideToggle)
//and to take 1000 milliseconds to complete.
    $('#searchTools').slideToggle(1000);
 
  1.  
  2. //This line initiates the next line whenever the user clicks on the checkbox with the id "advanced"
  3.   $('#advanced').click(function() {
  4.  
  5. //This line tells the div with the id "searchTools"
  6. //to unhide with a verticle sliding motion (slideToggle)
  7. //and to take 1000 milliseconds to complete.
  8.     $('#searchTools').slideToggle(1000);
  9.  


Of course this is to my best understanding of a language (javascript) that I've just began to dip into only 2 days ago. So anyone with the knowhow who thinks I've explained this wrong, please feel free to correct me.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 119 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.