
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
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.