Zial Zial - 1 year ago 71
jQuery Question

Google Calendar Title Set to Display None

so , we have a google calendar in our store site. and all we want is how to set the title display none in css or jquery ?

here's our code so far

<script>jQuery( document ).ready(function(){jQuery('iframe').contents().find('span').css('display','none');});</script>

Answer Source

if you open your console by doing to inspect element (F12) and going to the console tab, you can see the error you face:

"jquery-2.1.4.min.js?1013665…:2 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://motorhelmets.com" from accessing a frame with origin "https://calendar.google.com". Protocols, domains, and ports must match."

Google domain doesn't allow editing form external domains.

However since the content you want to hide is at the edge of the frame (ie at the top), there a couple of tricks you could use with css to hide it. For instance you raise the iframe content or the iframe itself could be moved higher hence covering up the title or you could use some html element to cover up the title.

The following is the html code to cover up the title. It needs to be inserted inside the calendar_iframe div right before the iframe.

<div style="position: absolute;height: 20px;width: 100%;background: white;"></div>