How can I reuse a JavaScript function many times in the same page?

Question

I have the following code:

Javascript:

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
 $(function() {
 var transition = 'slow';
 var target = $('#somediv');
 target.delay(5000).fadeIn();
 });
 </script>

HTML:

 <div id="somediv">Some Content</div>
 <div id="second_div">Some second content</div>
 <div id="third_div">Some third content</div>

So as you can see the above function will work with #somediv but how do I reuse the same function for #second_div and #third_div?

I am new to Javascript so please pardon me if this is a stupid question. Thanks!

@zoltanToth thanks but the thing is i want to time each div separately... — KPO
– KPO, Commented Dec 4, 2012 at 19:45
While most people here discourage links to w3schools, I think you're at such an early level that you could benefit from this. Once you think you know what you're doing, try MDN instead as a more thorough and reliable reference. — Blazemonger
– Blazemonger, Commented Dec 4, 2012 at 19:52

Renato Gama · Accepted Answer · 2012-12-04 19:50:19Z

3

<script type="text/javascript">
 $(function(){
    fade($("#yourElement"), 5000)
 });

 function fade(element, delay) {
     var transition = 'slow';
     var target = element;
     target.delay(delay).fadeIn();
 }
</script>

Then you can pass the object itself wherever you want, like:

fade($("#yourOtherElement"), 1000);

Note that you can pass different time delays, or can optionally even set a default time delay:

function fade(element, delay) {
    if(typeof delay === 'undefined') delay = 5000;

     var transition = 'slow';
     var target = element;
     target.delay(delay).fadeIn();
 }

Then if you wanna use the default time delay just pass the first argument:

fade($("#yourOtherElement")); //will have 5000ms as delay time

edited Dec 4, 2012 at 19:50

answered Dec 4, 2012 at 19:44

Renato Gama

16.6k12 gold badges64 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blazemonger · Accepted Answer · 2012-12-04 19:55:08Z

2

Use an argument:

function stuff(idstr) {
   var transition = 'slow';
   var target = $('#'+idstr);
   target.delay(5000).fadeIn();
};

$(function() {
   stuff('somediv');
   stuff('second_div');
   stuff('third_div');
});

If you want to change the timing delay, pass a second argument for that number:

function stuff(idstr, del) {
   var transition = 'slow';
   var target = $('#'+idstr);
   target.delay(del).fadeIn();
};

$(function() {
   stuff('somediv',5000);
   stuff('second_div',2000);
   stuff('third_div',3000);
});

http://jsfiddle.net/mblase75/cnH7d/

edited Dec 4, 2012 at 19:55

answered Dec 4, 2012 at 19:44

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

1 Comment

KPO Over a year ago

Thanks. I tried it as you have it but it wouldn't work. Besides changing the div# is there anything else that i have to modify for it to work on mine?

Nick Rolando · Accepted Answer · 2012-12-04 19:50:43Z

1

If you have a containing div, you could make a jquery selector like this to get all 3 divs

  <div id="somediv">Some Content</div>
  <div id="second_div">Some second content</div>
  <div id="third_div">Some third content</div>

js:

$(function() {
 var transition = 'slow';
 var target1 = $('#somediv');
 var target2 = $('#second_div');
 var target3 = $('#third_div');
 target1.delay(5000).fadeIn();
 target2.delay(target2Time).fadeIn();
 target3.delay(target3Time).fadeIn();
 });

edited Dec 4, 2012 at 19:50

answered Dec 4, 2012 at 19:44

Nick Rolando

26.2k13 gold badges84 silver badges120 bronze badges

4 Comments

KPO Over a year ago

Thanks but i want different time delay for different divs.

Nick Rolando Over a year ago

I see. In that case, you can just get all 3 separately and set them accordingly. See the edit I made.

Blazemonger Over a year ago

@KPO You really should have put that in the original question, then.

KPO Over a year ago

Thanks @shredder! Worked like a charm.

jchapa · Accepted Answer · 2012-12-04 19:44:25Z

1

Pass it in as a parameter:

<script type="text/javascript">
    function divFunc(divId, timeDelay) {
        var transition = 'slow';
        var target = $("#" + divId);
        target.delay(timeDelay).fadeIn();
    }
</script>

answered Dec 4, 2012 at 19:44

jchapa

4,0363 gold badges29 silver badges38 bronze badges

3 Comments

KPO Over a year ago

Thanks but I ahve to use different time delay for different divs.

KPO Over a year ago

Thanks but I am a bit confused as to how to call the function for each div then. Again I am sorry if this is obvious, i am a bit new to this.

jchapa Over a year ago

When you want to call the function, just do: divFunc('somediv', 3000);, just replacing the div and the time with what you want. Call it for each div. When do you want to call this function?

kannanrbk · Accepted Answer · 2012-12-04 19:47:00Z

1

function fade(selector){
    var target = $(selector);
    target.delay(5000).fadeIn();
}

fade('#div1') , fade('#div2') you can pass any jquery selector as a input to this function to fade it.

answered Dec 4, 2012 at 19:47

kannanrbk

7,18413 gold badges59 silver badges97 bronze badges

Collectives™ on Stack Overflow

How can I reuse a JavaScript function many times in the same page?

5 Answers 5

Comments

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related