How to Resolve Two Interfering Javascript Functions

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I have two functions. One shrinks a div to 0px high; and the other resizes it to 225px high. Each is called by an event handler in a radio group. Here's is some example code.
Code: [ Select ]
<html>
<head>
<style type="text/javascript">
function grow(id) {
    h=document.getElementById(id).offsetHeight;
    if(h<75) {
        document.getElementById(id).style.height=h+15+'px';
    }
    else if(h<150) {
        document.getElementById(id).style.height=h+10+'px';
    }
    else if(h<250) {
        document.getElementById(id).style.height=h+5+'px';
    }
}   
 
function shrink(id) {
    h=document.getElementById(id).offsetHeight;
    if(h>200) {
        document.getElementById(id).style.height=h-25+'px';
    }
    else if(h>150) {
        document.getElementById(id).style.height=h-10+'px';
    }
    else if(h>0) {
        document.getElementById(id).style.height=h-5+'px';
    }
}
</style>
 
<style type="text/css">
#the_div {
    height: 0px;
        border: #000 solid 2px;
    overflow: hidden;
}
</style>
</head>
 
 
<body>
<div id="the_div"></div>
            <label>Advanced Search Options: </label>
            <br />
                <label>
                <input name="RadioGroup1" type="radio" id="RadioGroup1_0" onclick="setInterval('grow(\'the_div\')',20);" value="radio" />
            </label>
                <label>On</label>
            <br />
                <label>
                <input name="RadioGroup1" type="radio" id="RadioGroup1_1" onclick="setInterval('shrink(\'the_div\')',20);" value="radio" checked="checked" />
                </label>
                <label> Off</label>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <style type="text/javascript">
  4. function grow(id) {
  5.     h=document.getElementById(id).offsetHeight;
  6.     if(h<75) {
  7.         document.getElementById(id).style.height=h+15+'px';
  8.     }
  9.     else if(h<150) {
  10.         document.getElementById(id).style.height=h+10+'px';
  11.     }
  12.     else if(h<250) {
  13.         document.getElementById(id).style.height=h+5+'px';
  14.     }
  15. }   
  16.  
  17. function shrink(id) {
  18.     h=document.getElementById(id).offsetHeight;
  19.     if(h>200) {
  20.         document.getElementById(id).style.height=h-25+'px';
  21.     }
  22.     else if(h>150) {
  23.         document.getElementById(id).style.height=h-10+'px';
  24.     }
  25.     else if(h>0) {
  26.         document.getElementById(id).style.height=h-5+'px';
  27.     }
  28. }
  29. </style>
  30.  
  31. <style type="text/css">
  32. #the_div {
  33.     height: 0px;
  34.         border: #000 solid 2px;
  35.     overflow: hidden;
  36. }
  37. </style>
  38. </head>
  39.  
  40.  
  41. <body>
  42. <div id="the_div"></div>
  43.             <label>Advanced Search Options: </label>
  44.             <br />
  45.                 <label>
  46.                 <input name="RadioGroup1" type="radio" id="RadioGroup1_0" onclick="setInterval('grow(\'the_div\')',20);" value="radio" />
  47.             </label>
  48.                 <label>On</label>
  49.             <br />
  50.                 <label>
  51.                 <input name="RadioGroup1" type="radio" id="RadioGroup1_1" onclick="setInterval('shrink(\'the_div\')',20);" value="radio" checked="checked" />
  52.                 </label>
  53.                 <label> Off</label>
  54. </body>
  55. </html>
  56.  


You can watch them fight for power here:
http://xaetrex.net/voltecdesign/mockup/

Switch from off to on and watch what happens. They're obviously trying to work but it's not going very well. Anyone know why?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

The issue is that the intervals aren't cleared when your if's complete or a different action is taken - there are better ways to achieve what you're after. Would you be opposed to learning a spot of jQuery for this?

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
   
    <script>    
      $(document).ready(function(){
          $("button").click(function () {
              $("#the_div").toggle("slow");
          });
      });
    </script>
   
  </head>
 
  <body>
    <button>Toggle</button>
    <div id="the_div" style="height: 200px; width: 200px; background-color: #ccc;"></div>
  </body>
 
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4.   <head>
  5.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  6.    
  7.     <script>    
  8.       $(document).ready(function(){
  9.           $("button").click(function () {
  10.               $("#the_div").toggle("slow");
  11.           });
  12.       });
  13.     </script>
  14.    
  15.   </head>
  16.  
  17.   <body>
  18.     <button>Toggle</button>
  19.     <div id="the_div" style="height: 200px; width: 200px; background-color: #ccc;"></div>
  20.   </body>
  21.  
  22. </html>
  23.  


