Solved

Identifying the components of a floating toolbar / toolbox

Posted on 2012-04-06
4
772 Views
Last Modified: 2012-04-06
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
Comment
Question by:TimberJon
  • 2
  • 2
4 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 37816916
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
 

Author Comment

by:TimberJon
ID: 37817026
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37817052
"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
 

Author Comment

by:TimberJon
ID: 37817408
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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now