html

Forms with Multiple Checkbox Arrays

When I’m making web forms I can never remember exactly how to set “stuff” up.  I’m thinking I’m probably not the only one with this leaky brain problem.  Anyway, I was setting up a pretty large form today and had to create a group of check boxes.  When you’re doing a checkbox group and actually need to be able to see all of the checkboxes that were checked so you can save the info to a database, you have to jump through a couple hoops. First of all, here’s what you get when you do a search for “checkbox group html” in Google.

That seems right, right?  Just name each checkbox in the group the same thing, and you’re good to go.  The problem is that when you try to read those values in PHP, all you get is the last one (value3, in this case). To get all three values, you need to make the checkboxes part of an array, like this.

Then, when you need to get the values, you just step through the array, like any other array.

Pretty simple.  Just thought I would share so maybe it helps someone else.    

the-plugin-generated-x-characters-of-unexpected-output-during-activation

The Plugin Generated xxx Characters of Unexpected Output During Activation

the-plugin-generated-x-characters-of-unexpected-output-during-activation

While developing a custom WordPress plugin I saw this error when activating it. 

The Plugin Generated xxx Characters of Unexpected Output During Activation

I did a little Googling and found that there are a few most common causes:

  1. A white space before or after the PHP opening or closing tags
  2. A file encoded in UTF-8
  3. Another issue when something is called at the wrong time, or a call that cannot be resolved without intervention
  4. Using the WordPress add_option function. Switching to update_option instead can resolve the problem.

In my case it was #1 that blew it up for me.  Who woulda thunk a blank line would be so horrible?  

Anyway, hope this helps someone down the road who is pulling their hair out like I was.

Slide1

Responsive iFrames (like YouTube videos…)

I’m working on converting a website from plain-Jane to responsive and the website happens to have some videos.  That’s all great and everything, except when you embed a YouTube, Vimeo… video or pretty much anything with an iFrame, like Facebook and Twitter embeds, they are fixed width and blow out your pretty little responsive design when you get to a screen width smaller than the fixed width of the embed.

I didn’t like that, so I went looking around and found that there is a way to kind of brute force the issue using CSS.  

**disclaimer:  This may only work on recent browsers.  I haven’t bothered to check because, really, shouldn’t everyone be using an HTML5 capable browser by now?  Seriously.  Get a life if you don’t.  Hasn’t it been made painfully clear that no one with a brain uses Internet Exploder anymore?

So, anyway, here’s how you do it.

The CSS

 This is obviously geared toward videos, since the container is called “video-container”, but I’ll show you how to do it for Facebook below.  It’s a hair different.

Once you have the CSS in place, here’s the code for your HTML

 This is the basic embed code from Vimeo for the first video I was trying to make responsive.  I think the HTML is pretty straight forward.  What all this nonsense will give you is a video that is 100% the width of the container it lives in.  In my case, the container it lives in consists of a number of spans in the Bootstrap Framework.  It would work just as well in an responsive design though, I think.  As long as you don’t step on any class names.

Ok, so, now that we have that figured out, here’s how we do it for the Facebook iFrame.

CSS

 Notice it’s basically the same, except I dumped the overflow and added some margin below the main container.  If you leave overflow: hidden in place, you lose the bottom of the Facebook frame, so I commented it out and added some margin-bottom to keep the whole frame in the container.

HTML

 So, I know, there’s still a width and height in both HTML examples.  Through some kind of magic that I don’t really want to get into, the CSS overrides those those settings.  

So, hopefully this saves you some time if you came here trying to figure out how to make stuff responsive.

 

Slide1

Require Login For Single WordPress Page

By default, anyone who comes to your WordPress website can see any page on that website.  What if you want your website to be open to everyone, except you really need to have a page or two that only registered, logged in users see?  Example?  A company intranet, a calendar that’s only for family or a contact info page that’s only for family.  Whatever the reason, there are only a few ways to make sure a page isn’t open to the world.

Make the page private

You know what I mean.  When you’re editing your page you look over on the right side just above the Publish/Save button an see a “Visibility” option.  You can make that private and the page is hidden from the public, but it’s also hidden from all other registered users.  When set to private a page also doesn’t show up in the main menus or anywhere else.  It’s basically hidden from everyone from the one who made it private.

