Difference between revisions of "Shopify Javascript Callbacks"
From the Directed Edge Developer Base
(Created page with "== A collection of Javascript callbacks that can be used to customize the Directed Edge Shopify app == === Add a hover effect to the recommendations (jQuery) === This changes t...") |
|||
| Line 1: | Line 1: | ||
| − | == A collection of Javascript callbacks | + | == A collection of Javascript callbacks to customize our Shopify app == |
=== Add a hover effect to the recommendations (jQuery) === | === Add a hover effect to the recommendations (jQuery) === | ||
Revision as of 06:33, 23 October 2012
A collection of Javascript callbacks to customize our Shopify app
Add a hover effect to the recommendations (jQuery)
This changes the text color and the border color of the image simultaneously.
function addHoverEffectToRecommendations() {
function findIndexInRow(e) {
var children = e.parentElement.children;
for(var i = 0; i < children.length; i++) { if(children[i] == e) { return i; } }
}
function findTitleForImage(e) {
return $(e.parentElement).next().children()[findIndexInRow(e)];
}
function findImageForTitle(e) {
return $(e.parentElement).prev().children()[findIndexInRow(e)];
}
$(".directededge-image-cell").hover(function() {
$("img", this).css("border-color", "#DDD");
$("a", findTitleForImage(this)).css("color", "#FD885D");
}, function() {
$("img", this).css("border-color", "#FFF");
$("a", findTitleForImage(this)).css("color", "#242424");
});
$(".directededge-title-cell").hover(function() {
$("img", findImageForTitle(this)).css("border-color", "#DDD");
$("a", this).css("color", "#FD885D");
}, function() {
$("img", findImageForTitle(this)).css("border-color", "#FFF");
$("a", this).css("color", "#242424");
});
}