Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected

4Jul/123

Slider Video Embed

Screen Shot 2012-07-04 at 11.25.49 PM

If you are looking to embed video into the slider using the continuum refactor, here's how:

1) Go to the video on Youtube or Vimeo
2) Copy the "<iframe..." portion of the embed code
<iframe src="http://player.vimeo.com/video/44143357" width="500" height="356" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
3) Create a new post/review
4) Create a custom field named "vimeo", "vimeofull", "youtube" or "youtubefull"
5) Paste the embed code into the custom field
6) Adjust the size the video displays at (width should be around 460 and height should be around 340 for "slider A")
7) Tag the post/review with the tag "spotlight"

Note: There is currently a bug with the slider that causes it to continue rotating while the video is playing. This will be resolved by 9/15/12. Bug has been fixed and is no longer present in v12.0918. However, slider will only pause while your mouse is over it. Working on another change to make it so that the slider will pause once you start playing a video and will unpause only once you interact with it again.

2May/120

Douglas Crockford – JavaScript the Good Parts

Screen Shot 2012-05-02 at 10.23.54 AM

Really good lecture on JavaScript, especially if you are new to the language from another language like Java.

Tagged as: No Comments
15Jan/100

Diagonal Accordion with jQuery

diagonalAccordion is a jQuery plugin that allows for accordion functionality, but in a diagonal angle of your choice!

I forked Charles Marshall's diagonal-accordion- plugin (on github) which allowed for a 45 degree angle accordion and hacked it to allow for any angle.

Use it like:

$("#someElement").diagonalaccordion({
acc_width:500,
acc_height:300,
bar_size:45,
speed:'slow',
accordion:'.accordion',
coverage:4,
diagAdjust: 3
});

Or even just:

$("#someElement").diagonalaccordion({
diagAdjust: 5
});

The only difference between using my plugin and his is the diagAdjust parameter. This parameter allows for incremental adjustments away from 45 degree angles. The bigger number you provide, the shallower the angle gets, until at number 11 it is effectively no angle. then after 11 it starts angling the other way.

Here's the official demo for the original plugin. Like I said, mine works exactly the same way, it just has an extra param to use.

18Nov/093

Making users confirm they want to leave the page

Here is how to make a user confirm that they want to browse away from your page:

<script>

window.onbeforeunload = askconfirm;

function askconfirm(){
return "Using the back/forward/refresh buttons can have unexpected results";
}

</script>

Using jQuery, you can make it so the user only has to confirm if they are leaving the page for some reason other than clicking an "a" link or submitting a form:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="http://www.google.com/jsapi">
<script>
google.load("jquery", "1");
</script>
<script>

window.onbeforeunload = askconfirm;
window.doAskConfirm = true;

function askconfirm(){
if(doAskConfirm){
return "Using the back/forward/refresh buttons can have unexpected results";
}
}

</script>
</head>
<body>

<a href="">test</a>

<form>
<input type="submit" value="submit" />
</form>

</body>
<script>
$(document).ready(function(){
$("a").click(function(){
window.doAskConfirm = false;
});
$("form").submit(function(){
window.doAskConfirm = false;
});
});
</script>
</html>

Filed under: Uncategorized 3 Comments
17Nov/092

New H1N1 Tag Announced by w3

Today the w3c announced the addition of the H1N1 tag to the HTML 5 standard. Apparently this is part of the new "semantic web". You should use this tag when discussing the flu, or common worse-than-just-a-cold illnesses. I think this will especially help blind and vision impaired users because they can't quickly scan a page like we can and thus aren't able to avoid potentially harmful content. They will be able to set their browsers to stay clear of the H1N1 content so they aren't exposed to it.

People die or at least become ill every day from over-exposure to H1N1 content. Symptoms include constant temperature taking, obsessive washing of the hands, hyperventilating when someone sneezes nearby and the weird compulsion to sneeze into one's elbow instead of one's hand (making it absolutely impossible to wash off the germs that you sneeze out).

The w3 feels it will help protect people if all H1N1 content is quarantined. It will help contain the spread of this content throughout the web, and give users a way to better deal with this content. The w3 can be hard to follow sometimes, so I will sum up their recommendation below:


4.4.12 The H1N1 Element

Status: Working Draft

The h1n1 element is a heading.

The first element of heading content in an element of sectioning content represents the heading for that section. Sections pertaining to and related to over-exposed and over-hyped disease and illness related topics should be quarantined by the h1n1 tag so as to allow users to deal with the content in a way of their choosing.

The level attribute, if present, must be a valid integer giving the fear inducing level of the content. The higher the level, the greater danger to users the content represents. User generated content should be treated as level 10 by default. News media content should be treated as level 6 or higher. Medical websites are at least a level 3. Scientific journals, since no one reads them and no one can understand them, are eligible for level 1 ranking.

