Archive | Web Development RSS for this section

Anything Slider


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

In particular:

  • 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…)

Solution:

CSS First: The original CSS sheet looks like this (the original classes and ID before I changed them):

And:

After Editing the CSS:

And:

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:

Before Styling:

Menu Has Numbers and Is below my slider. Looks gross too.

After Styling:

Looks much Better

So that sums it up. Hope that helps you use the anythingSlider a bit better. Thanks.

Advertisements

Insurance Agent Management


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.

HTML5- The Details tag


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,

 

used symbiotically with the tag. It’s a new way to show/hide information similar to a drop down list or a FAQ sections, WITHOUT any CSS or JavaScript (jQuery for me) necessary. Currently if you want to create a list that show/hides when someone clicks on it, that usually involved some scripting utilizing “mouseclick” or “onclick” functions. Not really that big of a deal, but compare that to the simplicity of the

tag, and you’ll begin to see what im talking about.

 

 

The Code:

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.

Overall, it’s a wonderfully useful tag, but as you can see from the images, Chrome is currently the only browser that supports this, so if you do decide to use the details tag, you will have to take some preventative measures for all the other browsers to make sure that your show/hide effect still happens. All in all, since 1 out of the 5 major browser supports this tag, I would recommend just sticking with JavaScript for now, but hopefully in the near future, browser updates will have support for

 

.

 

 

%d bloggers like this: