Gravity forms is about as easy to use and versatile a WordPress plugin as you can get, but every now and again I run into something it just doesn’t do. In this case I needed a date field that can be restricted to just work between two dates. I looked through the Gravity forms documentation and found out about the various actions and filters that were available, then I found an excellent tutorial on WPSmith.

After reading these two resources I managed to create a plugin that you can download and use free of charge. The plugin adds an extra field type (date in range) into the form editor. After you add the field, it gives you two extra options on the advanced tab – Start Date, and End Date. Both are optional, which means you can create a “Dates after…” , a “Dates before…”, and a “Dates between…” field without any issues.

The Gravity forms date limiter plugin also lets you create customised validation messages that include the start and end dates. Just include %%startdate%% and %%enddate%% in the validation message and they will be replaced at runtime.

The only other option is the date format – this can be changed in Settings -> Gravity Forms – Date Limiter. Valid options are dd/mm/yy and mm/dd/yy.

I’d love to hear where you’re using this plugin, get feedback, or get feature requests – just drop me an email via the contact page.

The post Gravity Forms – Limited date field appeared first on Smart red fox.

This version adds a category marker picker that allows you to set different markers for each category. It also allows you to choose which markers take precendence if more than one category is assigned to a location. You can buy it now from CodeCanyon or view a demo.

The post Map List Pro appeared first on Smart red fox.

It’s an almost complete rewrite of Pretty File List with lots of new features added in. More details below:

File List Pro lets you quickly display files attached to a post or page, in a paged, sortable, searchable, and filterable list. It comes ready to go with 18 styles and is fully customisable.

File List Pro is perfect for creating lists of PDF newsletters, Excel spreadsheets of company accounts, Powerpoint Presentations ready to view, or Download lists for zip files.

You can manually choose the files you want to show from a list, or specify criteria and have the list update itself automatically. It evens add tagging functionality to files so that you can have multiple auto-updating lists on the same page.

Currently the File List Pro WordPress plugin is just $10 with prepaid credit through CodeCanyon (one of the Envato Marketplaces).

Buy now View demo

The post File List Pro appeared first on Smart red fox.

Before first post

After first post

Final image

The parts of the (w)hole

A side-on view of the porthole

The final image is made up of:

The original image which has a drop-shadow and border applied via css.

A 5px wide border that is grey on 3 sides and white at the top.

A dark grey 1px border to define the outer edge.

Adding content with pseudo-elements

It’s not possible to add more than one border to the div that displays the image, but we can add more items to get the additional borders we need. Doing this manually would be a pain, and would create extra html elements which we don’t need. Fortunately, we can generate everything that we need in css with the :before and :after pseudo elements. This technique is lifted wholesale from Nicolas Gallagher’s website, so look there for more detail on the technique.

Changes to the original code

The image itself is moved from the image div and put onto the pseudo :after element we create so that it appears on top of the others. All of the sizes are also changed to match the additional size needed for the borders we are adding.

The new css for the portholes is below:

Css

.image
{
/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

background-repeat:no-repeat;
border:1px solid #CCCCCC;
display:block;
height:66px;
overflow:hidden;
position:relative;
margin:10px;
width:66px;
z-index:1;
}

.image:before
{
content:”";

/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

position:absolute;
z-index:-1;
top:0px;
left:0px;
right:0px;
bottom:0px;
border:5px solid #ccc;
border-color:#fefefe #f0f0f0 #eaeaea #f0f0f0;
}

.image:after
{
content:”";
background:#fff url(../images/finance.jpg) no-repeat 0 0;

/*Shadows*/
-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

/*Glow effect*/
-webkit-mask-box-image:url(../images/circle60pxglow.png);

/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:1px solid #999;
}

Internet Explorer

IE6 and IE7 don’t recognise the Pseudo elements at all which in this case means that our image won’t show at all. To work around this we can use a hack to move the background image back to the image div.

Css
Add the following to the .image{} declaration:

/*IE6/7 hacks*/
*background:#fff url(../images/finance.jpg) no-repeat 0 0;
*width:60px;
*height:60px;


Obviously if you’re using something like Modernizr or conditional comments then you need to drop the hacks and add the appropriate css elsewhere.

If you find this tutorial useful, or have a better way of doing something please let me know in the comments.

References

This design would not have been possible without this excellent article by Nicholas Gallagher:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

The post Css portholes appeared first on Smart red fox.

Adding an inner-shadow to make it look like the image is embedded into the page is just as easy, but not quite as well supported with just css (Chrome has problems).

Finally adding a shine effect means creating a special image first, and it’s only supported in WebKit based browsers (Chrome and Safari).

The code below lets you achieve the effect, and it degrades gracefully for browsers that don’t support parts of the effect.

Before

After

Getting started

First we create a single 60px by 60px div with an image added into the background via css. This is the basic starting block.

Css:

.image{
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}

Rounding the corners

Then we round the corners enough to make our div into circle. Note: The radius is half the full width of the circle, so to get a 60px circle we have to set the radius to 30px.

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}


Adding a shadow

To make the image appear to be embedded into the page we can add an inset drop-shadow.

.image{

-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;

}

Problems

A problem with this layout occurs from an unexpected source; Chrome (as of  version 8.0.552.224) doesn’t clip the inset shadow properly when used with rounded corners so you get an odd square with our circular image in the middle.

Normally we could just switch the shadow off the for the offending browser and degrade back to something usable. The problem with this is that Safari and Chrome both use the WebKit rendering engine, so both of them would lose the shadow. This doesn’t seem like the right thing to do when Safari supports this fine.

