current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to make a website mobile-friendly. One of the steps is to hide the right column, which has ads and non-essential data. In the CSS, I have something like this:

@media only screen {
    @media handheld or (max-width: 768px) {
        #column_right {display:none}
    }
}

The problem is that the right column contains javascript to display ads, which will still be executed. This is bad for 2 reasons: 1. It slows down the loading of the page. 2. It is against the ad networks' TOS (because the view is still registered, even though the visitor doesn't see an ad)

How would I prevent the code in the hidden column from being executed?

Edited to add: Here is one of the javascript code blocks that I need to disable:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- removed ad block name -->
<ins class="adsbygoogle"
     style="display:inline-block;width:160px;height:600px"
     data-ad-client="removed"
     data-ad-slot="removed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
share|improve this question
 
How is the ad code implemented? Through a <script> block or manually through your own JS? –  daleyjem Nov 1 '13 at 4:18
 
Through a <script> block. I.e. exactly the way I got the code from the ad networks. –  Bintz Nov 1 '13 at 4:54
 
I just added the code of one such block (it's from Google AdSense) –  Bintz Nov 1 '13 at 4:57
add comment

3 Answers

up vote 0 down vote

If you're using jQuery you could check if the element is visible. http://api.jquery.com/visible-selector/

share|improve this answer
add comment
up vote 0 down vote

I'd suggest jQuery with a $(window).width() check. You can call this on $(document).ready() as well as listen for $(window).resize().

If you're listening for the resize, you of course want to do something like:

var MAX_WINDOW_WIDTH = 768;

checkWindowSize();

$(window).resize(checkWindowSize);

function checkWindowSize(){
    if ($(window).width() < MAX_WINDOW_WIDTH && $('#column_right').size() > 0){
        $('#column_right .ad-block').remove();
    }
    if ($(window).width() > MAX_WINDOW_WIDTH && $('#column_right').size() == 0){
        $('#column_right').append('[some HTML ad code here]');
    }
});
share|improve this answer
add comment
up vote 0 down vote

No you can not prevent to load a code if you write it on page. Because Javascript/Jquery code is render when DOM in ready state.

You can prevent execution of code-block, by checking the visibility property.

Like that:

var theCSSprop = getComputedStyle( document.querySelector("#column_right") ).visibility

if(theCSSprop != "hidden"){
  // write your code which you want to prevent 
}

If you want to improve page performance than move JavaScript to the bottom of the page instead of putting them in the head/top.

Read This

See live example

share|improve this answer
 
I'm lost... what is "#div1"? Why do we do var elem1 = document.getElementById("column_right"); when we don't use it anywhere after that? –  Bintz Nov 1 '13 at 5:05
 
sorry for mistake.. :D. Please see updated answer. –  Ishan Jain Nov 1 '13 at 5:24
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.