See it in action here
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

not at all, although I don't want to stretch myself too thin on this javascript learning process. I'll give this a try and get back to you in a few minutes.

Would you mind explaining what's going on in the code? What should I be looking for in the source link: http://code.jquery.com/jquery-latest.js.

And is it possible to keep the width constant. i.e. change properties of the jQuery parameters.?
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

why do you use 20 milliseconds ?

do you want to grow and shrink it after 20sec automatically?

I guess only one thing you want. either shrink or grow?

if you want both, they will fight :D

if you don't want automatically then just remove the setinterval function?

I really don't understand what you wanted to do here?!

If you wanted to shrink when grown full and grow when shrink all then you can think of seTimeout function called appropriately under the functions.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

dark_lord - the intent is to toggle shrink/grow of the div (make it grow visible, make it shrink hide). The 20 mil is to 'animate' the grow/shrink. Image the code with clearInterval's appropriately established and you may get the gist.

Click on - the div grows into place
Click off - the div shrinks away and hides

Both motions appear 'animated' due to the intervals
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I want it to grow when you choose on, and shrink when you choose off. If I use setTimeout within the function than the function initializes on page load so I have to call setTimeout within an event caller. I want "the_div" to increase or decrease in size (depending on what radio button is clicked) incrementally until it reaches the thresholds (0px for shrink, and 225 for grow).

Edit:er, yeah...what UPSguy said, lol. I guess we posted at the same time.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You have your code set up right - the problem is that you don't clear the intervals properly (probably my bad for not introducing that with my example code in the other thread).

You have to imagine it like this - when you hit On or Off, you're essentially saying "call this function every 20 milliseconds". Even after the threshold is reached, the function is still being called, it's just that there's no more work to be done, so the div does not change.

Now when you click the opposing choice, you tell that one the same thing, and then you have two functions "fighting". Once the shrink does enough to drop the height below the threshold, the grow immediately reverses the effect, giving the appearance of conflict.

So what if you clear the interval once the threshold is reached? Still not good enough, because in the event that someone were to click On and then click Off before the div was finished 'growing', then you would have the same conflict.

I recommended jQuery here as to maybe avoid some global vars of eventlisteners.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

ok, you've sold me on jquery and I think I'll do the research on it. For now though, I need this mock-up fairly soon for the company to review. How would I clear the interval? I'd like to use this code until I figure out all the workings of jQuery over the next day or two.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

ok, I found this but am not sure how to apply it to my code:
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/clearIntervalExample.htm

I'm thinking I can set up the clearInterval at the end of my functions "grow" and "shrink." Maybe something like this but this isn't working; I know it's wrong. I can at least look at it and know it's wrong; I just don't know why :( :
Code: [ Select ]
function grow(id) {
    h=document.getElementById(id).offsetHeight;
    if(h<75) {
        document.getElementById(id).style.height=h+15+'px';
    }
    else if(h<150) {
        document.getElementById(id).style.height=h+10+'px';
    }
    else if(h<250) {
        document.getElementById(id).style.height=h+5+'px';
    }
    else if (h==250) {
                window.clearInterval(20);
    }
}   
  1. function grow(id) {
  2.     h=document.getElementById(id).offsetHeight;
  3.     if(h<75) {
  4.         document.getElementById(id).style.height=h+15+'px';
  5.     }
  6.     else if(h<150) {
  7.         document.getElementById(id).style.height=h+10+'px';
  8.     }
  9.     else if(h<250) {
  10.         document.getElementById(id).style.height=h+5+'px';
  11.     }
  12.     else if (h==250) {
  13.                 window.clearInterval(20);
  14.     }
  15. }   
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Quote:
So what if you clear the interval once the threshold is reached? Still not good enough, because in the event that someone were to click On and then click Off before the div was finished 'growing', then you would have the same conflict.


That should answer the last question. If I foresaw a simple solution, I would have thrown it together for you, but I took you down the jQuery path for that very reason. I would prefer to let the framework do the heavy lifting for me. Maybe someone else will see a simple fix that I overlooked and code it up for you.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Okay, hopefully I can get this jQuery thing down quick enough. Thanks a ton for the help again, your knowledge and quick responses make you an outstanding asset to this forum.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Thanks :) Once you get up their in knowledge, you may decide I'm not as useful as you think, lol. Glad I could help. jQuery is one of my favs, so if you hit anything further, be sure to shout out for us.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

MFS, if it's ok, I'll post my response to your request to break down the code here in the thread. Let's help whomever else may need assistance with a similar problem in the future by sharing the info with them, too.

