Streaming live at 10am (PST)

SOLVED: Hide certain contents of page to be loaded into iframe

The idea is, that a customer can click on “learn more” to find out more details about a product.

This works perfectly as you can see here, if you click the button “SHOW MORE” just below Travolta:

<a href="javascript:loadcontent('s-type');">show more</a>

The function:

function loadcontent(cid) {
$("#iframe-lightbox").attr("src", '' + cid);}

Now my question is: Sometimes we only wanna show a certain section of that product page. Is there a way to not load the whole page but instead load a certain section/div/ID only?

Jquery’s load function could be useful here.

Thanks. I had that before and it actually worked. But then, the JS translation plugin (Mulitlingualizer) doesn’t work on that loaded content any more. So sad :open_hands:

Actually a viable alternative for me would be if I could just hide a few unwanted contents by maybe adding sth like


or so. Is that possible? I’m just bad with JS things.

Yes totally doable. Once you assign the parameter to a var, you could then do anything you want… like a hide() on an element.

Here is a stack solution.

1 Like

Thanks @webdev for pointing me to the solution:

Script in the head:

$(document).ready(function() {
   var windowURL = window.location.href;
   if (windowURL.indexOf('noheaderfooter') > -1) {
     $('#header').css('display', 'none');
     $('#footer').css('display', 'none');

Content of the page within the iframe looks sth like this:

<div id="header">
  …header content…
<div id="footer">
  …footer content…

And then I load the content into the iframe sth like this:

<iframe src="…">

Good. I was going to tell you that you needed a value for the URL. You used the location. Problem solved!

1 Like