jQuery Ready Plus $ Conflict Resolution

Javascript, jQuery

jQuery logo

Earlier in my notes to uses, I mentioned the method to initialized jQuery by using the jQuery ready pattern. However at the time, I did not mention how to deal with $ conflict problems. The $conflict problem is significant. You would like to know that you are using the jQuery $ and it is correctly being interpreted in you code. Sometimes, when used in PHP or with additional libraries like prototype, the meaning of $ gets confused. Fortunately, it is VERY easy to assure that the $ is correctly interpreted in any script found in the jQuery ready initialization. Option1, use the following setup as the jQuery Ready.



Query(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});

 

If you would prefer to use the shortcut pattern for jQuery Ready, use the following:



jQuery(function($){
    // Your jQuery code here, using the $
});

 

That’s it for now …

Resizable YouTube Videos for your Site

CSS, HTML5, Javascript, jQuery

Do you have a problem with YouTube videos on your site that don’t resize in your responsive website? This can be a big hassle. You can set up your site using CSS to control the resizing, but, (1) You may have older websites that you don’t want to rewrite, (2) you may be somewhat unfamiliar with CSS or you have other reasons you don’t want to hassle correcting problems of resizing videos on your sites. If you are willing to take just a few minutes to fix the problem, there is a simple solution to your problem. To solve your problem, you’ll add a few lines of code to your file. In the area of all pages that include videos, add the following lines of code:



    <script type="text/javascript" 
       src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script type="text/javascript" src="/js/videoSizing.js"></script>

Next, download the file “videoSizing.js. Add the file to the directory /js, and you’re done. This will make all your YouTube videos responsive. If you would prefer to place the videoSizing.js in an alternate directory, insert the file where you like, but, adjust the /js/videoSizing.js path to correctly reflect the directory that you chose to store the videoSizing.js file. Also, the addition of the jquery.min.js is only required for those sites that do not already use the jQuery library. As long as you use a src address that correctly accesses the file and the jQuery library library is included, all your YouTube videos will resize responsively.

By the way, if you would like to add a margin around the video, define the variable YOUTUBE_VIDEO_MARGIN and the video margin will be set. Ex.



    YOUTUBE_VIDEO_MARGIN = 10 ;  /* sets margin to 10 pixels */

If you are curious what is contained in the videoSizing.js file, you’ll find the following:



    /*
     * Youtube video auto-resizer script
     * Created by Skipser.com
    */
     
    jQuery(function($) {
      if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
        YOUTUBE_VIDEO_MARGIN=5;
      }
      $('iframe').each(function(index,item) {
        if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
          var w = $(item).attr('width');
          var h = $(item).attr('height');
          var ar = h/w*100;
          ar = ar.toFixed(2);
          //Style iframe    
          $(item).css('position','absolute');
          $(item).css('top','0');
          $(item).css('left','0');    
          $(item).css('width','100%');
          $(item).css('height','100%');
          $(item).css('max-width',w+'px');
          $(item).css('max-height', h+'px');        
          $(item).wrap('<div style="max-width:' + w + 'px;margin:0 auto; padding:' + YOUTUBE_VIDEO_MARGIN + 'px;" /> ');
          $(item).wrap('<div style="position: relative;padding-bottom: ' +  ar + '%; height: 0; overflow: hidden;" /> ');
        }
      });
    });

Enjoy the new responsiveness of your YouTube videos. By the way, if you would like more on this topic, see Skipser’s article on the jQuery snippet.

Android Studio: Signing Your APP for Release

Android

Do the following to sign your APP in release mode:

  1. On the menu bar, click Build > Generate Signed APK.
  2. On the Generate Signed APK Wizard window, click Create new to create a new keystore.
    If you already have a keystore, go to step 4.
  3. On the New Key Store window, provide the required information as shown in figure 1.
    Your key should be valid for at least 25 years, so you can sign app updates with the same key through the lifespan of your app.
  4. On the Generate Signed APK Wizard window, select a keystore, a private key, and enter the passwords for both. Then click Next.
  5. On the next window, select a destination for the signed APK and click Finish.

For more details, see http://developer.android.com/tools/publishing/app-signing.html

Adding jQuery library to Zen Cart

Javascript, jQuery, Zen Cart

You’ve found that you want to use jQuery features to help include affects in your Zen Cart site. Adding Javascript or jQuery to Zen Cart can be easy.

First, you must find the following template directory ….



includes/templates/TEMPLATE-NAME/jscript

(Replace TEMPLATE-NAME with the name of the template you are using.)

Create a file to contain your javascript, The file name must have the prefix “jscript_,” in the form jscript_xxxx.php. For example you might create jscript_my.js. Store it in the jscript directory. For example:



includes/templates/TEMPLATE-NAME/jscript/jscript_my.php

Once you have the file, include whatever you would like in the site header area, loaded with the other other script files. The file will look contain at least:


  <?php
  // Jscript_my.php
  //
  // The following is an example of including jQuery and using jQuery 
  // in Zen Cart.
  //
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(".wrapperAttribsOptions option[value='63']").remove() ;
      $(".wrapperAttribsOptions option[value='67']").remove() ; 
      $(".wrapperAttribsOptions option[value='65']").remove() ;  
      $(".wrapperAttribsOptions option[value='64']").remove() ; 
      $(".wrapperAttribsOptions option[value='68']").remove() ;
    }) ;
  </script>

Renaming Android Package

Android

From time to time you may find you need to rename an android package while developing in Android Studio. There seem to be several explanations around the web. The following method seems to be the method that worked the first time everytime for me. Example, change package com.example.test to com.example.testing:

  1. Click Project in the left sections bar → the Project Pane will open.
  2. Select Java under src / main of the app with the package to be renamed.
  3. Click the Small Gear on Project Pane top action bar → an options menu will appear.
  4. Uncheck the Compact Empty Meddle Packages in the options menu → the directories under java will cascade down.
  5. Select the package name to change (ex: test) and right click → a dropdown menu will appear.
  6. In the dropdown menu, select Refactor / Rename → a window will appear
  7. In popup window, select Rename package → a window will appear
  8. Enter the new package name, click search in comments & strings and search for text occurances
  9. Press Refactor

Refactoring should replace all needed directory names, and references within your files, producing a new package.