How to add the Javascript block correctly in .js file

Question

I am adding this to .js file, I should remove Script tag from starting and end? Is there anything else that I should add or remove, so that this works correctly?

 <script type="text/javascript">

 $(document).ready(function() {
   var wid = window.innerWidth;
  var hit = window.innerHeight;
  
  //alert( w );
  var geturl = window.location.href;
  var spliturl = geturl.split("layout=");
  
 if( geturl.indexOf("default") > -1 || spliturl[1] == 'default' ){
     var atr = "";
  var septer = "";
  
  $("a").each(function(index, element) {
   if( $(this).attr("id") != "desktop-view" && $(this).attr("id") != "mobile-view" ) {
    atr = $(this).attr("href");
    
    if( atr != undefined) {
     if( atr.toString().indexOf("?") > -1) {
      septer = "&";
     } else {
      septer = "?"; 
     }
     
     
     if( atr.indexOf("#") <= -1 && atr.indexOf("add_to_cart") <= -1) {
      $(this).attr("href", atr + septer + "layout=default");
     }
    }
   }
  });
  
  
  var murl = geturl;
  murl = murl.replace("&layout=default","");
  murl = murl.replace("layout=default","");
  $("#mobile-view").attr("href", murl);
  

  if(/iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent) ) {
   //alert( window.innerHeight + " |  " + window.innerWidth );
   if( wid == 375 ||  wid == 667 || (wid == 320 && hit >=400) || wid == 568 || wid == 414 || wid == 736 ) { //|| wid == 414 || wid == 736 added
    $("meta[name='viewport']").attr('content','initial-scale=0, minimum-scale=0, maximum-scale=1.0, user-scalable=yes');
    //alert("target device");
   } else {
    $("meta[name='viewport']").attr('content','width=100%, initial-scale=0');
   }
   /*} else {
    $("meta[name='viewport']").attr('content','width=device-width, initial-scale=0'); 
   }*/
   
  } else {
   $("meta[name='viewport']").attr('content','width=device-width, initial-scale=0'); 
  }
  
   
  
   
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("#mobile-view").attr("style", "display:block !important");
    $("#desktop-view").attr("style", "display:none !important");
   }
    
  }else{
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("#mobile-view").attr("style", "display:none !important");
    $("#desktop-view").attr("style", "display:block !important");
   }   
    
   var tt='<link href="/assets/css/responsive.css" rel="stylesheet" type="text/css" id="res-css" />';
   $("head").append(tt);
   $("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0');
   
   
     $("a").each(function(index, element) {
   if( $(this).attr("id") == "desktop-view" ) {
    var vurl = geturl;
 
    if( vurl.indexOf("?") > -1 ) {
     vurl = vurl.replace("?","");
    }
    
    vurl = vurl.split('?');
    //parts = vurl[0].split("/");
    vurl = vurl[0] + "?layout=default";
    
    $(this).attr("href", vurl);
     
   }
  });
   
    
  }
  
    });
 
</script>

This code is included from .html file to another .html, I want to add this in .js file rather than including it from .html file. If anything is unclear, ask question first.

For more organisational code you can create new js file and include it in your main js file, Take a look at **[Include a JavaScript file in another JavaScript file?](http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file)** — Zakaria Acharki, Aug 14 '15 at 10:59

score 1 · Accepted Answer · answered Aug 14 '15 at 10:48

1

You would need to remove the

<script type="text/javascript">

and

</script>

tags, if you want this code in a javascript file. Those script tags are HTML tags which are unnecessary if you have a dedicated javascript file. Of course you then need to ensure you link to the file itself in your HTML, with a line like this:

<script src="/yourownpathhere/javascript.js" type="text/javascript"></script>

answered Aug 14 '15 at 10:48

Luke Twomey

1,245
1
9
18

I have added as you said but there seems to be a problem, if you inspect element this home page http://www.americaint.com/ ,I have control of this site. Under the Sources tab assets>js>common.js line 167, it says "Uncaught ReferenceError: $ is not defined" ? Shall I remove the "$" then it will work? – Rafah Mehfooz Aug 14 '15 at 11:11
1

When you view page source, your common.js javascript file is loading before jQuery. So it doesn't know what $ is. You need to load jQuery first, before common.js. – Luke Twomey Aug 14 '15 at 11:38

How to add the Javascript block correctly in .js file

1 Answers1