PDA

View Full Version : combine functions



ggalan
02-23-2010, 03:27 PM
is there a way to combine these 2 functions since they do the same thing?



$(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
$(document).ready(function(){
$("img").click(function () {
$("img").fadeOut("slow");
});
$("p").click(function () {
$("p").fadeOut("slow");
});
});

or:


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

or even:


$(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:


$(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:


<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

bill.onthebeach
02-27-2010, 07:56 PM
you are the man!

your template works, just as you said.

its backwards for me, it closes instead of opens, but the wiring is sound. I can straighten the other out when I load it up with html & css.

I notice that your jquery reference is 1.4, mine is 1.3.2, but it's doubtful that is where the problem was.

Now, while I have your attention, this all runs off one js file,

what needs to happen when you have multiple scripts with multiple files and at what point is your capacity such that you need something like an AJAX engine?

I am sure that there are others out there who also would like to read your answer!

Thanks for your time and have a great weekend!
bill.onthebeach

jscheuer1
02-27-2010, 09:10 PM
The:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

is always to the latest 1.4.x version of jQuery (currently 1.4.2). It is a vast improvement over 1.2.x, but not much of one over 1.3.2. However, if you are using the current jQuery docs (http://docs.jquery.com/Main_Page), they are written for 1.4.2 (though will be updated whenever jQuery is updated), and there could be some minor differences to 1.3.2 as well as bug fixes over 1.3.2. Version 1.4.x is a big improvement speed wise though.

AJAX isn't generally required unless you are importing content to a page without reloading it and without using a frame or iframe. AJAX can also be employed for communicating with the server over various issues that ordinarily would require a form submission.

But if you just have a lot of scripts and files, AJAX doesn't have to be involved.

The jQuery library has an excellent AJAX interface though, as well as a few well written AJAX plug ins. So if you need AJAX, jQuery can be a good way to go. As with other jQuery methods, it helps to have a basic understanding of how things work without jQuery, but it isn't required to use the jQuery methods.

As to your earlier question about an editor - Some WYSIWYG editors can mangle code entered in 'code view' and/or when using their various 'insert' commands. It's not always that they mangle the code, though that does happen at times. Sometimes it's just that what the command you are choosing will do isn't made clear by the editor.

I prefer to use a context sensitive text only editor like the free vim or the free NotePad++ editors, and to preview the results locally in the browser. These editors will not do anything you don't type directly into them. But the drawback is that you have to know a little more about what you are doing than you have to with a WYSIWYG editor.

bill.onthebeach
03-01-2010, 03:30 PM
john,

here's a easy question for you!
I want the one event to do the three operations in one place:
what's missing here:


<html>
<head>

<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() {
$('.hello').click(function(){
$('.hello').hide );
var t=setTimeout(')",2000);
$('.ex').show );
return false;
});
});
</script>


<style type="text/css">

.ex {
visibility : hidden ;

</style>

</head>
<body>

<div class="hello"><a class="link" href="#">hello</a></div>

<div class="ex">good bye!</div>

</body>
</html>

thanks, bill

jscheuer1
03-01-2010, 06:44 PM
This:


var t=setTimeout(')",2000);

is garbage, probably throws an error or two just by itself. Get rid of that.

The syntax for hide and show are like:


$('.hello').hide();
$('.ex').show();

Without their open parentheses, they would also each throw an error.

Both hide and show govern the display style property of the element, not its visibility. Also your style declaration for the .ex class has no closing bracket. This will work:


<html>
<head>
<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() {
$('.hello').click(function(){
$('.hello').hide();
$('.ex').show();
return false;
});
});
</script>
<style type="text/css">
.ex {
display : none;
}
</style>
</head>
<body>
<div class="hello"><a class="link" href="#">hello</a></div>
<div class="ex">good bye!</div>
</body>
</html>

bill.onthebeach
03-01-2010, 08:11 PM
of course this works,

the timer was a typo, but it might be a good idea.

I have a pretty good understanding of programming and commands, its the js vocabulary that I need to catch up on.

And, I have been unable after extensive searching to find anything useful in the world of cyberhelp that speaks to js grammar.

I guess I will just have to breakdown and buy a book.
unless you know of a great "link".

thanks again,
bill.onthebeach



bill

jscheuer1
03-02-2010, 02:11 AM
Most sites (and books for that matter) that teach javascript aren't exactly vocab sites. But you can pick up the lingo at places like:

http://www.w3schools.com/JS/default.asp

and:

http://www.howtocreate.co.uk/tutorials/javascript/

and many others.

Since javascript is a computer language that requires no compilation to run, one of the easiest and best things to do is to take a working script you like and play with it to see what happens. Heck, do this with as many scripts as you can. Great way to learn the basics.

As with almost everything though, the best way to learn is to teach. Look around these forums and others for questions you know the answer to and help out. You will find yourself often rewarded with thanks, often with "sorry that didn't help me" (assuming folks are polite), as well as sometimes being stretched to learn something new to answer a particular question or its follow up.

bill.onthebeach
03-02-2010, 04:32 AM
thanks again John,

Since january when I started back hardcoding after several years of doing other things, I have relied upon W3schools extensively, more than everything else combined. The html and css parts are excellently and relavent. I got nothing but good things to say about their site bad. But, for me, the Javascript fundamentals somehow did not quite measure up to that level.

I got a couple of ideas about all this, if you are interested in "cyberhelp".

I certainly don't mine posting answers, as long as they are categories for which I feel competent. I have, among other things, been a nontraditional "teacher" for many years. :>}

Anyway, check this out!

the answer to the last question in "THREE" lines of javascript.

Best Regards, your "best" student!
bill.onthebeach


<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body {
margin: 0px
padding: 0px;
width: 100%;
background-color : #bf8000;
}
.first {
margin: auto;
padding: 0px;
width: 95%;
height:2000px;
background-color : #3b5998;
}

.second {
margin: auto;
padding: 0px;
width: 90%;
height:1000px;
background-color : #373737;
display: none;
}

</style>

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<div class="first"><button>Run</button></div>
<div class="second"></div>

<script>
$("button").click(function() {
$("div.first").fadeOut(4000);
$("div.second").delay(3000).fadeIn(6000);

});
</script>
</body>
</html>