Visually Shortening

55 views
Skip to first unread message

Miriam

unread,
Aug 1, 2012, 6:09:13 PM8/1/12
to subjec...@googlegroups.com
We are looking into ways to shorten our longest Guides - make them less visually overwhelming or more easy to navigate. There were two ideas that I haven't seen a solution for when I searched here - maybe I just didn't do a good search, but I didn't see them.
  • Has anyone implemented a "back to top" link in the Guides? 
  • Expand/Compress a section - a more/less option - perhaps a way to do that in the title or the body of the box to hide some parts of a box.

Any other ideas are very welcome. I got a comment of "I want to do LibGuides style tabbing" and am trying to come up with some better solutions.

Miriam

Ron Gilmour

unread,
Aug 1, 2012, 8:05:14 PM8/1/12
to subjec...@googlegroups.com
My usual solution to really long guides is splitting them into smaller guides. This has the added benefit of allowing you to complain later about how many guides you have to manage.

"Pluslets" are already collapsible if you click on the title bar, but it's a hidden feature (why would anyone click there?), and they're all expanded by default.

Maybe in a future version there could be a field to control whether a pluslet was expanded or collapsed when the page loads.

For a "back to the top" link, you could add an anchor tag to the beginning of the markup in your top pluslet. I wonder, though, if "back to the top" links represent one of those odd conventions from the early days of the Web. We all know how to use a scrollbar by now.

Ron Gilmour
Ithaca College Library





Miriam

--
You received this message because you are subscribed to the Google Groups "SubjectsPlus" group.
To view this discussion on the web visit https://groups.google.com/d/msg/subjectsplus/-/Uv-SvKnPdOcJ.
To post to this group, send email to subjec...@googlegroups.com.
To unsubscribe from this group, send email to subjectsplus...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/subjectsplus?hl=en.

Julia Bauder

unread,
Aug 2, 2012, 10:24:41 AM8/2/12
to subjec...@googlegroups.com
I built an expand/compress feature here, although we call it show/hide, which may be why you didn't find it when you searched the list archives. I built it in an earlier version of SP (I think 0.7); it still works fine on the public side in the newer versions, although on staff side it doesn't interact as well with the drag-and-drop rank ordering as I would like. You can see it in action here: http://libweb.grinnell.edu/sp/subjects/POL/ ; look for the "Show/hide more X" links at the bottom of some sections.

I'm in the process of writing up instructions for how to implement that for someone else who asked, so I can send them along to you when they're done, too, if you're interested.

Julia

*********************************************

Julia Bauder

Social Studies and Data Services Librarian

Interim Director of the Data Analysis and Social Inquiry Lab (DASIL)

Grinnell College Libraries

1111 Sixth Ave.

Grinnell, IA 50112

 

641-269-4431

bau...@grinnell.edu



Miriam

--

Andrew Darby

unread,
Aug 7, 2012, 2:24:44 PM8/7/12
to subjec...@googlegroups.com
Hi Miriam,

I have an experimental back to top on a (dev server) SubjectsPlus page here:

http://dev-www.library.miami.edu/sp/subjects/staff.php

Technique here:

http://typicalwhiner.com/116/effortless-jquery-floating-back-to-top-script-v2/

Andrew

gs@stcloudstate

unread,
Oct 30, 2012, 1:40:50 PM10/30/12
to subjec...@googlegroups.com
We wanted the same thing where the "All Items by Source" was compressed by type and each type can be individually display by clicking. We used the expand icon to
indicate there is something to view. Below are the changes we made to implemented it.

Gordie

 

Added show/hide,(display hidden/visible) feature to pluslet "All Items by Source"
1. Add css and small script to <head> area of  the header file, in this case I added to our custom-header.phtml that is called by the header.php file

[css stuff]
.nolooky {
     display : none;
     }

[script]
<script><script>
function showhide(id){
     jQuery('#'+id).toggle('slow');
     
}
</script>


2. Modify /sp/control/includes/classes/sp_Pluslet_1.php, in function output,
We really don't need the TOC, so we decided to disable it
from:
       /////////////////////////
        // Create TOC
        /////////////////////////

        $TOC = self::createTOC();

       $this->_body = $TOC;

to (comment out the TOC stuff):
       /////////////////////////
        // Create TOC
        /////////////////////////

        //$TOC = self::createTOC();

        //$this->_body = $TOC;
--------------------
from:
            if ($this_source_id != $last_source_id) {

                $results .= "<p  class=\"leftcolheader\"><a name=\"$myrow[4]\"></a>$myrow[3]</p>\n\n";
                $last_source_id = $this_source_id;
                $res_class = "dbresults no-border";
            } else {
                $res_class = "dbresults";
            }

to:
          if ($this_source_id != $last_source_id) {
             $results .= "$enddiv"; #first time through $enddiv is blank which is what we want

             $nolooky_id += 1;  
             $nolooky_id_name = sprintf("nolooky_id_%d",$nolooky_id);  # create unique id names for each information type

                $results .= "<p onclick=\"showhide('{$nolooky_id_name}')\" class=\"leftcolheader\"><img src=\"/sp/assets/images/icons/expand.png\" />&nbsp;&nbsp;<a name=\"$myrow[4]\"></a>$myrow[3]</p>\n\n<hr><div id=\"{$nolooky_id_name}\"class=\"nolooky\">";
                $last_source_id = $this_source_id;
                $enddiv = "</div>";
                $res_class = "dbresults no-border";
            } else {
                $res_class = "dbresults";
            }
---------------------
And a little lower down, from:
        }

        $this->_body .= $results;

        parent::assemblePluslet();

        return $this->_pluslet;

to:
        }
        $results .= $enddiv;  # needed this last closing </div>

        $this->_body .= $results;
        parent::assemblePluslet();

        return $this->_pluslet;

Reply all
Reply to author
Forward
0 new messages