The fix, a new problem and a workaround

It is possible to get Chrome to play ball by doing the clipping ourselves with an image mask.

Initially I tried to do this with an SVG file so that I could apply it to any size circle without having to recreate the image each time. Unfortunately it appears that Chrome also doesn’t support SVG files being used as masks. The work around is to use a png file with a single white 60px circle.

.image{

-webkit-mask-box-image:url(../images/circle60px.png);

-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;

}

Mask:

circle60px.png

Added bonus for WebKit based browsers – Glass effect

Because we’re already using a mask anyway it’s quite simple to add a shine/glow effect to the image using the mask file. This is completely ignored by FireFox, Opera etc.

circle60pxglow.png

If you’ve got any comments, fixes, or suggestions on how to do this better please let me know below.

References:

Css3 shadows and rounded corners:
http://css3please.com/

Masking:
http://webkit.org/blog/181/css-masks/

The post Rounded, shadowed, and shiny pictures with CSS3 appeared first on Smart red fox.

The jQuery version of the page peel script has been very popular on SmartRedFox.com, and I’ve finally got round to making some updates and changes to it.

Since I wrote the original article I found this site, which seems to have the original Flash files for the peel effect, as well as a copy of the non-jQuery version of the files. So, if you want to edit the .fla files, or you don’t want to use jQuery to display the page peel you may want to head over there now.

Updates:

• The most requested feature for the original script was for it to open the link in the same window. This is now a configurable option. (Note: I’ve changed the default to be that the link opens in the same window).
• I’ve changed the default images to make it easier to create your own.
• Stopped the dotted outline from appearing when you click on the advert.
• Assorted other fixes.

To use the new page peel edit the peel.js file to match your set-up:

• smartredfox.link_url – This is the full url (including http://) that you want users to go to when they click your advert.
• smartredfox.newWindow – Set this to true if you want the link_url to be opened in a new window.
• smartredfox.small_image – This is the full path to the image users see when the image loads.
• smartredfox.big_image – This is the full path to the big image that appears when users roll over the page peel.
• smartredfox.small_path – This is the full path to the small.swf file.
• smartredfox.big_path – This is the full path to the large.swf file.

Then include the peel.js file and jQuery in the head of your website:

[xhtml]


[/xhtml]

Download now View demo

If you have any feedback or feature requests please post them in the comments below.

[ad#ad-3]

The post Free jQuery page peel (updated) appeared first on Smart red fox.

SmartRedFox is pleased to announce it’s first ever jQuery plugin – the Totaliser.

It’s a simple plugin that takes a text box and turns it into a fruit machine style number updater. It’s easier to see than explain, so take a look at the demo.

There are a couple of things you need to know to use it:

1> Include the js file after your jquery include:

<script type=”text/javascript” src=”YOURPATHHERE/jquery.totaliser.js”></script>

2> Call the totaliser against a textbox to create it:

$(‘#textboxid’).totaliser();

3> When you want to update it just call UpdateTotaliser with a new number:

$(‘#textboxid’).totaliser(45545666);

or

$.fn.totaliser(45545666);

There are a few configurable options for the totaliser:

• digits – this sets how many digits the totaliser displays (default is 9)
• currency – set this to false if you don’t want to show the currency symbol
• currencySign – this sets what currency symbol shows before the number (default is british pounds).

So for example to load it up with the dollar sign and only 6 digits you’d call the following:

$(‘#textboxid’).totaliser({digits:6,currencySign:”$”});

Download Totaliser View demo
If you have any bugs, suggestions, improvements, or just want to let me know that you’re using it, please leave a comment.

[ad#ad-3]

The post Totaliser – make your numbers roll appeared first on Smart red fox.

First, the problem

This is a real example from a project I’m working on at the moment. This layout worked perfectly in FF3, Chrome, and IE8. It was only when I came to look at the layour in IE6 that I saw the problem.

When first loading the page the following shows:

Broken in IE6

As you can see the box with the tick in it is in completely the wrong place – it’s supposed to be just above the “read more” link. Now is where IE6 shows it’s real strangeness. When I hovered over the read more link, or the item itself, it moved to the right place.

I’d seen this problem a few times before, and thought I knew what I was doing to fix it – a light smattering of Position:relative, and Zoom:1 and I’d be done. Unfortunately, it wasn’t that simple. My next step was a search around the internet-o-web where lots of people seem to describe something very similar, and most of them recommend applying Position:relative to the parent of the float. This didn’t work for me.

A bit more playing with my setup revealed that applying Position:relative to the list item (the parent’s, parent’s, parent) fixed the problem. One to file away for the future!

Here it is where it’s supposed to be.

The post IE6 – Items moving when hovering over another element appeared first on Smart red fox.

Timebot is an automated system that checks to see if someone is onsite by looking for their mobile phone or bluetooth enabled device. Timebot is easy and quick to configure, and saves a users time out to Google Calendar for easy management and sharing.

Take a look now – any feedback is greatly appreciated.

The post TimeBot – Automated timesheets using Bluetooth appeared first on Smart red fox.

A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.

I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.

A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.

So my final stop was to combine the two. I also incorporated any fixes I saw in the comments section of jQuery for Designers.

You can download the script here.

Or see a demo here.

The image file I use for the tooltips can be downloaded here, and is free for anyone to use.

[ad]

The post Very simple Jquery tooltips appeared first on Smart red fox.