Disabling specific javascript loaded with the <script> tag

Question

I have this JavaScript file loaded with the <script> HTML tag:

<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js"></script>

I want to make it work only when the width of the browser is over 500px.

I know a way to do it, which is copying basically everything of the file and paste it inside of the resize event, like this:

$(document).ready(function(){
    if ($(window).width() > 480) {
        //all the code inside of that file
    }
});

$(window).resize(function(){
    if ($(this).width() > 480) {
        //all the code inside of that file
    }
}

But I'm still sure there's another way, I'm looking for a simpler or easier way to do it.

EDIT:

The structure of the index.php file makes it's content dynamic,

<body>
  <div id="big_wrapper">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>jQuery.get(source);</script>
    <?php include('includes/header.php'); ?>
    <article>
      <section>
        <?php

          if(isset($p)){
            switch ($p) {
              case 'introduccion':
                include('content/introduccion.php');
                break;
              case 'marketing_digital':
                include('content/marketing.php');
                break;
              case 'diseño_web':
                include('content/web.php');
                break;
              case 'diseño_grafico':
                include('content/grafico.php');
                break;
              case 'crm':
                include('content/crm.php');
                break;
              case 'eventos':
                include('content/eventos.php');
                break;
              case 'contact':
                include('content/contact.php');
                break;

              default:
                include('content/introduccion.php');
                break;
            }
          } else {
            include('content/introduccion.php');
          }
        ?>
      </section>
    </article>
    <?php include('includes/footer.php'); ?>
  </div>
</body>

The key is to make the script work only in introduccion.php, so the HTML shown in browser looks like this:

<body>
  <div id="big_wrapper">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>jQuery.get(source);</script>
    <?php include('includes/header.php'); ?>
    <article>
      <section>
        <!--<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js"></script>-->
        <script type="text/javascript" src="js/script.js"></script>
        <style>
            .edgeLoad-adobeEdge_animation { visibility:hidden; }
        </style>
        <h2 lang="sp">Introducción</h2>
        <h2 lang="en">Introduction</h2>

        <div class="first_text">
          <div id="Stage" class="texto_aim_web_marketing"></div>
          <p lang="sp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, rerum.</p>
          <p lang="sp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, quod.</p>
          <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nostrum.</p>
          <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, vel.</p>
          <div class="first_text">
            <p lang="sp" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quo ut quidem mollitia tenetur maxime.</p>
            <p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, commodi natus quia voluptas iure libero.</p>
          </div>
        </div>
      </section>
    </article>
    <?php include('includes/footer.php'); ?>
  </div>
</body>

Here's my JavaScript (js/script.js)

function loadjsfile(filename){    
   var fileRef = document.createElement('script');
   fileRef.setAttribute("type","text/javascript");
   fileRef.setAttribute("charset","utf-8");
   fileRef.setAttribute("src", filename);    

   if (typeof fileRef!="undefined")
      document.getElementsByTagName("section")[0].appendChild(fileRef);
   }
}

$(document).ready(function(){
    if ($(window).width() > 640) {
        loadjsfile("myAnimation_edgePreload.js"); //dynamically load and add this .js file
    }
});

$(window).resize(function(){
    if ($(this).width() > 640) {
        loadjsfile("myAnimation_edgePreload.js"); //dynamically load and add this .js file
    }
});

What specifically do you dislike about your current solution that you'd like to improve? "On resize > #, perform task" seems fairly simple... — HC_
– HC_, Commented Oct 17, 2013 at 23:05
Since I use the script tag to load the javascript, I don't need the jQuery's .load() function. But I can't figure what to set inside of that if sentence. I'm looking for something like "abortJSLoad('myAnimation_edgePreload.js');" or "denyFileLoad('myAnimation_edgePreload.js');"... or something like that. — Fabián
– Fabián, Commented Oct 17, 2013 at 23:09
Doing this on the resize event is trouble. What if the user never resizes, but the window starts off smaller than 480? And if the user does resize, the event fires several times during the drag. What will happen to your script? Will it load, unload, load many times? — user2625787
– user2625787, Commented Oct 17, 2013 at 23:12

super · Accepted Answer · 2013-10-17 23:09:56Z

2

One way to Dynamically add external JavaScript

function loadjsfile(filename){    
   var fileRef = document.createElement('script');
   fileRef.setAttribute("type","text/javascript");
   fileRef.setAttribute("src", filename);    

   if (typeof fileRef!="undefined")
      document.getElementsByTagName("head")[0].appendChild(fileRef);
   }
}

loadjsfile("myscript.js"); //dynamically load and add this .js file

answered Oct 17, 2013 at 23:09

super

2,3282 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabián Over a year ago

It didn't work for me, I edited the post showing what I did with the code.

super Over a year ago

In the case of JavaScript, while the element is removed from the document tree, any code loaded as part of the external JavaScript file remains in the browser's memory. If you want module wise scripting try this i hope this will help you RequireJS

super Over a year ago

Or else you can override the code that you want to disable with empty function/value.etc. I don't think it's a better solution..

FK82 · Accepted Answer · 2013-10-21 18:59:21Z

1

If I understand your question correctly, you want to have a callback function respond to the document ready and window resize events.

For that you need to create a global Function (in your script file)

function adobeEdge_animation( )
{
    /*code*/
}

Then import it using the SCRIPT Element

<script type="text/javascript" charset="utf-8" src="adobeEdge_animation.js">

now you can just do this

$(document).ready(function(){
    if ($(window).width() > 480) { adobeEdge_animation(); }
});

$(window).resize(function(){
  if ($(this).width() > 480) { adobeEdge_animation(); }
});

answered Oct 21, 2013 at 18:59

FK82

5,0754 gold badges34 silver badges44 bronze badges

2 Comments

Fabián Over a year ago

Only worked with $(document).ready();, but not with the $(window).resize();.

FK82 Over a year ago

Are you sure? Print something to the console from the first line of your function to see if it is being called to handle the resive event.

Collectives™ on Stack Overflow

Disabling specific javascript loaded with the <script> tag

EDIT:

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related