Category: Touchscreen Application Development Tools

Custom CSS Media Queries

I am developing my own responsive framework, and here is the notes and research.

Device resolutions:

Samsung Galaxy S 4inch:
Samsung Galaxy Tab 7inch:
IPad 9inch: QXGA  2048 X 1536  4:3 aspect ratio

Surface pro: hd720 1280 X 720 16:9 aspect ratio

PC’s at work:
WSXGA+ 1680 X 1050  16:10 aspect ratio
SXGA 1280 X 1024   5:4 aspect ratio

 

Available media query syntax

There are some exciting ways to access these. There are the standard height and width, combined with max or min,

@media all and (min-width:1280px)

but there is an exciting aspect ratio query to allow me to use the extra space at the bottom of the 16:10 sxga and wsxga+ resolution displays

@media screen and (device-aspect-ratio: 5/4), screen and (device-aspect-ratio: 16/10) { ... }

Well this blows, I have spent two hours on this shit and I cant get the fucking max-height or min-height to work at all, and that is the whole reason that I need this query, to fill in the fucking space left on the bigger screens.the aspect ratio thing is ok, but its not firing correctly, and still applies the styles to the wrong places. Maybe with some adjustment, like put it at the top of the pile of queries.

 

Here are the docs.  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Day of week selector

The Web Content Accessibility Guidelines were developed through a Milestones process by W3C in cooperation with individuals and organizations around the world.

They have published a set of standards that all public serving institutions must follow when providing content to users via the internet.

At Skagit Valley College I was asked by the Disability Coordinator to come up with a solution for selecting the days of the week from a control on a page of the web application.

I came up with this day of week selector that lets the user choose the days that they need. I am able to use the standard labels and ID names to enable screen readers and other accessibility software to describe the content to the user in a beneficial manner that they could easily understand and interact with.

The ui is just an unordered list with the days of week as id.

<label for=”weekdays”>Day(s)</label>
<ul id=”weekdays”>
<li><a id=”Monday”>M</a></li>
<li><a id=”Tuesday”>T</a></li>
<li><a id=”Wednesday”>W</a></li>
<li><a id=”Thursday”>T</a></li>
<li><a id=”Friday”>F</a></li>
</ul>

Then I added the ability to select them by manipulating the class with jquery using a click event handler…

// make a days of week choice selector
$(“#weekdays a”).on(“click”, function(event){
$( this ).toggleClass(“success”);

});

Then, to gather the info and submit with the form, I select the li’s with the class identifier, and add them to a form variable as so…

var weekdays=$(“.success”);
var the_weekdays=””;
weekdays.each(function(){
if(the_weekdays!==””){the_weekdays=the_weekdays+” , “;}
the_weekdays=the_weekdays+$( this ).attr(“id”);
});
$(“input[name=the_weekdays]”).val(the_weekdays);

I have even thrown in some code to put a comma between multiple days if selected. The string that is submitted with the form  would look like this: Tuesday,  Thursday

Mouse , cursor and touch detection with Flash CS5

Here is my click, touch and cursor movement practice. This contains some good code examples for detecting whether the user has touched or clicked with a mouse, including mouseover hover.There is even code that lets the touch user drag the object, but not the mouse user. I created this code during my Flash CS5 course winter 2011 at skagit valley college.

Here is a touch detection example with animation on press.