[alert type=”notice”]This free plugin for WordPress requires you to have a copy of Gravity forms.[/alert]
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.
[button color=”green” size=”large” link=”http://www.smartredfox.com/wp-content/uploads/2013/05/gf-date-limiter_0_5.zip” target=””]Download Gravity Forms Date Limiter[/button]
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.
After the success of my two free WordPress plugins – Pretty File Links, and Pretty File List – I have completed my first commercial plugin.
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).
This tutorial builds on a previous post for creating a rounded inset image from a square picture, this tutorial adds a complex border to make the image look like a stylish porthole.
Before first postAfter first postFinal 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.
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:
It’s easy to create round pictures from square ones using just CSS. It does mean using some proprietary css, but it’s relatively well supported – FireFox, Chrome, Safari, Opera, and IE9 are all OK with it.
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.
BeforeAfter
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.
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.
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.
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.
New mask:
circle60pxglow.png
If you’ve got any comments, fixes, or suggestions on how to do this better please let me know below.
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:
UPDATE 24/08/2010: Various fixes and updates have now been incorporated, and the instructions below have been updated.
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:
I know this is a common problem, and is well documented on a number of sites, but each time I run into this problem I seem to forget the best method for narrowing down where the problem is coming from.
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!
For a while now I’ve been working on a simple way for people to record their working hours and create timesheets automatically, and now it’s finally ready for release.
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.
UPDATE: I’ve made a couple of changes to the script to make it easier to use and there’s now a demo available.
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.
