Category Archives: Uncategorized

How to make a Lightbox with Background Blur

Screen Shot 2015-04-24 at 10.21.05

 

Making cool lighboxes is actually quite simple. You don’t have to use JQueryUI, Bootstrap, or some other thing to get a great looking lightbox with not much code.

The basic idea: Your lighbox is made of two divs. A container div that is the full width and height of the page, and inside that another div holds all the lightbox content. Using JavaScript, toggle the visability of the lightbox when certain elements of the page are clicked.

Now for some more details.

1. Add an html tag, and give it a meaningful class name. Here is mine:

<div class=”container-lightbox”></div>

2. Getting the div content. You could just statically put some code in the div you just wrote (see #1), but usually you need your lightbox to hold some dynamic content, such as a form to edit a product. Mine displays each of my portfolio projects. A nifty way I have found to do this is to use an ajax call to get the ‘page’ you want to display in the lightbox, and have the ajax return html. This is awesome because you can keep all your view files nicely organized, and works really well when you have to load dynamic content into your lightbox. The content can be complied together on the server, and sent over to you in a nice package by ajax, and you can then just dump all that into your lightbox. Here is how I set up my ajax call. I used jQuery, and already had a link set up that I wanted to toggle the lightbox. The link’s url was the url I wanted to get my lightbox content from.


var lightbox = $('.container-lightbox');
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
},
dataType: 'html'
});
return false;
});

 

3. Toggling the lightbox. Once you get your content to show up in your lightbox div when you click your link, you are ready to toggle it’s visibility. Give your whole lightbox a style of display:none in your CSS. Then, in the success callback function of your ajax call, do something to set a display:block style for your lightbox. JQuery has some great functions for this. I used .fadeIn('fast')

Add a X symbol to the top of your lightbox, so some similar thing. Wire it up to some JavaScript so that when clicked, it will set the lightbox back to display:none . Here is mine.


lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
return false;
});

4. Styling the lightbox. Now for the fun part. You can add some styles to your lightbox to make it look really classy. Here are mine (fyi, I’m using SASS, thus the nested statements. You can’t do that in normal CSS).


.container-lightbox{
display: none;
position: absolute;
z-index: 4;
top: 0px;
left: 0px;
width: 100%;
min-height: 100%;
overflow: hidden;
.body-lightbox{
border-radius: 3px;
padding: 20px 20px 40px 20px;
background-color: #fff;
width: 90%;
display: block;
margin: 40px auto;
overflow: hidden;
-webkit-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
}
.remove-lightbox{
display: block;
text-align: right;
font-size: 3em;
margin: 10px;
}
}

Highlights of the above code: For your lightbox to appear above everything else, it’s important that it positioned absolutely, and that it’s z-index is higher than anything else on the page. It’s also important that the top and left are at 0. This is what puts the lightbox on top of everything else.

And now, for the blur background. For this I had to add some blur styles to all my things that are not my lightbox. I couldn’t just add them to the body, because that would blur the lightbox too. To do this I toggled adding a blur class when I toggled my lightbox. Here is my lightbox code again with the added lines.


var lightbox = $('.container-lightbox');
lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
  $('.projects-container, header, footer').removeClass('blur');
return false;
});
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
   $('.projects-container, header, footer').addClass('blur');
},
dataType: 'html'
});
return false;
});

And finally, my blur css class containing css that I shamelessly copied from the internet.


.blur{
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}

And that’s it. I would recommend messing around with absolute vs. fixed positioning for you lightbox. I’ve found fixed is better for small lightboxes, and absolute is better for large ones.

It’s working!!!

Well folks, today was a great day for my Grawmet II.

It made it’s first print!!!!!!!!!!!!!

I’m super excited. Granted, the axes weren’t really calibrated, but my print turned out ok nonetheless.

My printer at work.

My printer at work.

The print.

The print.

For those who have been following my blog, Ganter was kind enough to give me yet another Brainwave board after the other two boards I had didn’t work. This third one works beautifully.

(On my first one the USB port broke off. I got a new board but that one was malfunctioning from out of the box. The USB port of my first one got fixed, and then I fried it.)

There were times I doubted that I would reach this point. I had so many board problems, and I had to learn so much, but I guess persistence pays off. Thank you God!

Positive Psychology and Encourageing Thanfulness for Others

This quarter I’m in a positive psychology research group led by Sean Munson. The past few weeks we have been ideating and designing new ways to promote health and wellness though positive psychology and social technologies.

After an initial brainstorming session I presented three design ideas to the group. I then took my favorite and then further developed my favorite into a prototype.

It’s an app which for now I am calling “Thankfulness Letters”.
Project goal: Encourage people to express thankfulness and/or care to and for their friends.