For example, the following is correct:

<h1n1 level="10">
    <h1>OMG THE SWINE FLU IS GOING TO KILL US ALL</h1>
    <p>My brother's sisters mom has a daughter who is in daycare and they had to shut down the whole day care because everyone was DIEING from swine flu. The swine flu will kill you because it turns you into a PIG!!!! YOU GET IT FROM PIGS AND YOU SHOULDN'T EAT PORK EVAR!</p>
</h1n1>


Here is a link to the full w3c recommendation.

Filed under: Uncategorized 2 Comments
11Nov/090

Sprite Button Style Reset

CSS Style to clear Input type button styles in order to use a CSS Sprite as the image for the button.

button{
text-indent: -999px;
overflow: hidden;
display: block;
line-height: 99;
border: none;
padding: 0;
}

This is for my own personal reference. Maybe someday I'll make a full blown blog post on this... For now, I'll update this as I need to because I'm sure I'm forgetting something...

8Nov/090

Mac Subversion Client (SCPlugin) Installation

7Nov/090

iPhone programming

I'm working on a mobile computing course for a local college (which explains the lack of posts recently). It's going to be an introduction to Objective-C and iPhone SDK followed by an introduction to the PhoneGap library.

Check it out! I'm posting lectures etc as I finish them. Come spring the whole thing could be locked down behind a password wall and only available to students, but for now, feel free to let me know what you think...

23Jul/081

preg_*

Regular expressions are fun! (repeat 5x, or until you believe it)

I'm working on a webbot, and right now I need it to drop all the HTML and just leave me with the text. So I wrote this regex:

/<.*>/

(explanation: start match at "<" look for any character "." any number of times "*" and stop when you come to ">" (but really, it goes all the way to the very last ">" it finds and stops).

Of course, it then matched everything from the first < all the way to the last >, dropping all text that was properly encapsulated by HTML tags.

So, next I wrote this:

/<[a-zA-Z\t "=0-9_\-\\/]*>/

(explanation: start at "<" find any character I could think of except for > "[a-zA-Z\t "=0-9_\-\\/]" any number of times "*" and then stop when you come to ">" (stops at the first >))

Wow... that's... insanity... I probably even missed something. It did, however, only drop the HTML tags themselves. However, it's nasty looking.

I then realized I could just write this:

/<[^>]*>/

(explanation: start at "<" find any character except > "[^>]" any number of times "*" and stop as soon as you come to ">")

Yeah, it looks like some sort of ascii art of "The Cheat" or something, but it very elegantly finds the beginning and ending of a tag. See, regex is fun!

Here is the final code btw:

$htmlSearch = '/<[^>]*>/';
$cleanLine = preg_replace($htmlSearch, "", $line);

Filed under: Uncategorized 1 Comment
16May/084

experts-exchange looks like a cheap hooker

You know what I hate? experts-exhange.com.

Why? Because I get all excited when I type a question into Google, and then see the answer right there in the search results, and click on it, and then -bam!- I'm experts-exchanged! (That is, I'm taken to a web page with my question clearly displayed, and then a gray area that says, "to see the answer pay $50/sell us your unborn children/renounce your religion/vote democrat/eat tomatoes/some other completely unacceptable thing that you don't want to do but can think of to put here for them to have asked you to do")

It's like... you could call it... Let's say you're a teenage boy on prom-night, and your going in for your first... kiss... and all the sudden the girl's dad busts in the room and throws a burlap sack over his daughter and carries her out into the hall and then comes back in and demands $50 for a subscription to continue. You got experts-exchanged sucka!!!!

I'm looking for a simple answer, not looking to get married to a website. Just give me the answer, and then if I find you useful enough to donate I will. Then you have earned my respect, and made me excited to support your service.

Gargamel! It makes me angry!

So, do I pony up and pay the pimp? Or do I go find a site that wants me for me and not for my money? I'm not going to go to a whore. Instead I'll go in search of a mutual relationship, and if I'm satisfied I'll make an honest site out of her and donate.

Today I went in for the kiss one more time only to have a hand shoved in my face with a simultaneous reach around for my wallet. Experts-exchanged! NO! NO MORE HOOKER SITES!!!! What am I going to do about it? KILL THEM!!!! Er... well... just... not really, I'm just going to make them disappear.

I downloaded the customize-google browser extension for Firefox and set a filter to weed out anything related to experts-echange.com. Now I will never have to live in fear of being experts-exchanged again!

Here's a screen-shot of me not ever having to see that awful dirty prostitute in my search results again: