    
|
It’s Tuesday which means that the Treehouse Show is back! In episode 81 of The Treehouse Show, Nick and Jason (@jseifer) talk about user experience patterns, Angular JS, lazily loading ads, and more. There’s also the usual round up of horrible jokes and bad puns. Ahoy!
How to Learn AngularJS – Your AngularJS Sherpa | ng-newsletter
Why you should move that button 3px to the left | Google Ventures
The post Outdated UX Patterns, Learning Angular JS, Lazy Loading Ads | The Treehouse Show Episode 81 appeared first on Treehouse Blog.
]]>Tomorrow marks the third annual Scholarship Luncheon celebrating donors and their contribution to support our UMBC students. This yearly meet-and-greet event is a great opportunity for donors to get to know the scholarship recipients and understand just how big an impact their gifts have on the UMBC students and community.
A highlight of the event is the opportunity to hear from two special speakers: a donor and a student. This year, donor Ken Pittman ’80, Economics, of PNC Wealth Management will share the story of why he supports UMBC and one of the Linehan Art scholars will share the story of how receiving a scholarship has changed her life and advanced her studies.
More than just a time to express gratitude, however, the scholarship luncheon promotes the possibility of future philanthropy – the students are able to see the faces behind the scholarships and realize that the people giving these gifts are real people with passions just like themselves with a desire to give back to others and their community. It’s heartwarming for the donors to meet the students face to face and students are also touched at the chance to learn the story behind the scholarship.
And even as the luncheon ends and our donors and students go their separate ways, the effects of their meeting often last beyond this day, beyond UMBC and even extend into the personal lives of the donors and recipients. One particular student was so grateful to his donor that he made the effort to follow up and maintain a relationship. Equally, the donors enjoy the chance to see where the students are after graduation: where they are working, what has happened in their lives and what they are working toward in their future.
As we at UMBC see it, this is what philanthropy should be: a lasting legacy and the chance to make new connections. We appreciate all the donors who support our students – you are making a very real mark on our campus and changing lives.
The following is a guest post by Agop Shirinian. Agop ran into an interesting scenario where he needed an element to be scrollable in one direction, while allowing the overflow in the other direction. You'd think that's what overflow-x and overflow-y are for, but it's not that simple. I'll let Agop explain.
So you're tasked with creating a scrollable menu with submenus that pop out when you hover over a parent menu item.
Simple!
Create a list for the menu, add some nested lists for the submenus, position the nested lists based on their parent list items, voilà!
See the Pen Scrollable menu with pop out submenus (broken) by Agop (@agop) on CodePen.
Wait, that's not right. Oh, of course, we used overflow: auto - perhaps if we use overflow-x: visible, the horizontal overflow of the submenus will be visible:
See the Pen Scrollable menu with pop out submenus (broken #2) by Agop (@agop) on CodePen.
What gives? Why do we still get scrollbars?
If we look at the W3C spec, we find the following explanation:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Basically, this:
overflow-x: visible;
overflow-y: auto;Turns into this:
overflow-x: auto;
overflow-y: auto;So we can't have visible horizontal overflow if the vertical overflow is invisible, and vice versa.
And if we can't have visible horizontal overflow, we can't have our pop out submenus!
Interestingly enough, if we omit the position: relative from the menu items, the submenus do show up, positioned based on their closest positioned ancestor. In this case, they don't have a positioned ancestor, so they're positioned relative to <body>:
See the Pen Scrollable menu with pop out submenus (step 1) by Agop (@agop) on CodePen.
Basically, in order for an absolutely positioned element to appear outside of an element with overflow: hidden, its closest positioned ancestor must also be an ancestor of the element with overflow: hidden.
Knowing this, we can add a wrapper around the menus to act as the closest positioned ancestor for each submenu. Then, whenever the user hovers over a menu item, we can position the submenu wrappers using a bit of JavaScript:
See the Pen Scrollable menu with pop out submenus by Agop (@agop) on CodePen.
And that's it! Since neither the menus nor the menu items are positioned, the submenus are able to pop out of the hidden/scrollable overflow. Now we can have as many levels of nested submenus as we want, and we won't get any undesired clipping.
Unfortunately, this method of showing items that would otherwise be hidden is very obscure.
It'd be nice if we could specify a clip depth, which would control which ancestor in the hiearchy would be responsible for clipping a particular element:
./* Fair warning: not real code */
.submenu {
/* only an ancestor 2 levels up can clip this element */
clip-depth: 2;
}Or, even better, perhaps we could specify the clipping parent by a CSS selector:
/* Fair warning: not real code */
.submenu {
/* only an ancestor that matches the .panel selector can clip this element */
clip-parent: .panel;
}Popping Out of Hidden Overflow is a post from CSS-Tricks
]]>|
|
An interview with Tom Beck, Chief Curator of the Albin O. Kuhn Library Gallery, aired on WYPR’s Maryland Morning this week, in which he discusses the works currently on display in the Library Gallery exhibition, N. Jay Jaffee Photographs from Public to Personal, 1947-1997. Beck talks about the artist’s personal life and work in relation to the photography of his peers, as well as the historical importance of Jaffee’s photographs.
Listen to the interview, “Photographer N. Jay Jaffee Captured the Spontaneous” at WYPR.org.
More information about the exhibition is available at our Arts and Culture Calendar. N. Jay Jaffee Photographs from Public to Personal is on display now through Sunday, March 23 in the AOK Library Gallery.
]]>
Voice of America’s International Women’s Day coverage highlights the efforts of leading women in science, technology, engineering and math (STEM) to encourage girls to pursue those fields.
In a video posted on the news site, Marie desJardins, professor of computer science and electrical engineering, says, “Make sure your kids are getting [exposure to STEM] from an early age so they think of themselves as creators of technology and new ideas, not just following the rules.”
See the video and article on Voice of America by clicking here.
]]>