Back To Programming / Scripting / Coding Forum

How to Resolve Two Interfering Javascript Functions

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

Post May 13th, 2009, 6:38 pm

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.
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, 6:38 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post May 13th, 2009, 6:38 pm

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.
I'd love to change the world, but they won't give me the source code.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post May 13th, 2009, 6:41 pm

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.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 13th, 2009, 6:56 pm

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.
Use your words like arrows to shoot toward your goal.
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jan 14, 2009
  • Posts: 162
  • Loc: India-Kolkata
  • Status: Offline

Post May 14th, 2009, 9:39 pm

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 :)
Wrap Up your Big Url | Mariana World Community
  • gkumar
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Jul 28, 2009
  • Posts: 39
  • Status: Offline

Post July 28th, 2009, 11:42 pm

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
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post July 29th, 2009, 4:04 am

What's conflicting between them? Have an example page up?
I'd love to change the world, but they won't give me the source code.

1, 2

Post Information

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