JSFiddle

Joakim's public fiddles

  • Fluid/responsive font size with SCSS. With max/min size.

    The vw size is great for responsive and fluid font size. But it comes with the challenge that it does not have a max or min size, which can cause some trouble. It is not possible to set max/min size in font-size, there is no such attribute. The solution is media-queries. This SCSS mix-in calculation helps you out really well when you want to set vw-size with max and min size.

  • Dynamic width depending on numbers of child elements. CSS only!

    Sometimes you use dynamic/user created content and do not know how many elements there will be. And that may cause some problems if you want to be able to generate different numbers of child elements, in this specific case li elements - but keeping the layout fluid no matter what. Usually you need something else then CSS to count the child lements and add classes to parent to control this. But by doing this solution you only need pure CSS to handle different amount of elements dynamically. You can change or add as you want to fit your solution.

  • Form, with validation and full accessibility

    This form will fullfill WCAG 2.0 requirements with no problem. It is very dynamic to add, edit or remove fields from it. Try this out by trying to submit the form with fails to see how it handles it, both visual and in wai-aria. If you want to, use a screen reader to see how it acts. See comments in jQuery code for more logic.

  • Tab shortcuts - for accessibility

    Tab shortcuts for accessibility. Hidden accessible buttons, jump to things like navigation, search, content or whatever important content you have on the page. Only showing up when you tab the page. No Javascript needed. Try this out by using your tab button in this fiddle result.

  • Accessible dropdown menu meeting WCAG AA Version 2.0 - One click function

    This is an example of an responsive, accessible javascript menu, meeting requirements of WCAG AA. If you use a screen reader, this works very well. What is all about is to first of all use the right element for the right thing: semantics. Like the nav, buttons and links. Since we use javascript to collapse drop-downs, we need to use wai-aria to describe for the screen reader what is happening. For more logic, look at the comments in the script. In this version (2.0) all is built into one click function. See version 1.0 for two click functions.

  • Accessible dropdown menu meeting WCAG AA Version 1.0 - Two click functions

    This is an example of an responsive, accessible javascript menu, meeting requirements of WCAG AA. If you use a screen reader, this works very well. What is all about is to first of all use the right element for the right thing: semantics. Like the nav, buttons and links. Since we use javascript to collapse drop-downs, we need to use wai-aria to describe for the screen reader what is happening. For more logic, look at the comments in the script. In this version (1.0) athere is two click functions to handle menu click and outside click. See version 2.0 for one click function to rule them all.

  • Outline when tabbing, but not when using mouse

    This little nifty jQuery fix takes care of outline on focusable elements. If you tab the elements, you see a clear outline so you can see where you are. But if you use your mouse, there is no outline when you click/focus on a link, button or input. This is a solution to have a nice user experience for mouse users who do not need to see what element is focused, but also to have the visible outline for accessibility when you tab, so you can see exactly where you are.

  • Responsive images (Changing images)

    Responsive images, pull frame to see how the image change to fit its resolution better. Image change depending on resolution. This makes it possible to fit the images better both in visual size (height x width) and data size (kb) to its resolutions and connections/units. It also has fallback support (<img>) for older browsers, but the the images is not responsive then ofc. Older browsers without support for HTML5 is only used on PC anyway, so the responsivenes is not needed usually.

  • Remove tabindex on elements behind and set focus to login

    What this script does is a few things. When you click the "Open login" button, it removes tabindex from all tabbable elements outside the loginbox and sets focus to the username input. If you close the login box, it resets the tabindex again and sets focus on "Open login" button again. The script also looks for already manually set tab index (Like tabindex="-1"), so it does not mess up with those. This is great to use both for UX and accessibility. See comments in the Javascript for more logic.

  • Make image containers make space before the images are loaded by a simple CSS trix

    In this case the text will not jump when images is loading, since HTML and CSS are loaded first it usually does without this fix. The elements makes its space before images are loaded into it, which is great for heavy content sites or slow connections. The thing is to count the percentage of the image in height compared to the width and set it by CSS as padding bottom. The equation is height / width of the image to get the ratio value. The rule is to keep the same ratio on all images, or at least stay to a few ratios for simplicity both for developing and UX. The result is that content will not jump when the page is loading the images - all text stays in place all the time. Since padding bottom is in percentage, the width of the image container does not matter.

  • Accessible animated login form

    Wonder how to do a great looking form, animated which is accessible with both label and placeholder? I made a solution as clean as possible with mostly CSS. A small jQuery function is needed to check if there is a value typed in the inputs at blur.

  • Identify and trim social security number or card number (Username)

    I had a case where I needed to check if there is a Swedish social security number or a card number that was entered into a login input before sending. The reason is to delete all unwanted spaces and/or special characters, if I can identify it. If I found a Swedish social security number, I needed to trim it into YYMMDDXXXX, if I identified a card number I needed it to be trimmed to XXXXXXX0303 / XXXXXXX0330. What can identify a social security number is the length of it. If it only consists digits, it should be ten or twelve characters entered in total, not more or less. In this case the card number is always 11 digits, if you remove all other characters and they always ends with "0303" or "0330". This gives me some info to identify card numbers and social security numbers. I am returning false in this function when you submit, just to make sure we do not acually post any values - so you can see the effect. In the real case I return true in all cases, even if not trimmed. If I identify it, I trim the number before sending the data. Other usernames is also used in this form, as "support", etc, that is the reason all get through, even untrimmed usernames.