Ultimate New Media, Inc

Random Development/Computer Tidbits

So here are some interesting things that were learned today:

• When trying to check the HTTP_REFERER using a .htaccess file links generated by JavaScript don’t set the referrer.  However, this is apparently only an issue in IE (we only tested IE and Firefox)
• IE doesn’t like some JavaScript parameter names when using jQuery – but they work perfectly fine in Firefox
• When PCs don’t have enough memory to perform a process in a software program, they apparently also don’t have enough juice to close the same said program – Hello Task Manager!! (or hello Mac :/)
• IIS can act like Apache mod_rewrite, just make sure you don’t use the Lite version if running multiple website.

jQuery and JSONP for Cross Domain Requests

If you have ever had issues making AJAX calls between two servers (domains) then I strongly suggest you check out this post and jQuery ajax method.

I went through a considerable amount of headbanging before finally figuring this out and the post above is the only solution I could find that even came close to pointing me in the right direction. One thing I would add to the post above is a clearer example. Here was my solution:

function makeRequest() {
$.ajax({
url: ‘http://myserver.com/page.php’,
dataType: ‘jsonp’,
jsonp: ‘jsonp_callback’,
data: “id=10″
});
}

This function will generate a request to page.php on http://myserver.com (you should replace the domain and PHP script location with your own of course).

In my PHP script, and after doing the necessary processing, I returned the following:

echo ‘processResponse(’ . json_encode($vRetValue) . ‘)’;

When this is received by the AJAX call above the processResponse function will be called.

function processResponse(data) {
// do something with the data
}

Note: Make sure your call back function is outside of any jQuery.ready blocks:

$().ready(function() {
// stuff here
});

function callbackFunction() {
// do stuff here
}

Magento Zoom Reset Option

When recently working on a Magento Enterprise project, a client requested a reset button be added for the product zoom feature because while switching between different product images, a new image would load in the current zoom state.  As it turns out, adding this feature is quite simple.

1. Add a button (or trigger of your choice) to initiate the reset:

<input type=”button” value=”Reset” id=”zoom_reset” />

This should be done in the media template: /app/design/frontend/enterprise/**/template/catalog/product/view/media.phtml

2. Pass this button’s id to the Product.Zoom call:

<script type=”text/javascript”>

Event.observe(window, ‘load’, function() {

product_zoom = new Product.Zoom(’image’, ‘track’, ‘handle’, ‘zoom_in’, ‘zoom_out’, ‘track_hint’, ‘zoom_enlarge’, ‘zoom_reset‘);

});

</script>

3. Update the Product.Zoom class in /js/varien/product.js to prepare the zoom reset id:

initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl, enlargeEl, resetEl){

this.resetEl = $(resetEl);

4. Bind this element to a new function that will handle the reset:

Event.observe(this.resetEl, ‘click’, this.resetImage.bind(this));

5. Add the resetImage function:

resetImage: function() {

this.scale(0);

this.slider.setValue(0);

},

As you can see, this is a pretty straight forward method for resetting the image to the full view position.

Internet Explorer with CSS :hover

I discovered an interesting thing about Internet Explorer today while trying to change the border color of an image on mouseover.  IE only recognizes :hover on links, or <a> tags. So, something like this, which works perfectly fine in other browsers, will not work in IE:

a img {
border:1px solid #581C00;
}

a img:hover {
border:1px solid #ffffff;
}

To make this work in IE it needs to be done as follows with the :hover applied to the a tag:

a img {
border:1px solid #581C00;
}

a:hover img {
border:1px solid #ffffff;
}

IE Browser Testing to the Max

Ever needed to test your website in IE 6 but currently have IE 7 (or soon IE 8) installed?

Check out this website: http://tredosoft.com/Multiple_IE

You can install all versions of IE prior to IE 7 (IE 6.0, IE 5.5, IE 5.01, IE 4.01 and IE 3.0) – pretty useful tool for testing.