Question

I need to include a file always that the screen browser would be greater or equal than 699px, for this I’m trying to use the following script:

<script type="text/javascript">
<!--
if (screen.width >= 699) {
document.write (" <!--#include virtual="/menu.asp"-->");
}
//-->
</script>

But nothing it does. Does anyone know how to get it work?

Best regards.

Answer 1

The include directive needs to be a part of the page before it gets to the web browser, and since the JavaScript executes in the web browser, it’s already too late for that. You might consider putting the include in the page, but hiding it in a div with style="display:none;", and then removing that using JavaScript when the page loads:

<script type="text/javascript">
window.addEventListener('load', function(){
    if (screen.width >= 699)
        document.getElementById('myHiddenElement').style.display = null;
});
</script>

Alternatively, you could use the same strategy with CSS Media Queries.

Edit: Example:

<style type="text/css">
#myHiddenElement {
    display: none;
}
@media screen and (min-width: 699px) {
    #myHiddenElement {
        display: block;
    }
}
</style>

This will give you better performance, and it will automatically hide and show the content as the user resizes their browser window.