Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
So how really do you get the height of the longer div and apply it to another so that they would have equal height?
Simple. By JS! I’m not in a master-level when it comes to jQuery or JavaScript; I still run to Stack Overflow and jQuery documentation to get a general knowledge of which does what.
Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:
[code lang=”js”]
$(document).ready(function() {
var $longerDiv = $(‘#long-div’).height();
$(‘#short-div’).css(‘min-height’, $longerDiv+"px");
});
[/code]
This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]
And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]
Check out the demo on jsFiddle: http://jsfiddle.net/8WDWf/
There might be a better way in doing this — hit up the comments!
—
Other code-testing sites on CSS-Tricks: http://css-tricks.com/seriously-just-make-a-jsfiddle/
It is the fifth day I’ve come back with my toolbox to continue building again.
Today, we’re going to look at how typography and link color/behavior could greatly affect the look of a site.
I’m planning to customize the link color and remove the default underline and also experiment on the webfont (maybe use Open Sans?).
But who ever said it is? Splash pages/screens in web and apps are useful while the homepage/screen is loading. One could also use an animation when exiting from the splash.
So be creative on those splash now.
Due to clumsiness, I lost a Photoshop file I was working on last Friday. It was an Android “mock-app” and prior to working on it, it was supposed to be a template file so the file name was something like “android-app_template_1a.psd.
Now, it’s Monday and it’s back to work, I was looking for the file with the project file name in mind. So, tough luck for me finding it.
I know, I could have looked up files modified by Friday but Windows 7 Search thinks you could just describe what you’re searching for in the Search field.
I never had this “difficulty’ in Windows XP. Makes me miss Benny the dog whom we shooed away far too many times. *sniff*
Since we can’t do anything about it, might as well memorize operators, keywords, and wildcards for Windows 7 Search.
I recently joined The Noun Project — a site that crowdsources icons from designers and uploaders.
From their About page:
The Noun Project is a platform empowering the community to build a global visual language that everyone can understand.
Visit my page; I’m working on a facial expression series: Dys on The Noun Project
All WordPress .assistive-text and .screen-reader-text are being hidden superficially — screen readers would still be able to read them.
Here’s the CSS snippet from HTML5 Boilerplate v4.0:
.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
—
By the way, I would write a separate post here how I write the class or ID name of an HTML element rather than placing the pre-defined class selector in the HTML code. For example, instead of putting .visuallyhidden in all elements that I want to be displayed according to the style, I would put its class or ID name along with .visuallyhidden in the stylesheet.