Content jump on load page

PHP
,
1

Hi, I am using example.php to get information from the database and display it by including it in another .php file using include(’ ');. The include I put inside the bootstrap card component. When I refresh the page the card starts jumping. None of the side navbar or the navbar or the footer are jumping, only the content inside the card component. Why is that and how can I fix it?

2

Hi @dsmarinov, it is a bit hard for me to tell what is going on with the description of the problem you gave us. Certainly a link to a page where we can see the problem would make things a lot more clear, or in its defect an extract of the code that you think is faulty and why you think it might be so.

Many thanks!

3

That would be hard to do, since the code is way longer to be posted here. I’m actually posting, not including, the content through ajax by using this script.

function showContent(id) {
    $.ajax({
        url: 'getContent.php',
        type: 'POST',
        data: 'id=' + id + '&name=<?php echo $name; ?>',
        dataType: 'html',
        success: function (output) {
            $('.Content').html(output);
        }
    });
}

Can that be causing the problem? I did include the same file as plain text with the include(’ ') and that stopped the jumping on load. But when I use this ajax function it starts again.

4

I’m a bit out of touch with CSS, but what exactly do you get back from the PHP script? If you then hard-code that into the same place on the page, does it give the same effect? Is the PHP script returning properly-formatted html?

5

It’s returning the content which is stored in getContent.php. The thing is when I reload the page the content moves 1mm to the top and after the reload is done it gets back. I tried using min- and -max-height, as it is explained here, but that didn’t helped. Also adding ton of javascript code for scrolling to top etc. did not helped.

6

Well, if there’s nothing in the data that’s being returned from the PHP script that would cause it, you might be better posting it in the CSS section of the board, just because those with more CSS experience might be able to consider why it would move once the page has finished reloading.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.