Streaming live at 10am (PST)

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

#1

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", 'https://panther.rev6.co/p/' + 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?

#2

Jquery’s load function could be useful here.

http://api.jquery.com/load/

#3

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:

#4

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

…url.com/page?hidenav=1

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

#5

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
#7

Thanks @webdev for pointing me to the solution:

Script in the head:

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

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

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

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

<iframe src="…domain.com/page?noheaderfooter">
#8

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

1 Like