Hiding iframe by clicking on a button

Ask the community
, ,
1

We are using our facebook page to advertise virtual tour services. The provider that we use for tours is allowed on social media and we can post any tour on Facebook directly.

The problem is though that we do not benefit in terms of SEO from people viewing tours as any tour our customers click on facebook is opening directly from the provider’s website.

Now I am thinking that it is better to publish just an image of a tour on facebook and when somebody clicks on the facebook image they are going to our website with unique tour id in URL and then a code on our website reads that ID from URL and shows iframe on our website with the tour loaded in it. This way we get a click for Google and better backlinks building.

Here is an example https://ozstockman.wixsite.com/wingmanmedia/services?m=q84fgP5phds

If you follow the link it will show the iframe control with the tour loaded in it.

If you remove data from URL making it https://ozstockman.wixsite.com/wingmanmedia/services then the IFrame control will be hidden.

It took me a while to write a code with WIX to do it. I have 8 years experience in web development. However I quitted IT 10 years ago and even I can recall how to do some stuff with Wix codes it looks I cannot use some simple syntax I got used to. So it’s not easy to recall things and then realise they do not work in WIX.

The links above are not from our live website and I use it as a sandbox to make sure things work before I publish them.

Anyway this part of a job done but I have one very important feature missing. I need to add a “close” button that will stay next to the Iframe that my customers can hide it when they are done with the tour they are watching. Also I want iframe to be shown in a place of a page where a customer clicks on a button to open it. In other words I need the iFrame to be floating vertically and not to be stuck on a specific position on a page.

Just to make it clear have a look at our live website at https://www.wingmanmedia.com.au/3dshowcases

As you can see there are a lot of tours and each has a button to open a tour. So if somebody clicks on a “Open Virtual tour” button somewhere in a centre of the page I want the iframe to be shown above the clicked button without any need to scroll to the top of the page to see the iFrame as it happens in case when it has a fixed position.

Currently that live page just opens a new tab and goes to the provide website and that’s the same problem with SEO. We want any tour to be opened on our webpage using iFrame like its done for customers coming from Facebook on my first link.

How do I do it?

2

Found a problem. My page on the first link in my initial post works on a desktop Win PC but does not work on my Android phone and on an IPad. Is it because it’s a free wix website which seems to have a top Iframe already and mine iframe is loading inside the one from Wix?

It loads the tour on Android and Ipad inside my IFrame but does not do anything when you click on it.

3

Hmmm, here goes…

First, what you knew before and are in the process of relearning you will find in WixCode. WixCode understands all of Javascript, except for anything that accesses the DOM. This in order to prevent the user from inadvertently “breaking” something. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

As you’ve discovered, the one exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can’t try to trick it by using parent, window, top, etc. Same goes with the Javascript evaluate() function. It is sandboxed and does not allow access to the DOM.

You can change several properties of the HtmlComponent as described in the API . However, you can’t make it “floating”, or change its size and layout.

You could put the HtmlComponent in a Lightbox, and the Lightbox would then open “in the middle” of the screen.

What might work out better for you would be to use dynamic pages . Each page would have a tour. You can customize the SEO using routers , so that each dynamic page would be indexed by Google.