If…Else: If iFrame exists, apply CSS to page?

Question

I'm new here. And very new to programming, markup, web dev. I do have some basic understanding of HTML and CSS, but this is my first attempt at using jQuery/Javascript.

Is it possible to use jQuery (or otherwise) to

1- detect if an iframe with class="iframe1" appears on a given page and

2- if it does exist, to remove the primary navigation bar with id="main-header" ?

I'm currently using this custom CSS to hide the navigation globally:

#main-header {
display:none !important;
}

and then using this (for example) to replace it on individual pages:

.page-id-1350 #main-header {
display:block !important;
}

Obviously this is not ideal, and I very much like to automate this process.

Thanks very much in advance,

Chris

Answer 1

You can use the following jQuery code to do just that:

if($(".iframe1").length > 0) // If .iframe1 exists
    $("#main-header").hide(); // Hide #main-header

Or, go the opposite way, keep your CSS that hides #main-header and then show it when .frame1 is not present on the page:

if($(".iframe1").length == 0) // If .iframe1 does not exists
    $("#main-header").show(); // Show #main-header

Answer 2

You could do this with JavaScript, with code like this:

<script>
// Place this at the end of the body
window.addEventListener("load", function(){
    var iframeTest = document.querySelectorAll("iframe.iframe1");
    var navBar = document.getElementById("main-header");
    if (iframeTest.length > 0) {
        navBar.setAttribute("style","display:none");
    }
});
</script>