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

Design help Custom code
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.

https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters

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
9

Hi, trying to use this to hide the footer (#cc-footer) but seems that I’m failing to do so. Anyone able to tell me why?

https://webflow.com/design/cc-2022-a181d8?pageId=63aac229cefc0fc040dc15c6

This the HEAD:

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

This is the EMBED iFrame:


<iframe width="100%" height="450" frameborder="0" src="https://cc.tietoa.fi?noheaderfooter"></iframe>

And here is the page content…

<footer id="cc-footer" class="section footer-generic w-clearfix wf-section"><div class="footer-row-generic w-row"><div class.............

10

@tietoa - Webflow loads jQuery before the body close. Therefore scripts that depend upon it should be loaded after. See if that resolves your issue.

11

Progress! There was one cookie error but related to other things. The error related to the dependency of loading order was resolved by moving the script to the end of the Body.

But, not yet able to make the footer disappear though.

https://cc-2022-a181d8.webflow.io/test