Mohsin Rasool - IAM & IGA Consultant

  • Home
  • About
  • Testimonials
  • Genesis Framework for WordPress – What, Why & How
  • Contact

Powered by Genesis

Keep Height of Second Div column same as First Div

September 18, 2013 by Mohsin Rasool

Hi,

In responsive web design, I often encounter this issue, and solve it with jQuery. However this time, it was little different took much time to get it right.. So i am posting here for future reference:

<code>

<script>
jQuery(document).ready(function($){
var currentHeight = 0;

$(window).load(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
});

$(window).resize(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
$(window).trigger('resize');
});

});
</script>
</code>

I had two column layout, with responsive slider at the left, and a div in the right.

As slider keeps changing its height, right div looked bad. So using above code, we can use Jquery which does:

1. Take size of slider (on load as real property in css is not set, and you need to let the page rendered to get the rendered height)

2. Now we have two functions, one changes the height of right div on first page load. And second does the same thing but on every time when window resizes… to keep the height same on every window resize/reload.

Filed Under: Code, jQuery, Technology, WordPress

Recent Posts

  • Launch Again if Needed
  • Testing Gutenberg Editor
  • My Favorite Quotes
  • Fix NodeJs Permissions Problem
  • Take Full Page Screenshot in FireFox with No Addons like a Boss
  • My Calculator is Now NodeJs instead of Google or Excel
  • Node.js Installing on Ubuntu 14.04 and also NPM
  • Associate Tags & Categories with Custom Post Type – CPT & Make them Work on Archive Pages
  • SASS & SCSS to Super Charge CSS Skills
  • Bluefish Editor – Text Editor for Programmers
  • An offline version of Khan Academy
  • Happy New Year 2014 & Falling Snow until 4th jan
  • WordPress 3.8 I love Admin Interface
  • German City Starts Distributing Free Ubuntu 12.04 CDs to Windows XP Users
  • FireFox Responsive Web Design View RWD
  • Keep Height of Second Div column same as First Div
  • Using PTCL & WordPress – Two Unusual Issues I Faced Today
  • Surprise – The Biggest Bonus So Far & Joy of Working
  • Toastmasters Club Lahore
  • Giving Access to Specific Bucket in AWS using IAM
  • GiT Guide & Basic Commands for Git Beginners
  • Added Good Looking Pricing Table to MagicBox Website
  • Thank You WordPress
  • Yes You Can Do It _Watch it Now
  • 2Checkout Coupon Promo Code Get Free 2Co Account
  • Top Ubuntu Free Softwares We Use Everyday in Our Internet Business
  • Market Samurai – Great Customer Support
  • Bobby McFerrin hacks your brain with music
  • Start up File Helps Your Startup Business
  • Simply Awesome – Reunion With Old Friend
  • Fire the Complex, Go for Simple
  • Facebook Profile Nice & Clean Personal URL
  • Forget about todo list, Manage Your Energy
  • Credit Card Interest Rate Puzzle & Banker’s Bomb
  • Seven Best Free Tools I Use Everyday in my Business
  • Google Wave – Best Tips & Tricks for Users
  • Paypal in Pakistan? Response to a Friend
  • Google Apps – Future Of Business Communication
  • Flippa for Flipping, Good as Sitepoint?
  • Fit Reports Launched again at Fit dot com
  • How a Website is Created Online Exactly – Part -1
  • 2Checkout Owner Alan Homewood Interviewed
  • Uploading Files Fast Quick Tip
  • How to Delete All Those Spam Comments
  • WordPress as CMS Pages RSS Feeds
  • MySQL-Front What a Great Tool
  • Google Chrome Browser Background Problem
  • Quick Fix for WordPress Duplicate Content
  • WordPress Blog Tips
  • No Paypal, No Clickbank, No Problem