Here is my initial storyboard

ThankfullnessLettersStoryboard_1

ThankfullnessLettersStoryboard_2 Note: after discussion with my group, I switched from paper letters to emails to avoid potential user awkwardness and the “creepy stalker” factor. I realized that it is pretty common to have email addresses, but far less common to have email addresses.

ThankfullnessLettersStoryboard_3

ThankfullnessLettersStoryboard_4

ThankfullnessLettersStoryboard_5

ThankfullnessLettersStoryboard_6

 

A study  on positive psychology methods by Martin Seligman and Tracy Steen (University of Pennsylvania), Nansook Park (University of Rhode Island), and Christopher Peterson (University of Michigan) showed that expressing thankfulness to others is one method that is potentially very effective at promoting happiness in the person expressing thankfulness.

Why did I choose to design an app? Yes, there is an app for everything… I chose an app however because I wanted to easily integrate my design into people’s normal lives, and my target user group (most people in the US) generally have smartphones.
How the project goals are met in the app:

  • Randomly generates a friend once per the set period of time (one week default)
  • Gives a example/prompt to send to the person – helps with writer’s block, and makes the writing process less awkward.
  • Connects to email
  • Reminders are ephemeral – a backlog would probably discourage people (feel bad for not talking to x person), or be overwelming if it gets too large. Also gives a sense of urgency.

Feature Interaction Requirements:

  • Need to be able to change default time increments
  • Visual design needs to be accessible to visually impaired

Visual Design Look/Feel:

  • Happy
  • Peaceful
  • Caring

I also made an Axure Prototype.

Information Visualization Final Project

In my info vis class we are now working on our final projects. My team is building a visualization of Seattle skyscrapers. Planning out how and when we are going to get everything done has been a pretty big task in itself… I started to put together a paper prototype for doing user testing.

photo-2

Figure 1. Paper prototype

I wish I had more time to work on my 3D printer. Everything is going fine with that, except that one of the potentiometers on my Brainwave board keeps getting super hot, no matter how much I adjust it. Arg.

Airplanes, dead birds, and Tableau

For one of my projects in my Information Visualization class (HCDE 411), I was given some data collected by the FAA through a voluntary wildlife strike report online from. The FAA has maintained this wildlife strike database since 1990.

The task was to create an interesting information visualization from that data.

I immediately started thinking of lots of interesting questions, especially since I like aircraft, and I really really like wildlife.

For example:

“What aircraft are most likely to strike birds?” (I figured this would take a lot of extra work, since I would need to find the ratio of aircraft models involved in a strike to all aircraft registered under that model.)

“What is the rate that experimental aircraft strike birds vs. normal aircraft?”

“What species of wildlife are most often struck by aircraft?”  (This would have also been a troublesome question, since the sum number of strike entries is much lower than the actual number of birds struck, since it is not uncommon for many birds to be struck at once. Also, many of the species were unidentified, or unidentifiable after going through an aircraft propeller.)

I explored around the data by creating some preliminary visualizations using a software program called Tableau, and by scanning over the data in Excel. Tableau is a visual analysis software that can generate data visualizations as JavaScript, PDFs, or other things. Doing this project was my first experience using Tableau. In general I found it to be quite intuitive (not like Eclipse…), except for the fact that selecting save in the file menu saves only your data, but not your visualizations.

Anyway, the question I decided to ultimately go with is:

What species of wildlife cause the most damage?

Figure 1. Most costly wildlife strikes by repair time. The top row shows repair time in hours, and the bottom row compares totally number of strikes by the same type of wildlife.

Figure 1. Most costly wildlife strikes by repair time. The top row shows repair time in hours, and the bottom row compares totally number of strikes by the same type of wildlife.

An interesting side note:

Intuitively, most wildlife strikes by aircraft are birds. However, some mammals (besides bats) are included as well. As seen in Figure 2, it is interesting to note that more than 100 White Tailed Deer have been struck during the climb and approach phases of flight (not takeoff and landing) since 1990.  I asked an aeronautical and astronautical engineering student (Ransom) about this phenomenon, and he said this was probably due to small aircraft utilizing ground effect (and if you don’t know what that is, it’s basically flying very low to the ground).

Figure 2. Mammal strikes for each phase of flight since 1990.

Figure 2. Mammal strikes for each phase of flight since 1990.

D3.js Hello World

Screen Shot 2014-01-16 at 4.48.05 PM

Figure 1. My first data driven document.

Since I am taking an Information Visualization class this quarter, I finally got an excuse to start playing with D3! It didn’t take me long to produce the following the tutorials on the D3 website. D3 is really well documented, and so this was super easy. I’m really excited to finally start using the JavaScript library though!