• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 798
  • Last Modified:

Identifying the components of a floating toolbar / toolbox

Hi all,

I have a basic understanding of html and how and where things typically link in a website. I am not very familiar with css, jquery, ajax, hooks, floats, etc... etc...  but I like to tinker.

What I am looking to essentially duplicate can be found at www dot tripplite dot com. Am I right in calling this a floating toolbar? Would it still be called a sidebar? As I have been reading up on this stuff.. I have come to see a sidebar as a widget that is a primary part of the website page. I only want this element to truly float above the site, regardless of the content below it.

To start, I would just like to find out how to identify the files required to make this object work. Where does the CSS go, is there php? where do the images go? etc...
I really just need help finding the parts.

Once I can for the most part duplicate this thing, I am sure I can figure out how to change the text and links. I have inspected this element and it's code already but can't gleam any clues as to it's "total" construction. The next step will be sizing the visible bar when it is collapsed. I might want to add a small logo or icon to the bottom, etc. If it is based on some graphic files, great! I can edit those to achieve what i need.

Can anyone help point me in the right direction?

The website I am looking to implement this on is built on Wordpress, but self-hosted, and runs on a linux server. Apache v.2.2.21, PHP v.5.2.17. Please ask if you need any other information from me.
0
TimberJon
Asked:
TimberJon
  • 2
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
First off: if you are using WordPress, there are plugins that will add a floating sidebar to your site.  Just putting that out there.

>> I have come to see a sidebar as a widget that is a primary part of the website page.

Ehhh.  A sidebar is better defined as a column to the left or right of the main content of the page.  Widgets are blocks of text or code than can be placed where ever they are supported.  In CMS terms, you usually have widgets placed within a sidebar but headers, footers, and content areas can also be widgetized.

The element you are referring to is more accurately called a floating sidebar and specifically it is responding to the onhover event to slide in or out.

>> I only want this element to truly float above the site, regardless of the content below it.

Here's a pretty good tutorial in two parts (a bit Dreamweaver-specific but not terribly so):

http://www.youtube.com/watch?v=wuTstiiz4fg
http://www.youtube.com/watch?v=vToXQiUlOlc

It focuses more on a visible menu but the placement and the floating behavior are what I want you to see.  Once you have that down, you will add JQuery to the mix, specifically the hover stuff

http://api.jquery.com/hover/

In the end, you'll have something like this:

CSS:
#sidenav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#sidenav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#sidenav a span{margin:0 10px 0 0;}
#sidenav a{color:#fff;font-size:14px;text-decoration:none;}

Open in new window


JQuery:
$(function(){
    $('#sidenav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

Open in new window


HTML:
<div id="sidenav">
<ul>
<li><a href=""><span>01</span> Home</a></li>
<li><a href=""><span>02</span> Page 1</a></li>
<li><a href=""><span>03</span> Page 2</a></li>
<li><a href=""><span>04</span> Page 3</a></li>
<li><a href=""><span>05</span> Page 4</a></li>
</ul>
</div>

Open in new window

0
 
TimberJonDirector of ITAuthor Commented:
I will read up on this at lunch. I immediately plugged all that into www.jsfiddle.com (which I just found today) and I can see a visual representation of what you posted. Does this match? http://jsfiddle.net/TVwAv/90/

I actually have been using Dreamweaver for years (mostly only for editing) so I might understand more of the tutorial material.

The only sidebar plugin I found for wordpress sites self-hosted is the Strx floater at: http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/screenshots/
The few dozen plugins I looked over seem to be specific to social media icons, displaying posts, recently changed items, list of categories or just a static area for navigation items.
This is a corporate website.

I won't totally shoot down trying to use a plugin though. I wonder if a static sidebar would be a place to start to get what I want, but since most of them are designed by someone else.. and usually tailored, I thought it might be a better use of time if I tried to instead work one up from scratch or clone one that is already functional.

I will get back soon. Thank you.
0
 
Jason C. LevineNo oneCommented:
"I immediately plugged all that into www.jsfiddle.com (which I just found today) and I can see a visual representation of what you posted. Does this match? http://jsfiddle.net/TVwAv/90/"

Yep, that's what it is.  You can see I'm using 100% for the height.  Change that part of the CSS to whatever size you would want it to be and it should shrink to match.

"The few dozen plugins I looked over seem to be specific to social media icons, displaying posts, recently changed items, list of categories or just a static area for navigation items."

Yes but the technique of embedding the floating sidebar is what's important, right?  Once you understand the structure of the plugin, changing the contents would be trivial...
0
 
TimberJonDirector of ITAuthor Commented:
Ok watched the tutorials. I might need to hit up that guys site to see if he has additional material on those.

I agree on your last comment. I suppose I will snag a plugin that is the closest thing to what I need, and try to tweak it. Thanks man.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now