The MFA Thesis Exhibition, now on display in the CADVC, was mentioned in an article by City Paper‘s Baynard Woods last week. The article highlighted UMBC’s well connected Visual Arts faculty, staff and MFA candidates in relation to the Baltimore arts community. Woods also mentions IMDA candidate Lexie Mountain’s performance piece exhibited at the opening, Fred Worden Cuts A Couch In Half With A Chainsaw.
Read “Art Seen” at City Paper‘s website.
]]>The 2013-2014 Karen L. Wensch Endowment Award for non-exempt staff has been presented to Ms. Jane Gethmann, Assistant to the Chair of Computer Science and Electrical Engineering.
The Karen L. Wensch Endowment Award for Outstanding Non-Exempt Staff honors non-exempt staff who make outstanding contributions in one or more of the following areas: engagement in the UMBC community, dedication to UMBC, performance above and beyond position requirements, personal commitment and persistence to his/her work, excellent problem solving skills, high professional standards, community involvement on campus, and advocacy for non-exempt staff. Awardees have worked at UMBC for at least five years as a member of the non-exempt staff.
Jane Gethmann first came to UMBC in 1971, and over the years has worked in Financial Aid, the Department of Biological Sciences, and the Graduate School. She joined the Department of Computer Science and Electrical Engineering in 1997, and is known as the glue that holds the department together, going above and beyond her responsibilities.
In addition to assisting the chair and handling administrative and financial duties, Gethmann also takes the lead when additional resources are needed or when she sees a way to increase efficiency in the department. She has served as facilities manager and scheduling coordinator, managed the Computer Science Help Center, coordinated part-time faculty hiring, and created a graduate admissions database. She also managed the installation of a new teaching laboratory, working with faculty and Facilities Management in order to get it up and running by the start of the semester.
A leader and trusted advisor, Gethmann’s vast knowledge of UMBC and departmental procedures as well as her excellent judgment make her invaluable to those she serves. She is a dedicated people person with a helpful and positive attitude. Whether working with faculty, staff, students, or visitors, her goal is to help people solve whatever problem they are facing, and ensure that they have what they need.
Every so often, we’ll chat with an alum about what they do and how they got there. Today we’re talking with Dr. Ting Zhang ’03, M.A., intercultural communications, about her career as an assistant professor at the University of Baltimore and her research into entrepreneurship, aging and economic growth.
Name: Ting Zhang
Job Title: Assistant Professor
Employer: University of Baltimore
Q: Tell us a little about how you wound up at UMBC. What’s your background?
A: UMBC’s unique Intercultural Communication program attracted me. I was a student of English and International Business in China before I came to UMBC.
Q: What is your focus in your career as an Assistant Professor in the School of Public and International Affairs at the University of Baltimore?
A: I teach quantitative courses to graduate students of Public Administration and I conduct public policy research on the topics related to entrepreneurship, aging and economic growth. I am also a research assistant professor at the Jacob France Institute where I conduct a variety of labor and economic research projects.
Q: Were there any lessons you learned, in particular, at UMBC that you have carried with you into your work?
A: As a student of Intercultural Communication, naturally I was very much aware of culture diversity and fusion between various cultures. This builds my foundation in believing in the importance of diversity in our economy that contributes to my research interests on entrepreneurship, creativity and economic growth and dynamics.
Q: What has been the greatest success in your career?
A: The greatest success I believe is that I have been so lucky to have the great mentors at UMBC, at George Mason University and at my current work at the University of Baltimore. They have offered enormous and selfless guidance to me.
The greatest progress I have made in my career so far, I believe, is publishing my first book (Elderly Entrepreneurship in an Aging US.. Economy) and it was an early academic effort on such a topic. The empirical research was awarded with the fellowship from the Ewing Marion Kauffman Foundation and a paper award in the international Charles Tiebout Prize for Regional Science. The book later on luckily received certain public, media and academic attention.
Q: Is there a particular class or professor at UMBC who really inspired you?
A: Professor Edward Larkey guided me through my UMBC journey and has kept encouraging me on my progress. He is a great mentor. Professor Fred Pincus also inspired me on the fun from academic research through his teaching.
Q: What advice would you give to students considering UMBC?
UMBC is a very dynamic university with many inspiring professors who have strong academic rigor and who are also caring and approachable. One piece of advice would be to communicate well with the great professors and take advantage of the vast human capital and warm intellectual resources. UMBC is also a great intercultural community. Enjoying the diversity and participating in various multi-cultural activities would be another advice from me.
]]>
Every so often, we’ll chat with an alum about what they do and how they got there. Today we’re talking with Dr. Ting Zhang ’03, M.A., intercultural communications, about her career as an assistant professor at the University of Baltimore and her research into entrepreneurship, aging and economic growth.
Name: Ting Zhang
Job Title: Assistant Professor
Employer: University of Baltimore
Q: Tell us a little about how you wound up at UMBC. What’s your background?
A: UMBC’s unique Intercultural Communication program attracted me. I was a student of English and International Business in China before I came to UMBC.
Q: What is your focus in your career as an Assistant Professor in the School of Public and International Affairs at the University of Baltimore?
A: I teach quantitative courses to graduate students of Public Administration and I conduct public policy research on the topics related to entrepreneurship, aging and economic growth. I am also a research assistant professor at the Jacob France Institute where I conduct a variety of labor and economic research projects.
Q: Were there any lessons you learned, in particular, at UMBC that you have carried with you into your work?
A: As a student of Intercultural Communication, naturally I was very much aware of culture diversity and fusion between various cultures. This builds my foundation in believing in the importance of diversity in our economy that contributes to my research interests on entrepreneurship, creativity and economic growth and dynamics.
Q: What has been the greatest success in your career?
A: The greatest success I believe is that I have been so lucky to have the great mentors at UMBC, at George Mason University and at my current work at the University of Baltimore. They have offered enormous and selfless guidance to me.
The greatest progress I have made in my career so far, I believe, is publishing my first book (Elderly Entrepreneurship in an Aging US.. Economy) and it was an early academic effort on such a topic. The empirical research was awarded with the fellowship from the Ewing Marion Kauffman Foundation and a paper award in the international Charles Tiebout Prize for Regional Science. The book later on luckily received certain public, media and academic attention.
Q: Is there a particular class or professor at UMBC who really inspired you?
A: Professor Edward Larkey guided me through my UMBC journey and has kept encouraging me on my progress. He is a great mentor. Professor Fred Pincus also inspired me on the fun from academic research through his teaching.
Q: What advice would you give to students considering UMBC?
UMBC is a very dynamic university with many inspiring professors who have strong academic rigor and who are also caring and approachable. One piece of advice would be to communicate well with the great professors and take advantage of the vast human capital and warm intellectual resources. UMBC is also a great intercultural community. Enjoying the diversity and participating in various multi-cultural activities would be another advice from me.
]]>On April 23, 2014 UMBC will host Undergraduate Research and Creative Achievement Day (URCAD). More than 200 current UMBC undergraduates will present the results of their research, scholarship, and creative work. Hundreds of UMBC students, faculty, family members, and others will attend the conference, and learn from these student researchers.
As a research university, UMBC encourages all undergraduates to engage in research, independent study, professional-level creative work, and other hands-on experiences in their field of study. This can begin as early as the student’s freshman year. Through such experiences students gain valuable knowledge about their chosen field and establish mentoring relationships with faculty members. Students can approach a favorite faculty member for research advice before the end of the semester, or findmore background information online.
As we near the end of another semester, here are some insider tips for parents:
Final examinations will be held from May 15 to May 21. Encourage your student to make a study plan now. Research shows that people retain information better when they learn it and then sleep on it. Learning a little information each day produces much better results than an all-night session right before an examination.
For a change of pace, suggest that your student take a break from trying to get more information into his or her brain and practice getting the informationout again. Examinations test the ability to locate and express on paper the information the student has learned. Far too few students practice this crucial skill. To practice output, students first design questions that seem likely to be on the final. Then they practice writing the answers in the form that would be expected on the test: short answer, essay, etc. Some faculty members also make prior examinations available in the library or online to serve as study guides.
Continuing students should registration for fall classes between April 1st - 21st. It is important that students complete advising appointments before their registration time in order to have the best chance for a seat in important classes.
There is still time to sign up forclasses over the summer. Classes begin in May 27. ]]>Undergraduate Commencement Information
Thursday, May 22, 2014
1 p.m., Baltimore Arena
201 West Baltimore Street
Baltimore, MD 21201
(Procession begins at 12:30 p.m.)
Graduating from UMBC is an exciting accomplishment. Walking in the commencement ceremony is a proud moment for both students and families. If your student plans to graduate this May, now is the time to prepare.
The UMBC Bookstore Graduation Center will occur:
Wednesday, April 30, 11 am to 6 pm
Thursday, May 1, 11 am to 6 pm
Friday, May 2, 11 am to 3 pm
Pick up regalia, diploma frames, and other essential graduation materials.
Free no obligation portrait sitting courtesy of Graduation Images.
The deadline to order regalia has passed. If your student hasn't ordered their regalia please encourage them to contact the Bookstore immediately.
Questions about regalia ordering: Call 410-455-3807
Additional graduation center information along with diploma frame descriptions and photographs may be found on the Bookstore website http://bookstore.umbc.edu. For diploma frames click on the merchandise catalog.
Off-Campus Student Services’ new and improved website (www.umbc.edu/ocss) is up-and-running and has tons of information and resources about finding off-campus housing and roommates as well as navigating the technicalities of living off campus such as building successful tenant-landlord relationships, understanding leases, and much more. The answers to students’ FAQs can be found there and at OCSS’s housing-related events such as the upcoming “Off-Campus Transitions” workshop scheduled for April 23rd in The Commons 331 during Free Hour.
If students are interested in finding roommates, OCSS is hosting a Roommate Social on May 2nd from 12-1PM in Lower Flat Tuesdays in The Commons—there will be food, fun, and, of course, opportunities to meet potential roomies. If students can’t make this event, UMBC’s official off-campus housing directory is another free resource for students to post and browse roommate ads—visit www.umbc.och101.com.
Students looking for off-campus housing for the summer and spring semesters can also browse housing listings at www.umbc.och101.com or attend one of our in-person housing fairs in July, August, and October. Join the OCSS myUMBC group page for continued updates about housing-related events, news, and discussions. For help navigating our new websites, students can visit our office located next to the UMBC bookstore and pick up housing brochures and listings or call 410.455.2770.
]]>
In this tutorial we’ll look at the techniques needed to make a navigation menu that is hidden off screen until the user clicks on a menu icon, at which point the content slides over and darkens, and the menu slides in. The menu will also be responsive vertically, filling the height of the browser window on whatever size screen it’s being looked at in.
To achieve this we will be using a couple different methods, one of which being flexbox, which is turning into a real ‘buzzword’ at the moment for being the holy grail of web layout methods. We will be using it to make the menu fit the height of the window. We’ll also be using jQuery for the actual functionality of the menu, making it slide out on a click event, and also providing a fallback for if the user doesn’t have JavaScript enabled in their browser (which we’ll detect with Modernizr).
Here’s what it’ll look like when finished. And if you’d like to follow along with the full code you can download it here.
Let’s first of all look at out index.html file that will be used in our demo, I’ll show you everything that’s in there and then we can run through piece by piece and look at the important parts:
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>Full-height Off Screen Menu</title> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/modernizr.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header class="cf"> <h1>Full Height Off Screen Menu</h1> <a href="#" id="navicon" class="closed">☰</a> <ul id="fallback-nav"> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </header> <nav id="main-nav"> <a href="#" class="current"><div>Home</div></a> <a href="#"><div>About</div></a> <a href="#"><div>Work</div></a> <a href="#"><div>Blog</div></a> <a href="#"><div>Contact</div></a> </nav> <div id="main-content"> <article> <h2><a href="#">Article Title</a></h2> <span class="date">Published 25th February 2014</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <a href="#">Read more →</a></p> </article> <article> <h2><a href="#">Etc.</a></h2> <span class="date">Published 25th February 2014</span> <p>... <a href="#">Read more →</a></p> </article> <p><a href="#" class="older">< Older Posts</a></p> </div> <div id="fade"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </body> </html>
Let’s dig in! The only thing to note in the <head> tag is that we’re calling in some Google Fonts. We’re also linking to our css file as well as a modernizr.js file which you can download from here which we’ll use to detect if the user’s browser has JavaScript enabled or not, so that we can provide a fallback (that’s why the html tag has a class of ‘no-js’ to begin with, to make a default page that will appear if there’s no JavaScript, if it is enabled, Modernizr will swap that class name for us).
Next the only other real things of interest our the fallback navigation which is the <ul> with an id of ‘fallback-nav’ in the <header> as well as the link with an id of “navicon” that will be the main link used to create our effect. And then the <nav> with an id of “main-nav” which will be (as you can guess) our main navigation used in the effect. The only other element used in the effect is that last <div> with an ID of “fade” which will be our black cover that darkens the content when the menu icon is clicked.
Finally we call in jQuery from Google and our own script file which is where we’ll be working in a bit. But first let’s go through the styles.
So we won’t be going through all of the CSS styles (if you want you can inspect or ‘view source’ on the demo) as they are in the most part used for the general styling of the page, which is not the goal of this article. We’ll be breaking it up and looking at a few chunks of code which are important to the effect. So, first of all:
html.no-js #fallback-nav { display: block; } html.no-js .fade { display: none; } html.no-js #navicon { display: none; } html.js #fallback-nav { display: none; } We’ll kick things of by making sure that if the user’s browser does not have JavaScript available (that’s that class name on the HTML element that we saw earlier using Modernizr) then we’ll show the #fallback-nav in the header, and we’ll hide the #fade DIV as well as the navigation icon. This is our fallback solution so the fallback menu needs to be styled in a more traditional manner. We’re also hiding this solution if JavaScript is available, as you can see in the last line.
#navicon { float: right; font-size: 2em; text-decoration: none; position: relative; z-index: 9; } #navicon.open { color: white; } #navicon.open:hover { color: #e6e6e6; } #fade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0.5; } So in this section we’re styling our menu icon in the header, it’s pretty simple, just giving it a relative position and a high z-index (which will be useful later when the rest of the content gets faded out it will stay on top). We’re also changing the color to white when it’s got a class of “open” which we’ll be adding and taking away using jQuery. We can also see that the single div with an id of “fade” stretches to fill the entire screen and filled with a solid black with a 50% transparency. If the user has no JavaScript then this black filter will be hidden, if not we’ll hide it with jQuery. Now let’s look at the menu itself:
#main-nav { position: fixed; height: 100%; top: 0; right: -250px; background: #222; max-width: 250px; width: 100%; z-index: 5; text-align: center; display: flex; flex-direction: column; } #main-nav a { flex: 1; color: white; border-top: 1px solid #555; text-decoration: none; display: flex; flex-direction: column; justify-content: center; } #main-nav a:hover, #main-nav a.current { background: #3c3c3c; } So last but not least the main menu. I must add first of all that this is the simplified code that would need quite a few vendor prefixes before being cross-browser compatible. To achieve this I recommend using an awesome tool like Autoprefixer to add all the correct prefixes for you.
So that being said, let’s look at what it entails: first of all it’s got fixed positioning at the top of that page and negative 250px to the right. This means that it’s there but just “off-screen” (as it has a max-width of 250px). The height is also 100%, so that it fills the whole window from top to bottom. The menu also needs a z-index between 0 and 9 (above the black filter). Then, here is when the magic happens, it has a display: flex; property, as well another linked property of ‘flex-direction’ (which we’ve set to “column” here instead of it’s default “row” which means the flex item children—the links in the menu—will fill the entire height of its parent in equal parts).
So that’s all been targeting the menu holder #main-nav, next when styling the links we give them a flex value of 1. This is what makes the links fill the whole height equally. Then these links are also given a display value of ‘flex’ themselves, which means that any elements inside of the links will be affected by this. We make sure the flex-direction is still ‘column’ and then we add a property of “justify-content: center;”. This makes the text itself inside of the links centred vertically as well (this is why there are divs inside of the <a> tags of the #main-nav, which is not exactly semantic but is a very quick and easy way to vertically center items.)
Now we can’t see anything we’ve just done quite yet, we now need to add our functionality with our own scripts.js file that we called earlier.
The script for this effect is very small and simple, but I’ll put it all here first and then explain what’s happening:
$(document).ready(function() { $('#fade').hide(); $('#navicon').click(function() { if($('#navicon').hasClass('closed')) { $('body').animate({left: "-250px"}, 400).css({"overflow":"hidden"}); $('#main-nav').animate({right: "0"}, 400); $(this).removeClass('closed').addClass('open').html('x'); $('#fade').fadeIn(); } else if($('#navicon').hasClass('open')) { $('body').animate({left: "0"}, 400).css({"overflow":"scroll"}); $('#main-nav').animate({right: "-250px"}, 400); $(this).removeClass('open').addClass('closed').html('☰'); $('#fade').fadeOut(); } }); }); So first of all we hide the black filter. Then next all we do will be contained inside a function attached to a click event that is bound to the menu icon link. When that is clicked we have two different cases or situations; one is when the menu is already hidden (like the default state) or one when the menu is showing. So the menu icon link has a class name of closed that we added, and we also styled for open. Our first “if” statement is that if the link is closed (therefore default). If that’s the case, then the whole <body> element is animated 250px to the left, and stops the scrolling of the page. The #main-nav div is also being animated into place, we’re changing it’s right value from -250px to 0. Then we’re removing the class of ‘closed’ from the link and adding one of ‘open’ as well as changing the html from the special character of three lines to an “x”. Finally we’re fading in our black filter to make the rest of the content dark. And that’s it! That gives us the open state of the menu.
Now the “else if” statement is targeting the open class on the menu link. When it does we do the reverse of everything we did before, moving the body back into position, as well as moving the menu off-screen again. Removing the class of ‘open’ from the menu icon, adding ‘closed’ and changing the content back to the icon as well as fading out our #fade div. If everything goes according to plan this is what the functionality should look like:
So there we have it! That’s one way to make this cool effect which we’re seeing more and more now with the style of modern webdesign, especially on mobile designs. This effect is a nice and simple solution that doesn’t require any plugins and can be fully customised to the needs of each project. Also it’s been a chance to make use of flexbox as well as a few other useful tools. Let me know in the comments if there’s anything you would’ve done differently or just what you thought!
Featured image/thumbnail, sliding door image via Shutterstock.
| 100+ High-Quality Premium Themes & Templates – only $27! |  |