CODEWITHSUNDEEP
javascriptjquery
JK36
JK36

Reputation: 853

combine plain JavaScript and jQuery together

I've got a slight problem. I've got a page layout with a left column and a right column. I want to make the columns equal, so I've been using some javascript which equals them out quite nicely. However within the right column, I have a div which I would like to hide onload, and toggle when pressed. I'm using jquery to acheive this with good results. The problem is the first javscript is fixing the height of both the columns, if I have a height fixed that is not as deep then when the user toggles to view content, the content floats above the bottom line of both columns. Hope that makes sense.

I was thinking if I convert everything to jquery, I might have a fighting chance of passing the size of the height of the right container before it is hidden and then adding the height of the column right if its too small and then levelling both columns out.

This is quite difficult to explain, but hopefully someone out there undertands what I am trying to acheive.

    <script type="text/javascript">
    $(document).ready(function () {
        var contact_height = $("#ContentBlock").height();

        $("#ContentBlock").hide();

        $(".contact-us").click(function () {

            if ($('#ContentBlock').is(":hidden")) {
                $('#arrowopenclose').removeClass("panelCollapsed");
                $('#arrowopenclose').addClass("panelExpanded");
            } else {
                $('#arrowopenclose').removeClass("panelExpanded");
                $('#arrowopenclose').addClass("panelCollapsed");
            }

            $("#ContentBlock").slideToggle('fast');
            return false;
        });

    })
</script>



<script type="text/javascript">
function fixHeight(one, two) {
    if (document.getElementById(one)) {
        var lh = document.getElementById(one).offsetHeight + 15;

        //figure out how tall rh is and add contact_height + 15 if the space is smaller then contact_height
        var rh = document.getElementById(two).offsetHeight;
        var nh = Math.max(lh, rh);
        document.getElementById(one).style.height = nh + "px";
        document.getElementById(two).style.height = nh + "px";
    }
}

window.onload = function () {
    fixHeight('rightcolumn', 'content-container');
}
</script>

Upvotes: 2

Views: 1530

Answers (2)

JK36
JK36

Reputation: 853

I've taken Rodolfo's advice and recreated equal sized columns using pure css. Thanks to all that replied.

Upvotes: 0

Vivian River
Vivian River

Reputation: 32390

First of all, jQuery is a JavaScript code library. So jQuery code is JavaScript code.

If I understand your problem correctly, you're saying that you wrote some code in JavaScript (not using jQuery) that would align two columns. You call the function fixHeight.

You also have something that the user can click on that causes an anonymous function to execute which expands and collapses a panel on the screen. However, when that function executes, the two columns are no longer lined up as they were with fixHeight.

I propose to you that the solution may be to call fixHeight from within your anonymous function, like this:

    $(".contact-us").click(function () {

        if ($('#ContentBlock').is(":hidden")) {
            $('#arrowopenclose').removeClass("panelCollapsed");
            $('#arrowopenclose').addClass("panelExpanded");
        } else {
            $('#arrowopenclose').removeClass("panelExpanded");
            $('#arrowopenclose').addClass("panelCollapsed");
        }

        $("#ContentBlock").slideToggle('fast');

        fixHeight(one, two);

        return false;
    });

Upvotes: 1

Related Questions