Braad

Hello bwickert,

I’m happy to help you get the plugin working. I’ve just tested it in a fresh install with Twenty Ten and it’s working great for me.

This plugin is all about a transparent check for whether the logged in. If the user is already logged in when they click the link, they won’t see a login form, because they are already logged in. This means that if you’re testing the plugin while logged in, you won’t see the login form.

If you aren’t seeing the login form when you click the link and you’re sure you’re not logged in, then the problem is either that the link is missing the ‘ajax-login-trigger’ class, or there is a JS error. You’ll know there is a JS error if you see it in your browser console, and the HTML for the trigger link should look something like:

<a href="/some-page" class="ajax-login-trigger">Click Me</a>

I’m not seeing that class on the link that you put in your post above, but maybe it got stripped out? If there are no JS errors in the console and you think you have the correct link HTML, can you post it again here and put it inside backticks so I’ll be able to see the raw HTML you’re using?

Hopefully this information helps you. The plugin is definitely working great for me on many sites, so I’m hopeful we can get it working for you.

-Braad

Hello Diane,

I’ve taken a look at your page but I can’t tell which elements you are trying to equalize the heights of. Which elements are you trying to target?

One way you can test whether you have the right selector is to open your browser console (right click, inspect element, console tab in Chrome) and type this:

jQuery( '.your-custom-selector' )

Of course replace ‘your-custom-selector’ with your selector. This will return the elements on the page that match the selector, allowing you to test your selector and try different selectors until you find the right one. Once it returns only the elements you want you’ll know that the selector should work.

I hope this information helps. If you tell us the specific elements you want to equalize the heights of we can recommend a selector for you to try.

Hello powerfulyou,

I’ve taken a look at your site, and I think the reason it isn’t working is because you’ve set a breakpoint of 2000 pixels. The breakpoint is the screen width under which you don’t want to the plugin to equalize the heights, so in your case this is saying “Don’t equalize the heights if the screen is not at least 2000 pixels wide”.

You can confirm that it is indeed working if you enter this into the console:

jQuery( '.content, .sidebar-primary' ).initEqualHeights();

That calls the script directly, without setting a breakpoint, and it works, but right now you don’t have the white background color on .sidebar-primary, so it’s difficult to notice that it works. I’d recommending putting the white background on .sidebar-primary so that you get the look of Equal Height Columns.

I usually use a breakpoint of 768, which is an iPad in portrait orientation, so that I get the equal height columns on iPads and bigger but not on iPhones, but it all depends on your theme’s mobile breakpoint.

Please try a lower breakpoint and let me know if it works for you, and thank you for using Equal Height Columns.

Hello @mandrill2000,

We haven’t heard from you for a while, so I’m going to mark this issue as resolved, but feel free to reopen if there is anything more we can help you with. 🙂

Hello MaryMak,

Equal Height Columns is set to recalculate the heights whenever the window is resized, but it also includes a direct JS method $.equalizeTheHeights() that you can use to force a recalculation of the heights whenever something else like an accordion expanding happens.

The key is to hook into a JS event that fires right when the heights are ready to be measured. I’ve looked at your page but I’m not sure what method you’re using to expand the accordions. Hopefully there is a suitable event that is fired or your controlling the JS yourself so you can trigger the recalculation directly.

Here is some quick example JS that demonstrates the concept:

jQuery( '.tb-toggle' ).on( 'click', function() {
	setTimeout( function() {

		jQuery( '#sidebar_layout .fixed-sidebar,#sidebar_layout #content' ).equalizeTheHeights();

		console.log( 'equal heights has retriggered' );

	}, 1000 );
});

This method isn’t ideal, because all it does is say whenever one of the toggles is clicked, wait 1 second and then recalculate the heights. It would be more ideal to fire it immediately after the accordion has been expanded, either by hooking into a JS event fired at that point, or calling the $.equalizeTheHeights() method directly at that point, or if you’re using CSS transitions, set the timer value above to be just after the CSS transition will be finished.

I hope this helps. If you paste the code above into the console, you’ll see the recalculation happening.

Thanks for sharing the URL. I can see that the plugin is working and the selectors that you are using are very close to correct. Right now your selectors are:

.su-row .su-column-size-2-3
.su-row .su-column-size-1-3

But you actually want to use:

.su-row .su-column

The idea is that a single selector should match multiple elements and then equalize the heights of all the matching elements. With your selectors you were only matching one element with each selector, so the plugin didn’t have a second element to compare it to.

There are, however, some other issues on your page that you’ll need to fix before you get the result that I think you want. Using the selector I mentioned above will equalize the height of the columns, but in your case your div that has the background color is not the column div, it’s one of the child divs. You could do height: 100%; on .su-column-inner and then add box-sizing: border-box; to your div with the background color. That gets you most of the way there. There is also a JavaScript error showing in the console Uncaught ReferenceError: ajaxurl is not defined that may prevent the JavaScript that Equal Height Columns needs from running. It looks like that is coming from a plugin called WP RSS Aggregator.

Best of luck.

-Braad

Hello @davidgaz,

Thank you for using Vertical Center, and for posting in the support forums. I’m happy to help you get it working. 🙂

Let’s say you’ve got some HTML like this:

<div class="vc-target-wrapper">
    <div class="vc-target">This inner div is what we want to vertically center.</div>
</div>

The selector that you’d enter on the settings page would be .vc-target. If the inner div had id="vc-target" rather than class="vc-target" then the selector would be #vc-target. You can use any arbitrary selector here, it doesn’t have to be vc-target. You could do id="target" and then the selector would be #target but the point is that the selector you want to use should match the child element that you want to vertically center relative to its parent.

So in the above example, if we entered .vc-target as a selector on the settings page the plugin would do this: “Look for the element that matches the selector .vc-target, calculate its height, then go one level up to find its parent element, then calculate the parent’s height, then subtract the child height from the parent height and divide by two, then apply any offset, then apply the result as margin-top to the child element.”

The essential pieces are the right selector to match the child element you want to vertically center and the child element being wrapped in an immediate parent element that it should be centered relative to. This also means that the parent element should always be taller than the child element, because otherwise the child element has nothing to center itself relative to, so in the example above we would need to have a height set on .vc-target-wrapper that was greater than the height of .vc-target in order to see any vertical centering.

I hope this information helps. If you send me a link to the page on your site where you’re trying to get it working and explain which element you want to be vertically centered, I can take a look and respond with what selector you should be using.

-Braad