JQuery Flicker on Remove Function

Question

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

Here is sample of the iframed page: https://theyogasite.com/v2/calendar/83/dublin-school — Always In, Feb 05 '16 at 07:34
Can you change the CSS of the page? This could solve your problem. The flickering occurs, because you are waiting until the page is loaded, before you remove the elements. ``jQuery(function() { ... } );`` is a shortcut for ``jQuery(document).ready(function() { ... } );`` — ssc-hrep3, Feb 05 '16 at 08:24
if you cannot add CSS directly to the page add a css tag in the header via javascript but do not wait for document.ready event, just add it as soon as your javascript gets loaded, header will definitely be there already — Victor Radu, Feb 05 '16 at 08:27
BTW: There is no "element is ready" event in jQuery. So, you cannot do something with jQuery, as soon as one DOM element is ready. You can only wait for your full DOM to get loaded (http://stackoverflow.com/a/19355923/3233827) — ssc-hrep3, Feb 05 '16 at 08:30
Thnaks SSC, Victor ... understood re jquery. so i am trying to use javascript to remove the classes i don't need (like "logo" from parent element "header") its not working though ..hmmmm var el = document.getElementById(".header"); el.classList.remove("logo"); — Always In, Feb 05 '16 at 13:25
@FrankFerdinandMcGovern What are you talking about now? This is something different? Use the jQuery ``addClass`` or ``removeClass`` methods for adding/removing classes. — ssc-hrep3, Feb 05 '16 at 13:35

score 0 · Accepted Answer · answered Feb 05 '16 at 13:33

0

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');

answered Feb 05 '16 at 13:33

ssc-hrep3

15,024
7
48
87

Thanks SSC, this seems difficult to solve, i am still getting flicker with your solution, note i cannot change the CSS, so i tried your second solution and updated the (which is in the index.php) with those files in the you mentioned and then placed the jquery you mentioned $('').appendTo('head'); in inframed page, but i get the exact same results as before, the .dropdown, .help display momentarily – Always In Feb 06 '16 at 07:45
Actually ignore my comment above SSC, its seems to be working actually (mostly), i just have problem with one element - let me continue testing and report back - thank you! – Always In Feb 06 '16 at 07:58
okay, unfortunately false alarm @ssc-hrep3, the jquery code you gave me preforms better than what i had, but i still get the flicker: https://theyogasite.com/v2/calendar/83/dublin-school. also i noted placing the those .js files in the had absolutely no impact, maybe this is due to joomla set up, the is in the index.php file which is where i added these .js references. one thing, i did not really get your comment 'file.js (not within $(document).ready()):' i assuming that is not code to be added and your just saying, the .js files are outside of document ready ... – Always In Feb 06 '16 at 08:50

JQuery Flicker on Remove Function

1 Answers1