Network page help with auto-scroll and element highlighting

1 files changed, 26 insertions, 0 deletions

diff --git a/doc/context/network/help.html b/doc/context/network/help.html
new file mode 100644
index 000000000..9d9031af8
--- /dev/null
+++ b/doc/context/network/help.html
@@ -0,0 +1,26 @@
+<script>
+    var contextualHelp1 = function (target, openSidePanel) {
+        $("#help-content").removeClass('help-content-open');  // Close the help panel
+        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
+        if (openSidePanel) {
+            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
+        } else {
+            $("main").removeClass('region_1-on');
+        }
+        // Animate the page scroll to the element and then pulse the element to direct attention
+        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
+        for (i = 0; i < 3; i++) {
+            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
+        }
+    }
+</script>
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The network page displays a stream of posts and conversations, typically ordered by the most recently updated. This page is highly customizable.</dd>
+  <dt><a href='#' onclick='contextualHelp1("#profile-jot-wrapper", 0); return false;' title="Click to highlight element...">Create a Post</a></dt>
+  <dd>At the top of the page there is a text box that says "Share". Clicking this box opens a new post editor. The post editor is customizable, but the basic editor provides fields for a post body and an optional post <b>Title</b>. Buttons below the text area to the left provide shortcuts to text formatting and inserting links, images, and other data into the post. The buttons to the right provide a post preview, the post permissions setting, and a <b>Submit</b> button to send the post.</dd>
+  <dt><a href='#' onclick='contextualHelp1("#group-sidebar", 1); return false;' title="Click to highlight element...">Privacy Groups</a></dt>
+  <dd>The privacy groups you have created are displayed in the side panel. Selecting them filters posts to those created by channels in the chosen group.</dd>
+  <dt><a href='#' onclick='$("jot-title-wrap").show(); contextualHelp1("#dbtn-acl", 0); return false;' title="Click to highlight element...">Post Permissions</a></dt>
+  <dd></dd>
+</dl>
\ No newline at end of file