Day 23 – Post-It Notes

Today was a fun coffee and code day with @thereginawong! Actually it turned into a bubbletea and code day at Moii cafe. I love that place! I wanted to play around some more with .draggable() and made moveable post-its. Each post-it was created with two divs and a textarea for user input.

The style of the post-its was modelled on the Stickies for Mac OS.
StickiesThe first post-it note I created worked well. Then I added 5 more notes and stacked them one on top of another. That is when the text stopped moving with the div. The post-it note elements were all broken up when you dragged the note! I figured out this was a problem with the z-index; the elements for each post-it note were not at the same z-index!

What happened was that you would be typing in a textarea and then try to move a div that did not contain the textarea! Giving each post-it note a z-index that correlated to their order in the html solved this problem.

BePositive

I love bright colors. They make me happy!

Day 23 – Post-It Notes

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s