I'm sure you're ok with the HTML in the page, so we'll skip that. For the sake of brevity, let's just jump over the head section and briefly mention that there's nothing tricky about the button or the div. Nothing new here.

Now, back up in those script tags we're looking at a bit of confusion, so let's break it down...

Code: [ Select ]
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
  1.  
  2. <script src="http://code.jquery.com/jquery-latest.js"></script>
  3.  


Nothing unusual here. It's just a simple JavaScript include. What's worth mentioning, however, is that you're importing the jQuery functionality via this include. This linked file contains all the functions that make jQuery what it is.

Code: [ Select ]
 
$
 
  1.  
  2. $
  3.  


This, for example - the plain dollar sign - is a jQuery function. Notice the similarity. Functions are typically called by using the name followed by parentheses enclosing the parameters: someFunction(param). So $('#the_div') is no different. What this function does, however, is very important. This function essentially acts as a selector. I put in some form of query and out pops a jQuery reference to that object (or objects, but let's keep it simple). In the example, we're specifying a div by ID, not unlike how we would define the style in css. So, now that we know we're dealing with objects, let's look at the code again.

Code: [ Select ]
 
$(document).ready(function(){
           $("button").click(function () {
               $("#the_div").toggle("slow");
           });
       });
 
  1.  
  2. $(document).ready(function(){
  3.            $("button").click(function () {
  4.                $("#the_div").toggle("slow");
  5.            });
  6.        });
  7.  


Ok, we know that js code in the head tag of a document is processed as it's encountered (so to speak - don't get technical on me, we're playing simple here). We also don't see a function being defined in the typical sense of usage, so we can assume that this must be a command that will be processed when it is seen. I think we can now safely derive that "$(document)" is referencing the document object. We know that we use the period ('.') to access members of things, so ".ready()", ".click()", and ".toggle()" must be functions of that selector we talked about. A little digging in the jQuery documentation and we can find out exactly what each of these functions do.

One final thing I want to point out before we go to pseudocode. Functions can be passed as parameters, and at the same time, be defined in place. Most of the time when you see this in jQuery, what you're looking at is a tag along function (telling the function that when it figures out what that leading part is, assign this to it). Have a look at these two bits:

Code: [ Select ]
 
-------------------------------------
$(document).ready(function(){
           $("button").click
-------------------------------------
$("button").click(function () {
#               $("#the_div").toggle
-------------------------------------
 
  1.  
  2. -------------------------------------
  3. $(document).ready(function(){
  4.            $("button").click
  5. -------------------------------------
  6. $("button").click(function () {
  7. #               $("#the_div").toggle
  8. -------------------------------------
  9.  


The first says when you're finished figuring out what that 'ready' function is referring to, give it this button.click function. The second portion says hey, when you figure out where that button.click is, tell it to do this toggle function.

Almost there...

Code: [ Select ]
 
$(document).ready(function(){
           $("button").click(function () {
               $("#the_div").toggle("slow");
           });
       });
 
  1.  
  2. $(document).ready(function(){
  3.            $("button").click(function () {
  4.                $("#the_div").toggle("slow");
  5.            });
  6.        });
  7.  


Here's how the whole thing translates:

We're saying that when the document is ready, I want you to assign this toggle action to the click of this button that we're specifying. We can reference the docs one last time and see that toggle is just another jQuery function that essentially animates the showing and hiding of an element on the page. So, that's what we have - when the user pushes the button, we tell jQuery to toggle the div.

For this purpose, we don't care how jQuery decides which action it needs to take or how it's going to look as it does it (outside of the obvious 'slow' parameter), we just care that it gets done.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Wow, that is really awesome. So basically '$' is the jQuery function to find something like '.button' , '.click', or '.toggle' inside of the jQuery file. Is that a correct interpretation?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

hmm, close - the dollar-sign function is more akin to javascript DOM object selectors. Consider the following snippets.

CSS selector for defining styles on a div by id:
Code: [ Select ]
 
div#myDiv { color: black; }
 
  1.  
  2. div#myDiv { color: black; }
  3.  


JavaScript method of getting a div by id:
Code: [ Select ]
 
document.getElementById('myDiv')
 
  1.  
  2. document.getElementById('myDiv')
  3.  


And jQuery's way to select a div by id:
Code: [ Select ]
 
$('#myDiv')
 
  1.  
  2. $('#myDiv')
  3.  


the '.button' , '.click', and '.toggle' are all jQuery functions being called on the element object. In the same way that javascript knows that 'getElementById' is a function that can be called on document, jQuery knows that .click is a method that can be called on selected object.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Okay, that makes sense. So back to the code; it seems as though the .toggle function shrinks to nothing from whatever it starts with and than back to where it started, but I want the opposite. I need an object the grows to what I want it to grow to, and shrink back to nothing.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

It seems like you've been working on this pretty intently all day, so just wanted to let you know that I'm off for the evening, but please feel free to share any further questions you may have and perhaps some of my friends can maybe continue where we've left off. If they don't get back to you, I'll be back on in the AM to give you a hand.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Well if you skip the first step, then that's exactly what jQuery is doing for you...

Add 'display: none;' to the div style and then your page will start blank and grow the object you want.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

now that I have a bit more understanding of jQuery, I was able to do a couple searches and think I'm close:
http://docs.jquery.com/UI/Effects/Blind

I think I need this and I've set the direction to vertical and the mode to ".show" but it's not working. Switched to a checkbox in my html and used the jQuery event handler ".click"

Here's what it looks like:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<link href="main.css" rel="stylesheet" type="text/css" />
 
  <script type="text/javascript">
  $(document).ready(function(){
   
$("#advanced").click(function () {
      $("#the_div").show("blind", { direction: "vertical" }, 1000);
});
 
  });
  </script>
 
<style type="text/css">
#the_div {
    height: 0px;
    width: 0px;
    overflow: hidden;
}
</style
 
</head>
 
<body>
 
<div id="the_div"></div>
<label>
  <input type="checkbox" id="advanced" /></label>
  <label>Advanced Search Options</label>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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.  
  7. <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  8. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  9. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
  10. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
  11. <link href="main.css" rel="stylesheet" type="text/css" />
  12.  
  13.   <script type="text/javascript">
  14.   $(document).ready(function(){
  15.    
  16. $("#advanced").click(function () {
  17.       $("#the_div").show("blind", { direction: "vertical" }, 1000);
  18. });
  19.  
  20.   });
  21.   </script>
  22.  
  23. <style type="text/css">
  24. #the_div {
  25.     height: 0px;
  26.     width: 0px;
  27.     overflow: hidden;
  28. }
  29. </style
  30.  
  31. </head>
  32.  
  33. <body>
  34.  
  35. <div id="the_div"></div>
  36. <label>
  37.   <input type="checkbox" id="advanced" /></label>
  38.   <label>Advanced Search Options</label>
  39.  


I'm close...I can feel it. What have I done wrong here?

Edit: Just saw your post on adding display:none; I guess we were posting at the same time. This worked...sorta, but I'm almost positive I can fix the rest, seems like an html/css issue now. Thanks again for the incredible amount of help you've given, have a good night.
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

UPSGuy wrote:
dark_lord - the intent is to toggle shrink/grow of the div (make it grow visible, make it shrink hide). The 20 mil is to 'animate' the grow/shrink. Image the code with clearInterval's appropriately established and you may get the gist.

Click on - the div grows into place
Click off - the div shrinks away and hides

Both motions appear 'animated' due to the intervals

okay... I understood now

hello mind, check if this works
Code: [ Select ]
 
 <html>
 <head>
 <style type="text/javascript">
 function grow(id) {
     h=document.getElementById(id).offsetHeight;
     if(h<75) {
         document.getElementById(id).style.height=h+15+'px';
    window.setTimeout("grow(id);",20);
     }
     else if(h<150) {
         document.getElementById(id).style.height=h+10+'px';
    window.setTimeout("grow(id);",20);
     }
     else if(h<250) {
         document.getElementById(id).style.height=h+5+'px';
    window.setTimeout("grow(id);",20);
     }
 }  
 
 function shrink(id) {
     h=document.getElementById(id).offsetHeight;
     if(h>200) {
         document.getElementById(id).style.height=h-25+'px';
    window.setTimeout("shrink(id);",20);
     }
     else if(h>150) {
         document.getElementById(id).style.height=h-10+'px';
    window.setTimeout("shrink(id);",20);
     }
     else if(h>0) {
         document.getElementById(id).style.height=h-5+'px';
    window.setTimeout("shrink(id);",20);
     }
 }
 </style>
 
 <style type="text/css">
 the_div {
     height: 0px;
         border: 000 solid 2px;
     overflow: hidden;
 }
 </style>
 </head>
 
 
 <body>
 <div id="the_div"></div>
             <label>Advanced Search Options: </label>
             <br />
                 <label>
                 <input name="RadioGroup1" type="radio" id="RadioGroup1_0" onclick="grow(id);" value="radio" />
             </label>
                 <label>On</label>
             <br />
                 <label>
                 <input name="RadioGroup1" type="radio" id="RadioGroup1_1" onclick="shrink(id);" value="radio" checked="checked" />
                 </label>
                 <label> Off</label>
 </body>
 </html>
 
  1.  
  2.  <html>
  3.  <head>
  4.  <style type="text/javascript">
  5.  function grow(id) {
  6.      h=document.getElementById(id).offsetHeight;
  7.      if(h<75) {
  8.          document.getElementById(id).style.height=h+15+'px';
  9.     window.setTimeout("grow(id);",20);
  10.      }
  11.      else if(h<150) {
  12.          document.getElementById(id).style.height=h+10+'px';
  13.     window.setTimeout("grow(id);",20);
  14.      }
  15.      else if(h<250) {
  16.          document.getElementById(id).style.height=h+5+'px';
  17.     window.setTimeout("grow(id);",20);
  18.      }
  19.  }  
  20.  
  21.  function shrink(id) {
  22.      h=document.getElementById(id).offsetHeight;
  23.      if(h>200) {
  24.          document.getElementById(id).style.height=h-25+'px';
  25.     window.setTimeout("shrink(id);",20);
  26.      }
  27.      else if(h>150) {
  28.          document.getElementById(id).style.height=h-10+'px';
  29.     window.setTimeout("shrink(id);",20);
  30.      }
  31.      else if(h>0) {
  32.          document.getElementById(id).style.height=h-5+'px';
  33.     window.setTimeout("shrink(id);",20);
  34.      }
  35.  }
  36.  </style>
  37.  
  38.  <style type="text/css">
  39.  the_div {
  40.      height: 0px;
  41.          border: 000 solid 2px;
  42.      overflow: hidden;
  43.  }
  44.  </style>
  45.  </head>
  46.  
  47.  
  48.  <body>
  49.  <div id="the_div"></div>
  50.              <label>Advanced Search Options: </label>
  51.              <br />
  52.                  <label>
  53.                  <input name="RadioGroup1" type="radio" id="RadioGroup1_0" onclick="grow(id);" value="radio" />
  54.              </label>
  55.                  <label>On</label>
  56.              <br />
  57.                  <label>
  58.                  <input name="RadioGroup1" type="radio" id="RadioGroup1_1" onclick="shrink(id);" value="radio" checked="checked" />
  59.                  </label>
  60.                  <label> Off</label>
  61.  </body>
  62.  </html>
  63.  


Edit: I didn't follow other posts, so if u have better solutions go for that :)
  • gkumar
  • Beginner
  • Beginner
  • gkumar
  • Posts: 39

Post 3+ Months Ago

I have two separate (but similar) bits of jQuery code. They both work, but interfere with each other. How do I properly format these functions to be unique and stop them effecting each other.

code 1.
Code: [ Select ]
$('#share-email').click(function(e) {
            e.preventDefault();
            $("#socialbox-" + $(this).attr('rel')).load('<?php echo site_url();?>club/sendtofriend/' + $(this).attr('rel'));
        return false;
        });
        $().ajaxSend(function(r,s){
                $(".social-share-container").fadeOut('fast');
        });
        $().ajaxStop(function(r,s){
                $(".social-share-container").fadeIn('fast');
        });
  1. $('#share-email').click(function(e) {
  2.             e.preventDefault();
  3.             $("#socialbox-" + $(this).attr('rel')).load('<?php echo site_url();?>club/sendtofriend/' + $(this).attr('rel'));
  4.         return false;
  5.         });
  6.         $().ajaxSend(function(r,s){
  7.                 $(".social-share-container").fadeOut('fast');
  8.         });
  9.         $().ajaxStop(function(r,s){
  10.                 $(".social-share-container").fadeIn('fast');
  11.         });

code 2.
Code: [ Select ]
$('.djlink').click(function(e) {
            e.preventDefault();
            $("#djinfo").load($(this).attr('href'), Cufon.refresh);
        return false;
        });
        $().ajaxSend(function(r,s){
                $("#djinfo").fadeOut('fast');
        });
        $().ajaxStop(function(r,s){
                $("#djinfo").fadeIn('fast');
        });
  1. $('.djlink').click(function(e) {
  2.             e.preventDefault();
  3.             $("#djinfo").load($(this).attr('href'), Cufon.refresh);
  4.         return false;
  5.         });
  6.         $().ajaxSend(function(r,s){
  7.                 $("#djinfo").fadeOut('fast');
  8.         });
  9.         $().ajaxStop(function(r,s){
  10.                 $("#djinfo").fadeIn('fast');
  11.         });
Moderator Remark: Use [code][/code] to encapsulate code snippets
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

What's conflicting between them? Have an example page up?

Post Information

  • Total Posts in this topic: 22 posts
  • Users browsing this forum: No registered users and 88 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.