Password protect the page

Under that same “Visibility” section you can also choose “Password protected”.  This is good.  The page shows up in the menus and all that, but this option asks for a password for this particular page.  Basically, you set a password for this page and then you have to share that password with anyone you want have access to the page.  That’s not quite what I’m after.

Create a new page template

So, to recap, I wanted a page that shows up in the menus just like any other page but whose content can only be seen by users who have an account on the website and have logged in.  For all others, I want the page content hidden.  Here’s what I came up with because I couldn’t find a plugin that accomplished this without annoying upgrade messages or adding a lot of bloat for no reason.

  1. Create a new page template by making a copy of your theme’s existing page.php template.  I named mine “page_logged_in.php”.
  2. Once you have your page you need to edit the file in whatever editor you like.  I use Dreamweaver, but any text editor will work just as well.  The first bit of code you need to add names the template so you can find it later.  (This is what you’ll select in the WordPress admin when creating your new page.)  Just add the following code to the very top of the code.  There will most likely be something similar already there.  If so, just replace it.
  3. Now you need to add a little code to see if the user is logged in.  This is pretty easy.  WordPress has hooks built in for this.  The following can be added directly below the Template Name code above, also at the top of the page before any of the standard WordPress stuff.

     

  4. Now, go to the very bottom of the page and add the following code.  This will call wp_die() to halt WordPress and display a notice to the visitor saying they need to log in to view the page.

     This little snippet does a couple things.  If it runs (if the user isn’t logged in) then it halts the page and displays a message that says “To view this page you must first log in.”  The words “log in” are a link created by wp_login_url() which is another WordPress hook.  You may notice get_permalink() embedded in wp_login_url().  What this does is gets the address of the page you’re on so that when the user clicks the link to log in, they come back to your password protected page once they log in.  You can forward them pretty much anywhere you want, but I like to bring people back to where they started to minimize confusion.

  5.  

    Now just save the page template and upload it to your web server where your template files are.  Hopefully you simply duplicated page.php where it already lived, so this is a no brainer.

  6. Next, go to WordPress and create a new page.  Under “Page template”, select the new page template we just created.

  7. Save your new page and that’s all there is to it. That page will now appear just like any other page in your menus, but when a user who is not logged in tries to visit it, they will receive the notice you included above.

Hope this helps.  I looked for a way to do this for about a half a day.  This seems to be a simply way to go about it.

 

section508-150x150

Section 508 (Website Accessibility)

Section 508Working with Lane Community College I have to make sure my work conforms to Section 508.  Very big deal for education, and anyone who wants their website available to the widest possible market, really.  It used to be that blind folks and people with certain disabilities were just kind of ignored as far as the web goes.  That’s not the case anymore.  Screen readers have come a long way.  Just for fun I used the accessibility functions on my iPad last week.  It’s pretty amazing just how clear of a picture you can get of a web page without your eyes assuming all the proper “stuff” has been done.  Doing the audit on the DQP website really opened my eyes (no pun intended). 

Officially the law only requires government agency web sites to be accessible, but, if you have a web site, why would you not want those who need assistive technology to be able to use your website.  Even if the only thing on your website is your name, phone number and address, you still want the blind guy across town to spend money at your place of business, right?  Imagine if all your competitors don’t have the forethought to do the work on their website and yours is the only one the aforementioned blind guy across town can read…

Anyway, here’s some official stuff about Section 508.

In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. Inaccessible technology interferes with an ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, open new opportunities for people with disabilities, and encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘794 d), agencies must give disabled employees and members of the public access to information that is comparable to access available to others. It is recommended that you review the laws and regulations listed below to further your understanding about Section 508 and how you can support implementation.

Section 508 of the Rehabilitation Act (29 U.S.C. ‘794 d), as amended by the Workforce Investment Act of 1998 (P.L. 105 – 220), August 7, 1998

(original source in uscode.house.gov)

If you would like an audit done on your website, and a quote on making sure those with disabilities can use it, shoot me an email.  I’m happy to spend a little time.

screenshot_16-150x150

DQP (The Degree Qualifications Profile)

