Difference between revisions of "Shopify Javascript Callbacks"

From the Directed Edge Developer Base
Jump to: navigation, search
(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 that can be used to customize the Directed Edge Shopify app ==
+
== 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");
    });
}