Dee Dubs – Page 9 – Application Development Cloud

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.

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

prepend zero to number

for use in a time display, I need to prepend a 0(zero) to the minutes less than ten.

Here is a function that will do that:

function pad(n) { 
if (n < 10) 
return "0" + n; 
return n; }

Detect Screen Resolution

Here is a handy tool I made for detecting the screen resolution of any device.

While testing and developing I used this tool on Ipad, IPhone, Blackberry Playbook, Samsung Galaxy, Kindle Fire Asus Transformer and it all worked perfectly to allow me to create the perfect content for each type of device.

http://losguerosproductions.com/screendetector.html

Send Email message with php and javascript

I have some good techniques to send stuff. One file demo is here http://losguerosproductions.com/emailme.php

build an object, and insert into dom using javascript and jquery

var div = document.getElementById("yourDivElement");var input = document.createElement("textarea");// this isgreat if you don't need to put contents into the text area dynamically.an empty text area. var button = document.createElement("button"); input.name = "post"; input.maxLength = "5000"; input.cols = "80"; input.rows = "40"; div.appendChild(input); //appendChild div.appendChild(button);

$('<tr>').append( $('<td>').append($('<a>', { href: o.link, text: o.word, onclick: function() {someFunc(o.string);}}) )

I have a list that I need to insert an new anchor with javascript(because you should always use native javascript when possible), and build its attributes using jquery.

To create the new anchor :

var myNewTag = document.createElement('a');

var mynewthingy=document.createElement(‘a’);
mynewthingy.setAttribute(“href”, “http://dwdenney.com”);
mynewcategory.innerText=”visit deedubs”;
$(“#mydomobject”).append(“<li id=’atempnameremovewhendone’></li>”);
var atempnameremovewhendone = document.getElementById(“atempnameremovewhendone”);
atempnameremovewhendone.appendChild(mynewthingy);

Lorem Ipsum Dummy Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Use an image’s alt text as a caption as well.

$(“div”).text($(“img”).attr(“alt”));

give an element a unique id based on its dom position

This is a very useful code to give a unique id.

$("div").attr("id", function (arr) {

return "div-id" + arr;

})

This will display the id.

.each(function () {

$("span", this).html("(ID = '<b>" + this.id + "</b>')");

});

Direct, Inverse and Joint Variation Equations

Direct variation is a variation equation , relating one variable to one or more others using multiplication and or division.

We can use this to solve for d in a distance rate time problem. d=rt

if the rate is going to be a constant when the other variables are changing, then :
distance varies directly as time and
the distance is directly proportional to time.

Examples: page 321 in text has lots more
In electronics, Resistance of wire varies directly as its length R=kL
In medicine, dosage is directly proportionate to weight of person d=kw

Joint Variation is when one quantity may vary directly as a product of two or more other quantities.

If a variable y varies jointly with variable x and z, then y=kxz where k is the constant of proportionality.

In geometry the area A of a triangle varies jointly as its base b and height h. A=kbh
If F varies jointly as H and G then F=kHG

Z varies jointly as W and Y . If Z=330 when W=11 and Y=10, find Z when W=60 and Y=10
First find the variation: The variation is Z=kWY.

Second find k using the first set of values 330=k(11)(10) | 330=k(110) | k=330/110 | k=3
Third solve for Z using the second set of values and the k you just found… Z=(3)(60)(10) | z=1800

Inverse variation is when one quantity increases as the other decreases and vice versa. y=k/x

We would use this in a distance rate time equation (d=r/t | t=d/r) when we were solving for t
T=k/r

For the weight of an astronaut problem, the weight W of an object varies inversely as the square of the distance d from the center of the earth.When w=111, d=3978 find k. It really helped me to leave the numbers unmultiplied

W=k/d^2

111=k/3978^2 | k=111(3978^2)

now find w when d=434+3978
w=111(3978^2)/(434+3978)^2
w=90.24

Combined variation is awesome..

T varies direclty as the square of D and inversly as F. The variation is : (T=kD^2)/F

The number of phone calls between two cities, N, varies directly as the populations (p1+p2) and inversly as distance between, d

The variation is N=kp1p2/d
If 69000 is N number of calls and d distance between cities is 340 and p1 p2=(40800)(230000) then find k

69000= k((40800)(230000))/340
69,000=27,600,000k
k=69000/27600000
k=.0025

how many calls, N, are made when d=455and p1p2=(70,000)(160,000) and k=.0025
N=kp1p2/d
N=.0025(70,000)(160,000)/455
N=612538 rounded to nearest integer

F=kq1q2/d^2
F=6 when q1=9 and q2=3 and d=3
6=k(9)(3)/3^2
3k=6
k=2

find f when q1=6 q2=4 and d=2
F=(2)(6)(4)/2^2
f=12