Issue 1761 - services page on Eyeo.com

pages/services.html

Index: pages/services.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/pages/services.html
@@ -0,0 +1,58 @@
+title=Services
+
+<script src="/js/jquery.ui.core.min.js"></script>
+<script src="/js/jquery.ui.widget.min.js"></script>
+<script src="/js/jquery.ui.tabs.min.js"></script>
+<script>
+  jQuery(function()
+  {
+    jQuery(
+      "ul:first", jQuery("#tabs").tabs(
+      {
+        activate: function(event, ui)
+        {
+          location.hash = ui.newTab.find("a")[0].hash;
+        }
+      })
+    );
+    jQuery(window).on("hashchange", function()

[Thomas Greiner, 2015/04/14 17:31:35]

This feature wasn't mentioned in the issue so no need to include it. Note that
it also makes the page jump when clicking on links.

That means that the following code (which can also be found on other pages
already) should be sufficient:

jQuery(function()
{
  jQuery("#tabs").tabs();
});

[saroyanm, 2015/04/16 12:19:06]

Done.

+    {
+      jQuery("[href=" + location.hash + "]").click();
+    });
+  });
+</script>
+
+<header class="page-title">
+  <h1>Services</h1>
+</header>
+
+<div id="press-info" class="content-block">

[Thomas Greiner, 2015/04/14 17:31:35]

I assume that this is a copy&paste issue so please replace "press-info" with
"services-info".

Note that the "id" attribute is not required here so you can remove it unless
there's a reason I'm not aware of.

[saroyanm, 2015/04/16 12:19:06]

Done.

+  <div class="column">
+    <? include services/overview ?>
+
+    <div id="tabs">
+      <ul>
+        <li><a href="#publisher">Publisher</a></li>
+        <li><a href="#ad-networks">Ad Networks</a></li>

[Thomas Greiner, 2015/04/14 17:31:35]

Interestingly, the names of the other tabs are singular. Unless there's a reason
to make an exception for ad networks, this can be made singular as well (not
only the name but also element IDs and file names).

[saroyanm, 2015/04/16 12:19:06]

Done.

+        <li><a href="#advertiser">Advertiser</a></li>
+        <li><a href="#ad-tech">Ad Tech</a></li>
+      </ul>
+
+      <div id="publisher">
+        <? include services/publisher ?>
+      </div>
+
+      <div id="ad-networks">
+        <? include services/ad-networks ?>
+      </div>
+
+      <div id="advertiser">
+        <? include services/advertiser ?>
+      </div>
+
+      <div id="ad-tech">
+        <? include services/ad-tech ?>
+      </div>
+    </div>
+  </div>
+</div>