Question

What am I doing wrong? I have tried the following and get nothing in the iframe…

var file = "TreeImages/" + $(this).text() + ".pdf'";
var file = "/TreeImages/" + $(this).text() + ".pdf'";
var file = ".../TreeImages/" + $(this).text() + ".pdf'";

//with/...
$('div.viewer.ifrm').attr('src') = file;
$('div.viewer.ifrm').attr('src', file);

The html for the iframe looks like this…

<div class="wrapper">
    <div class="treeMenu" ></div>
    <div class="viewer">
        <iframe class='ifrm' scrolling='yes' src=''></iframe>
    </div>
</div>

I can make things work if I remove and add the entire iFrame instead of trying to change the source, but this appears to be causing scrolling to break on the iPad when I try to use -webkit-overflow-scrolling: touch;

Answer 1

You want a space between your selectors to indicate that they are not multiple classes of the same element.

$('.viewer .ifrm').attr('src', file);