I am currently working on a new project that involves a home page/landing page that must deliver lots of information without the “overload” effect. What better choice than a nice big slider that allows me to add numerous (I wouldn’t say limitless) slides.
I did my research and concluded that the anything slider jQuery plugin offered the most functionality for what I wanted to do.
Easy Part: Setting up the HTML, a few div tags, an ID selector, etc. The plugins and most of the scripting can be copied from the net and used by inserted your ID.
Hard Part (In my opinion): styling the slider
- Positioning the menu to be inside the slider instead of below it.
- Uses images from my design as the navigation images, including active and hover states
- Removing the numbers from the navigation (1,2,3…)
CSS First: The original CSS sheet looks like this (the original classes and ID before I changed them):
After Editing the CSS:
Lets look at what is going on here:
First, for some reason, the default CSS is set up to add an extra class onto the navigation links that prevented me from changing the active states. All I had to do was delete the class div.anythingSlider.activeSlider .anythingControls ul a, and make sure to the leave the a.cur class (that’s the plugin’s “active” denotation)
Second, by just playing around with the styles of the .anythingControls ul a, you can add images, spacing, etc. The bottom two classes in the new CSS do two things. The first class removes the numbering from the controls links (display:none) the second class gives me my hover image (which in this project is the same as the active state).
That solved all my CSS problems.
Positioning AnythingSlider Navigation within my HTML Slider:
This was just a simple trick that took me entirely way too long to figure out, but all you need to do is:
Set #slider (whatever your slider ID is) to have a greater Height Value than what you will set the anythingSlider Height to.
In my case, my #slider height: 545px;
While my anythingSlider height: 490px;
When it’s all said and done this is my result:
Menu Has Numbers and Is below my slider. Looks gross too.
Looks much Better
So that sums it up. Hope that helps you use the anythingSlider a bit better. Thanks.
Finally launched our new website for an Insurance Agent Management software tool. It has a very nice web 2.0 look (heavy graphics). Check it out Amos365
The project began when our company recognized some serious management resources constraints that could be effectively eliminated via the correct software application. Our team set out building the project specifically for Peek Performance, a medium-sized insurance agency in the upstate South Carolina area. Working with an actual insurance company provide our developers with necessary feedback and insights to improve the software.
The fundamental purpose of the application is to eliminate the large paper trail associated with managing insurance agents and drastically reduce the number of upper level management supervisors required behind the scenes.
So with all the new buzz around HTML5, I thought it only proper to add my 2 cents to the pot.
If the title hasn’t already given it away, perhaps one of my favorite new tags in HTML5 is the Details tag,
Ignore the <section> tag, that is just a new container type tag to replace the use of so many <div> tags (more on that later), but the application here is pretty simple. All it require, structurally speaking, is the parent <details> followed by the child <summary> and then whatever you want to be shown/hidden on click. This means that in my browser, I will see the “What browser currently support the details tag?” but nothing underneath it until I click the sentence, like such:
Notice the arrow next to our summary. That is just the browser default and can be style to use any image provided with some simple CSS, but for now we’ll just focus on the HTML.