Question

I’m just starting to get into JQuery so I apologize in advance if this is a simple question.

I’m working with the A List Apart article on Print Previews to try to get live Print Previews in the webapp that I’m working on. I’ve gotten it to work satisfactorily but I’m now trying to refactor my code to what I think it should look like internally. I currently have 2 sets of methods, one for displaying the block of microcopy and the other for removing it. I’d much rather just have a single set that toggles the appropriate values of the elements in question.

For the CSS that means disabling the non-print-preview sheets and enabling the print-preview one, and vice-versa. For my microcopy, that means setting display to block rather than none, again vice-versa.

At least for the the stylesheet links, I want to simply loop through the collection of related link elements and set disabled to !disabled but I can’t figure out how to do that. I’m using jQuery but I’m not opposed to dropping below that level of abstraction.

I assume once I know how to do that for the link elements I should be able to extend the solution to also toggle the display attribute of the microcopy div.

Here’s my current functions for the curious:

function printPreview() {
    $("link[rel*='style'][media!='print'").attr("disabled", true);
    $("link[rel*='style'][title='print preview']").attr("disabled", false);
    addPrintPreviewMicrocopy();
}

function addPrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'block'});
}

function normalView() {
    $("link[rel*='style'][media!='print'").attr("disabled", false);
    $("link[rel*='style'][title='print preview']").attr("disabled", true);
    removePrintPreviewMicrocopy();
}

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'none'});
}

Thanks in advance!

---

Thanks everyone. Here’s my final solution:

function toggleView() {
    $("link[rel*='style'][media!='print']").each( function() {
        this.disabled = !this.disabled;
    });
}

It turns out that I didn’t even need to toggle the div as the stylsheets alone did that.

Answer 1

For <link> elements you can toggle their disabled attribute with:

$('link[rel*=style]').each(function(){
  this.disabled = !this.disabled
})

This works because that attribute specifically is a read/write boolean property for <link> elements.

As for the divs you can use toggle() as others suggested.