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 $
});
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:
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.
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:
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>
The following is code to create popups. To use this code:
Create a div that contains the pop up content and add an id tag to the div.
Create a div or image that will be used to open the popup, and add a class tag.
Add a div or image to the popup content that may be pressed to close the popup, add a class to the div or image
Add the following JavaScript code …
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script type="text/javascript">
$(function() {
if (!$("#dr_pop_div").length ) $("body").prepend( "<div id='dr_pop_div' ></div>" ) ;
function dr_pop(config) {
var dr_tag = (config.msg) ? config.msg : "#msg" ; /* tagged div that will pop up */
var dr_open = (config.open)? config.open : ".info_open" ; /* element to click to open */
var dr_close = (config.close)? config.close : ".info_close" ; /* element to click to close */
var dr_toggle = (config.toggle)? config.toggle : ".info_toggle" ; /* element to click to toggle */
$("#dr_pop_div" ).append($(dr_tag));
$("#dr_pop_div").addClass("dr_pop_hide") ;
$(dr_tag).addClass("dr_pop_hide") ;
$(dr_open).click(function() {
if ($("#dr_pop_div").hasClass("dr_pop_hide")) $("#dr_pop_div").removeClass("dr_pop_hide") ;
if ($(dr_tag).hasClass("dr_pop_hide")) $(dr_tag).removeClass("dr_pop_hide") ;
if (!$("#dr_pop_div").hasClass("dr_pop_show")) $("#dr_pop_div").addClass("dr_pop_show") ;
if (!$(dr_tag).hasClass("dr_pop_show")) $(dr_tag).addClass("dr_pop_show") ;
}) ;
$(dr_close).click(function() {
if ($(dr_tag).hasClass("dr_pop_show")) $(dr_tag).removeClass("dr_pop_show") ;
if ($("#dr_pop_div").hasClass("dr_pop_show")) $("#dr_pop_div").removeClass("dr_pop_show") ;
if (!$(dr_tag).hasClass("dr_pop_hide")) $(dr_tag).addClass("dr_pop_hide") ;
if (!$("#dr_pop_div").hasClass("dr_pop_hide")) $("#dr_pop_div").addClass("dr_pop_hide") ;
}) ;
$(dr_toggle).click(function() {
if ($("#dr_pop_div").hasClass("dr_pop_hide")) {
$("#dr_pop_div").removeClass("dr_pop_hide") ;
$(dr_tag).removeClass("dr_pop_hide") ;
if (!$("#dr_pop_div").hasClass("dr_pop_show")) {
$("#dr_pop_div").addClass("dr_pop_show") ;
$(dr_tag).addClass("dr_pop_show") ;
}
} else {
if ($("#dr_pop_div").hasClass("dr_pop_show")) {
$("#dr_pop_div").removeClass("dr_pop_show") ;
$(dr_tag).removeClass("dr_pop_show") ;
}
if (!$("#dr_pop_div").hasClass("dr_pop_hide")) {
$("#dr_pop_div").addClass("dr_pop_hide") ;
$(dr_tag).addClass("dr_pop_hide") ;
}
}
}) ;
}
var popup1 = new dr_pop({ "msg" : "#msg", "open" : ".info_open", "close" : ".info_close" }) ;
/* ... more popup declarations go here */
}) ;
</script>
For each message popup, declare the popup by defining the labels that will be used for the popups. The definitions of the labels are done in the “dr_pop” statement. The dr_pop(config) is defined as follows:
var pop = new dr_pop( {
"msg" : ,
"open" : ,
"close" :
}) ;
Where:
is the quoted id for the div that holds the message, example: "#msg"
is the quoted id or class of the object to use as the open button.
(Example: .info_open)
is the quoted id or class of the object to use as the close button.
(example: .info_close)
Eclipse PDT is an IDE for the development of PHP projects.
Installing Eclipse PDT is not a big challenge. However, Configuring Eclipse for Windows can be entertaining (to say the least). That is what part 2 of this series covers … installation and configuration for Eclipse PDT for Windows environment.
If you have a WAMP installed on your computer, you are ready to install Eclipse PDT. If not, return to part one of this article series to install a WAMP.
You will be required to register with the site, to join the community of users. However, the download is free.
Installing Eclipse PDT
Installation of Eclipse PDT is not a typical Windows install. The package comes as a simple zip file. You will choose a directory you would like to use as the tool’s home, and unpack the zip file into that directory. When done, go to the directory, find zend-eclipse-php.exe and create a link to this on your desktop. This shortcut will be your access to eclipse PDT.
Configuring Eclipse PDT
Configuring can be a nuisance for Eclipse PDT, but, here we go. Follow along and you should be fine.
In preparation, you need to determine a few facts:
What physical directory has been defined as your “localhost” by your WAMP?
What sub-directory of your WAMP localhost do you want as your development area? You will put all your projects in sub-directories of the development area.
What would you like to name your development area? Eclipse PDT will call this your workspace. Your projects will end up as sub-directories in the workspace
Now you are ready… begin:
Define your workspace – if you have not yet defined a workspace
Click “File” in the toolbar.
Hover over “Switch Workspace” and click “Other.”
On the switch workplace screen, select browse and browse to the location you would like to make into a workplace. You may use the browse tool to create new directories, and select that directory as the directory to switch too.
Be certain your new workspace is in the path defined as your development server.
Configure Your General Preference
Click “Window” in the toolbar, a menu will pop-down.
Click Preferences in the drop down menu and a form will open.
Configure for PHP
Click “PHP” in the left column of drop down, a submenu will appear.
Click on “PHP Executables,” a list may appear … it may be blank.
If PHP 5 is not already listed, Click on “Add…,” a form will appear.
Fill in the Add PHP Executable” form with
PHP 5
(browse to and select your php.exe file)
CGI
XDebug
Click Debug, a new configurable set will open. Configure as follows:
XDebug
Default PHP Web Server
PHP 5
UTF-8
UTF-8
will already be set correctly, no need for change
click if you want to stop on first line for your debug purposes.
Click “PHP Servers,” a new configurable set will open. Assure the default PHP Web Server is mapped to http://localhost.” if not, either edit or add that information to the list of managed servers.
Define a New Empty Project
Click “File” in the toolbar, the menu will dropdown.
Hover over “New,” and click the sub-option “Local PHP Project,” a form will pop up
Fill in the project name, the physical address of the directory to be used for the project, select to use either Basic or Zend Framework. The path must be in your workspace, and if you do know what a Zend Framework is … select Basic. Then, click “Next,” another form will appear.
On the new form, the host name should be fine, but, adjust the Base Path to include your path from the “localhost,” assuring that the “Project URL” on the page is correctly defined to location your project. Then, click “Next.”
On the Library Configuration page, select the usual libraries you use … typically, I select (a) JavaScript Web Project Support, (b) JQuery Library and (c) ExtJS Library. Then, Click Finish. The existing directory will be set up for use with Eclipse PDT.
If you would like to bring in files from other directories, do not simply copy them in, Import them or Eclipse will not recognize them.
Create a project from an Existing Directory
Copy your files into a directory you would like to define as a new project directory
Click “File” in the toolbar, the menu will drop down.
Hover over “New,” and click the sub-option “PHP Project from Existing Directory, a form will pop up
Fill in the projects and the physical address of the project in a subdirectory of the workspace, a from will pop up. Then, click “Next.”
The host name should be fine, but, adjust the Base Path to include your path from the “localhost,” assuring that the Project URL on the page is correctly defined to location your project. Then, click “Next.”
On the Library Configuration page, select the usual libraries you use … typically, I select (a) JavaScript Web Project Support, (b) JQuery Library and (c) ExtJS Library. Then, Click “Finish.” The existing directory will be set up for use with Eclipse PDT.
Configure Your Properties
Click “Project” in the toolbar, a menu will pop-down.
Click “Properties” in the drop down menu and a form will open.
Configure for PHP debugging
Click “PHP Debug” in the left column of drop down, Configurables will change in the right column.
Configure as follows:
XDebug
Default PHP Web Server
PHP 5
UTF-8
UTF-8
will already be set correctly, no need for change
click if you want to stop on first line for your debug purposes.
