Question

This is a bit hard to explain: I have a simple PHP file that outputs another PHP file with an include:

<?php include("file.php"); ?>

What I wanted to do is to have only part of it shown in the first page. So I used overflow to create a window with scrollbars:

<div style="height: 130px; width: 800px; border: 1px solid #CCCCCC; overflow: auto;">
 <?php include("file.php"); ?>
</div>

Everything works great. But now I want to add another functionality: When you click inside this overflowed area and press Ctrl+A, only the part in the overflowed area should be selected (not the whole page).

I tried using HTML frames, which gave me the function I wanted but the overflowed PHP file doesn’t get parsed. Is there a way to accomplish this and still have the PHP file be parsed?

Answer 1

You have several options

Don’t include, link through iframe

I don’t know how you did it, but frames have no influence over what is parsed by the server. IFrames, or frames, just make a regular GET request, the server then decides whether to parse or not the requested file.

file1.php

<style>
    .document {
        height: 130px; 
        width: 800px;
        border: 1px solid #CCCCCC;
    }
</style>
<iframe src="file2.php" class="document" />

---

Include into an element that limits the “select all”

If you only want to include “text” (who knows, it could be…). Consider putting your included file into a textarea.

file1.php

<style>
    .document {
        height: 130px; 
        width: 800px;
        border: 1px solid #CCCCCC;
    }
</style>
<textarea class="document"><?php include('file2.php'); ?></textarea>

---

Quirky way: catch “ctrl+a” and apply contenteditable for a moment

ContentEditable fields limit their “select all”. See demo here

file1.php

<style>
    .document {
        height: 130px; 
        width: 800px;
        border: 1px solid #CCCCCC;
    }
</style>
<div class="document"><?php include('file2.php'); ?></div>
$(window).bind('keydown', function(e) {
    if(event.ctrlKey && event.keyCode == 65) {
        var self = $('.document').attr('contenteditable', '');
        window.setTimeout(function() {
            self.removeAttr('contenteditable');
        }, 20);
    }
});

​Using contenteditable has 1 advantage over using textranges to select the contents: when clicking outside of your included document, all text on the page is selected (instead of “forcing” the “select only included file” feature).