CODEWITHSUNDEEP
javascriptjqueryhtml
Fabián
Fabián

Reputation: 575

Disabling specific javascript loaded with the <script> tag

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
    }
});

Upvotes: 0

Views: 2985

Answers (2)

FK82
FK82

Reputation: 5075

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(); }
});

Upvotes: 1

super
super

Reputation: 2328

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

Upvotes: 2

Related Questions