Use function to write to .js file

Question

I've never particularly used JS much, with the exception of basic animations,

The page I'm working on requires me to fade out the active div and fade the requested one in, I have around 25 different div's I'll be fading between. At the minute I can't think of how to only fade the active one out so I'm trying to fade every div but the one that's requested out.

Here's the code I'm attempting to get working

    var active = 0;

for (i=0;i<array.length;i++) {
if (i != active){

document.write("$('."+array[i]+"').fadeOut(900);");
}

naturally i know the document.write shouldn't be there, but ideally that code has to be printed into the .js file I'm using, however. I don't have a clue how to print it to the .js.

any suggestions would be greatly appreciated, or a way to do this in php without a page reload!

replace document.write("$('."+array[i]+"').fadeOut(900);"); with $('."+array[i]+"').fadeOut(900); — RobertPitt
– RobertPitt, Commented Mar 31, 2011 at 14:51
if you define "active div" I expect some hints will be forthcoming — Alnitak
– Alnitak, Commented Mar 31, 2011 at 14:51
What ".js" are you printing to? Your document.write attempt looks totally hinky. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Mar 31, 2011 at 14:52
@RobertPitt: Or a variant that actually works, like $('.' + array[i]).fadeOut(900); — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Mar 31, 2011 at 14:52
What does "array" contain exactly? A list of divs? Can you post your HTML? — Gary Green
– Gary Green, Commented Mar 31, 2011 at 14:54

T.J. Crowder · Accepted Answer · 2011-03-31 15:11:03Z

When you find yourself generating code on the fly, it usually indicates that you want to take a step back and re-evaluate your approach. :-)

In this case, there's no need to create the JavaScript dynamically. It's just a matter of running the code.

I wasn't sure what your definition of "active" was, so here's something that fades divs in/out on the basis of what buttons you press:

The HTML:

<input type='button' value='1'>
<input type='button' value='2'>
<input type='button' value='3'>
<input type='button' value='4'>
<input type='button' value='5'>
<input type='button' value='6'>
<div id='container'>
  <div class='c1'>This is c1</div>
  <div class='c2'>This is c2</div>
  <div class='c3'>This is c3</div>
  <div class='c4'>This is c4</div>
  <div class='c5'>This is c5</div>
  <div class='c6'>This is c6</div>
</div>

The JavaScript (teaching version):

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    var divs = $("#container div");

    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    divs.not(".c" + val).fadeOut(900);
    divs.filter(".c" + val).fadeIn(900);
  });

});

Live copy

That does this:

Uses the jQuery ready function (the shortcut form where I just pass a function into the jQuery function) to run the code when the page is "ready" (the DOM has been built)
Looks up all divs we want to be dealing with. In my case, it's all the divs in a container, but you can use just about any CSS3 selector you want (and then some).
Uses not with a class selector to filter out the div that has the target class, then uses fadeOut to start fading the other ones out.
Uses filter to reduce the set to just our target div, and fadeIn to start fading it in.

That version is for clarity. Here's a more concise version (still perfectly clear to people who know jQuery well, but tricky for folks still finding their feet):

The JavaScript (chained version using end):

jQuery(function($) {

  // Hook our buttons; this selector hooks all of them,
  // so you probably want to narrow that down, but I
  // have no idea what your definition of "active" is,
  // so I made one up.
  $(":button").click(function() {

    // Get the value of the button, e.g., 1, 2
    var val = this.value; 

    // Get all of the divs in the container
    // Fade out all of the ones that aren't our target;
    // fade in the one that is
    $("#container div")
      .not(".c" + val).fadeOut(900)
      .end()
      .filter(".c" + val).fadeIn(900);
  });

});

Live copy

thanks for this one, it's a great basis to go off with what i'm aiming for!

Håvard · Accepted Answer · 2011-03-31 14:56:51Z

2

Not sure why you are using document.write instead of simply executing the javascript.

var active = 0;

for (i=0;i<array.length;i++) {
if (i != active) {
    $("."+array[i]).fadeOut(900);
}

Additionally, try using a jQuery selector to select all the non-active divs by adding an additional class to each div:

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + ")").fadeOut(900);

You could even just select the visible divs that are not the active one and fade them out:

var active = array[0];
var classname = "some_class";

$("div." + classname + ":not(." + active + "):visible").fadeOut(900);

answered Mar 31, 2011 at 14:56

Håvard

10.1k1 gold badge43 silver badges46 bronze badges

1 Comment

Alnitak Over a year ago

although it's better IMHO to use the .not() function rather than construct a selector string with :not() in it.

Collectives™ on Stack Overflow

Use function to write to .js file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related