Search code examples
phpjquerycssjoomla3.0document.write

JQuery Flicker on Remove Function

Cannot find any answers on this particular scenario. CMS: Joomla I am use jquery on page that will be iframed to suppress the logo, menu items, etc that are contained in the central index.php header class.

the following code on the page to be iframed works okayish, but flickers (common problem right):

jQuery(function() {
            jQuery('.help').remove();
            jQuery('.dropdown').remove();
            jQuery("header").css("height", "    0px");
            jQuery("header").css("width", "0px");
            jQuery(":header").css({
                width: "0px",
                height: "0px"
            });

I have seen some solutions around document.write, which may work, however please note i cannot change the html in the index.php file, i have to find some way of only changing during or before page load (for the page load iframe) any help greatly appreciated!

Here is sample of the page that will be used for iframing (sometimes the classes do not load, i think this is due to the flickering/jolting of when the jquery kicks in : link

Solution

  • If you can change the CSS code of your document, add the following style properties to it:

    .help,
.dropdown {
    display: none;
}
header,
:header {
    height: 0px;
    width: 0px;
}

    If you cannot change the CSS of your page, use the following snippet to handle your problem (the files need to be included in the head, before the elements are loaded):

    <head>
<script type="text/javascript" src="jquery.js"></script">
<script type="text/javascript" src="file.js"></script>
</head>

    file.js (not within $(document).ready()):

    $('<style type="text/css">.help, .dropdown { display: none; } header, :header { height: 0px; width: 0px; }</style>').appendTo('head');