The DQP Project in Oregon is a joint effort of all seven Oregon University System (OUS) institutions and the state’s seventeen independent community colleges to develop the Degree Qualifications Profile for Oregon. The DQP Project in Oregon will provide a descriptive curricular framework for describing institutions’ degree outcomes across the state, both in their unique characters and in their shared aspects. The project relates directly to the missions of each institution to support their students’ success during college, upon graduation, and in transitions within the Oregon educational system. This statewide partnership of educational institutions has the active support from both the Oregon University System (OUS) Chancellor and the Oregon Community Colleges and Workforce Development (CCWD) Commissioner.”

Now that we have the “official explanation”, here’s why I’m talking about it.  I have been hired for the duration of the DQP grant to act as DQP Web Applications Developer working on-site at Lane Community College.  The project is pretty cool.  Lots of technology and lots of awesome people in the IT department at Lane.  

I started full time with them early in December 2012 and will be there until sometime mid-2015 working on this and other related projects.  The DQP is my core responsibility, so that’s what I’ll talk about here.  I’m going to break it up by section though.  Otherwise this would be one really long post.  

The website itself is set up so that member institutions have one place to go to get and store information on the DQP program.  There is a public side (with public data for everyone to see) and a secure side (where the institutions go to input data that feeds the public side).  

screenshot_16

The design of the site is pretty basic.  Logo, mega-menu, breadcrumbs, custom PHP stuff, footer menu…  The entire site layout is CSS with tables being used ONLY for tabular data.  Just the way it’s supposed to be.  I took a lot of time to make sure it loads properly in recent browsers (back to IE 8) and loads quickly considering how much “stuff” is going on behind the scenes.  

Stay tuned for posts about specific areas of the website.  It’s pretty cool stuff.  

If you want, you can check out the DQP at http://www.oregondqp.org

Mercy-Hospital-Nampa-Idaho-Custom-Calendar-150x150

Mercy Medical Center – Nampa, ID

Mercy Hospital in Nampa Idaho is a client of BBG Marketing.  Mercy wanted a calendar created for their website so they could input events and have them come up in order with certain details, like time, duration and location.  At the time there just weren’t any open source applications to install, so I wrote them custom application to suit their needs.  It was pretty cool.  They could add, edit and duplicate events with a few clicks and they would display through the day of the event, then disappear.  

Mercy Hospital - Nampa Idaho - Custom Calendar

For the events that recurred every week, the calendar would display the single event with multiple dates, but as the date passed, it would disappear leaving the rest of the dates for that month.  Seems simple, but it was quite the ordeal.

I always liked working for Mercy Nampa.  A couple years ago their parent corporation, or whatever you call the big group a hospital belongs to, changed hands and the new company had internal web guys.  They had me help with the transition and even had me take care of a few things before the final change, but I haven’t worked on their stuff in a while now.  I’ll have to check out the current site.  See if it’s as good as the work I did.  🙂

Brent-Gunter-E-Commerce-and-Contact-List-Integration-150x150

Brent Gunter (Musician)

Brent is a musician from the Portland area.  He spends a big chunk of the year traveling around doing concerts and needed a way to sell tickets on his website.  He already had the website, but had no idea how to integrate PayPal and a shopping cart.  He called me and I took care of him.  Not a huge project, but it was a pleasure listening to his CD while I worked.

Brent Gunter - E-Commerce and Contact List Integration

He also had an email list he needed to be able to manage through his website.  Pretty easy stuff these days, but it used to require some javascript editing to get those list managers to look like your site.  I think it came out really well.

Schola-Antiquae-Vocis-150x150

Schola Antiquae Vocis

This was a singing group my mom belonged to.  As you can probably imagine, I didn’t have to try real hard to get the job working on this site.  Of course, I also didn’t get paid much for it.  I think it was a pretty nice design though.  At the time, the circles and stuff were really in.  

I figured the site needed to look as good as the group sounded.  I came close.

Hire-A-Daughter-150x150

Hire A Daughter – Eldercare

Hire A Daughter was  a cool idea an ex-eldercare provider had.  She had worked in memory care facilities and just didn’t like the lack of attention she was able to give the residents.  She decided to go out on her own and do in-home visits and respite care.  Unfortunately, the business never took off.  Maybe a little ahead of its time.  The website was really cute though.  🙂