combine functions

**ggalan** · 02-23-2010, 03:27 PM

is there a way to combine these 2 functions since they do the same thing?

Code:

$(document).ready(function(){
    $("img").click(function () {
      $("img").fadeOut("slow");
    });
  });
   $(document).ready(function(){
    $("p").click(function () {
      $("p").fadeOut("slow");
    });
  });

**jscheuer1** · 02-23-2010, 04:30 PM

Code:

$(document).ready(function(){
    $("img").click(function () {
      $("img").fadeOut("slow");
    });
    $("p").click(function () {
      $("p").fadeOut("slow");
    });
  });

or:

Code:

$(document).ready(function(){
    $("img, p").click(function () {
      $("img, p").fadeOut("slow");
    });
  });

or even:

Code:

$(function(){
    $("img, p").click(function () {
      $("img, p").fadeOut("slow");
    });
  });

**ggalan** · 02-23-2010, 04:57 PM

thank you

**bill.onthebeach** · 02-27-2010, 01:43 PM

does this solution cause the two .click events to run simultaneously or independently?

my app needs multiple .click events each with a different element to run independently of each other.

will play with this, while awaiting a reply.

thanks
bill

**jscheuer1** · 02-27-2010, 05:02 PM

It depends upon which method of combining you use. The first method in my previous post will keep things the most separate. Experiment.

**bill.onthebeach** · 02-27-2010, 05:07 PM

thanks john!
I just need a push to get out of the ditch on this!

I'm thinking it's all in the punctuation, but . . . .

this is what I have:

Code:

$(document).ready(function(){

$(".left_trigger").click(function(){
		$(".left_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

	$(".right_trigger").click(function(){
		$(".right_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

    $(".bottomleft_trigger").click(function(){
		$(".bottomleft_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

});

**jscheuer1** · 02-27-2010, 05:19 PM

Looks fine to me. What's it doing that you don't want it to? Or what's it not doing that you want it to?

Please post a link to a page on your site that contains the problematic code so we can check it out.

**bill.onthebeach** · 02-27-2010, 05:29 PM

John, this page is still in the editor and not online.

the setup up is this:

one webpage with three minipages, or sliding panels
one topright
one topleft
one bottomleft

with working css and html in the editor, I can make each one work.

what I cannot do yet, which is the whole thing, is get all three to be active onload simulataneously. they should be ready so when the user event .click occurs, the panel opens. The user cannot click in three places at one time so there should not be a problem with multiple panels being clicked to open and then clicked to close.

what you are looking at gives an error message having something to do with punctuation, i.e. } or ) or ; depending on what combination is being tested, after several hours of this, I just have NOT found the right combination.

thanks,
bill

**jscheuer1** · 02-27-2010, 07:12 PM

Well, what you posted looks syntactically correct. In fact, if I run it on a page by itself using jQuery 1.4.2 and using a very rudimentary markup reflecting the classes named in the code:

Code:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".left_trigger").click(function(){
		$(".left_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

	$(".right_trigger").click(function(){
		$(".right_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

    $(".bottomleft_trigger").click(function(){
		$(".bottomleft_panel").toggle("medium");
		$(this).toggleClass("active");
		return false;
	});

});
</script>

</head>
<body>
<div class="left_trigger">
left_trigger
</div>
<div class="left_panel">
left_panel
</div>
<div class="right_trigger">
right_trigger
</div>
<div class="right_panel">
right_panel
</div>
<div class="bottomleft_trigger">
bottomleft_trigger
</div>
<div class="bottomleft_panel">
bottomleft_panel
</div>
</body>
</html>

it gives no error. And it does what its code dictates, toggling both the display of panels and the class names of the triggers.

**bill.onthebeach** · 02-27-2010, 07:17 PM

thank you john!

let me put it in the editor and set what happens.
I am a little nervous about this editor, it seems a times it is picking up noise from somewhere causing connections between html and css to break. have you ever heard of anything like that?

Anyway, give me a few minutes and I'll let you know how it works.

bill

Thread: combine functions

Thread Tools

Search Thread

combine functions

same question, different way!

Bookmarks

Bookmarks

Posting Permissions