CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Die 20
Die 20

Reputation: 261

html elements issue after loading content without page refresh

I have a page where I load information dynamically. The content loads, but the problem is that the div that holds the content(content_container) causes the page to increase in size(which is expected) but it results in the footer, header, and content_type_container from being fixed. I would like it if the html elements adjusted after the content was loaded.

here is the html: 

<div id="content_container">

            </div>      

            <div id="content_type_container" style="display:none;">
                <div  class="content_type">
                    Content Type 1
                    <input type="hidden" value="1" class="content_type_value"/>
                </div>
                <div  class="content_type">
                    Content Type 2
                    <input type="hidden" value="2" class="content_type_value"/>
                </div>


            </div>

here is the jquery:

$(document).ready(function() {



    $(".content_type").click(function() {
        var content_type = $(this).find(".content_type_value").val();   
        content_type = $.trim(content_type);
            if(content_type)
            {
                $.ajax({
                    url: "content_type_ajax.php",
                    data: "content_type="+content_type,
                    success: function(msg) {
                    $("#content_container").html(msg);
                    $("#content_container").click(); /* adding this reset the header and footer divs to the new height of the content container. fixing the issue */                            
                }
                });
            }   
        });

        $("#content_type_nav").click(function() {
            $("#content_type_container").slideToggle("fast");


        });
        $(".content_type").click(function() {
            $("#content_type_container").slideToggle("fast");


        });
});

and the css: 

#content_container{
    display:block;


}

#content_type_container{
    position:fixed;
    display:block;
    bottom:0px;
    width:100%;
    z-index:1000;

}



.content_type{
    display:block;
    width:100%;
    text-align:center;

}


.content_type:hover{
    background:blue;
    color:white;

}

Upvotes: 0

Views: 272

Answers (2)

Josh
Josh

Reputation: 1049

please try position:relative; instead of fixed

give fixed height and overflow for #content_type_container, if you looking for fixed height with scroll bar

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24703

if you set important to the css elemt then it should work as you want

#content_type_container{
    position:fixed !important;
    display:block;
    bottom:0px;
    width:100%;
    z-index:1000;
}

Upvotes: 1

Related Questions