Shopify Javascript Callbacks - Revision history

Scott at 22:53, 30 January 2013

2013-01-30T22:53:05Z

Scott at 06:33, 11 December 2012

2012-12-11T06:33:32Z

Scott at 06:33, 11 December 2012

2012-12-11T06:33:14Z

Scott at 06:29, 11 December 2012

2012-12-11T06:29:17Z

Scott at 06:29, 11 December 2012

2012-12-11T06:29:05Z

Scott at 06:26, 11 December 2012

2012-12-11T06:26:42Z

Scott at 06:33, 23 October 2012

2012-10-23T06:33:25Z

Scott: 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..."

2012-10-23T06:32:47Z

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..."

New page

== 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 the text color and the border color of the image simultaneously.

<source lang="javascript">
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");
});
}
</source>

@@ Line 81: / Line 81: @@
          price.innerHTML = products[i].price;
+     }
+}
 </script>
 </source>

@@ Line 56: / Line 56: @@
+     {
          var item = document.createElement("div");
          item.className = "directededge-item";
          var imageLink = document.createElement("a");

@@ Line 56: / Line 56: @@
+     {
          var item = document.createElement("div");
          container.appendChild(item);

← Older revision		Revision as of 06:29, 11 December 2012
Line 1:		Line 1:
	__TOC__		__TOC__
−
	== Add a hover effect to the recommendations (jQuery) ==		== Add a hover effect to the recommendations (jQuery) ==

← Older revision		Revision as of 06:29, 11 December 2012
Line 1:		Line 1:
		+	__TOC__
		+
	== Add a hover effect to the recommendations (jQuery) ==		== Add a hover effect to the recommendations (jQuery) ==

@@ Line 1: / Line 1: @@
-== 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.
 <source lang="javascript">
 function addHoverEffectToRecommendations() {
      function findIndexInRow(e) {
@@ Line 36: / Line 38: @@
      });
+}
 </source>

← Older revision		Revision as of 06:33, 23 October 2012
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) ===