Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I just bought the Advanced Iframe plugin - It looks great and has load of options BUT I cant seem to just simply float and image or rectangle over the iframe at the link below.

http://www.dorfmeisterstudios.com/interactive-floor-plan/

I have made it full screen and have tried some code in the "Hide/cover parts of the iframe" such as r10,b20,200,50,#ffffff,10 to try and get a block or image aligned to bottom right to just hide the options.

I cant get any rectangle or image to appear!

If someone can tell me how to just get a block to cover the bottom right options at my link that would be great for now!!

Thanks

it seems you have not
r10,b20,200,50,#ffffff,10

configured. When I go to the page the z-index is 0 here. But the iframe has an z-index of 9000 !!
os the div has to have a higher z-index.

also you have media query which hide the complete content depending in the size!

I have used a z-index of 10000. If I change the size of the browser the rectangle appears and then disappears as your main page seems to hide the whole page depending on the size.
You should change this behavior first!

So for me it seems the problem are the media queryies of your page + the z-index which is way to small.

Best, Michael

Hi. And thanks for the very quick reply! (and sorry about the PM - just wanted to make sure the right person saw this thread)

I have been able to get something working here now http://www.dorfmeisterstudios.com/interactiveandvr/

A simple grey block aligned to bottom right.. this doesn't seem to work when i use the option to get fullscreen settings. Is that just a simple case of changing the Z index to 10000 as you suggest or is there something else that I need to do to get this same grey box appearing on the fullscreen version?

Thanks

Where is the fullscreen option? the gray layer is over there now....

Best, Michael

The previous fullscreen one is here still: http://www.dorfmeisterstudios.com/interactive-floor-plan/

Ideally I want to get it fullscreen with the block at bottom right but when I activate the 'set fullscreen' section in the advanced iframe options the block no longer appears. Thats why ive just set it at 88x600 for now.

If you can let me know how to get both the fullscreen option along with the same grey block that would be fine for now.

Thanks

Hi,

I have written you the solution in my first answer. The main problem is that your theme has some settings with some media queries you would have to fix. fullscreen set a z-index of 9000. you your div has to have a higher one.

Best, Michael

Thanks for the reply. I'm still a bit unsure what you mean really. I just bought you're plugin to make using these iframes easier and i'm not a master coder! Are you saying that I will have to edit code in the background of my theme now somewhere?.. I'm unsure what you mean by 'media queries' and would have no idea where to look to fix these things..... - why would these effect making the iframe fullscreen when it works at a set size of 800 x 600 in my other example?

I've changed the code making the hide_part z index 10000 i think. Should this work then?

[advanced_iframe securitykey="168497b3ed97524fd40858096df965ea618db61b" use_shortcode_attributes_only="true" src="http://goo.gl/BRjK4D" width="100%" height="100%" style="position:fixed;z-index:9000;top:0px;left:0px;margin:0px" id="advanced_iframe" hide_content_until_iframe_color="#ffffff" content_id="html,body" content_styles="overflow:hidden" hide_part_of_iframe="r5,b10,200,50,#979797,10000" ]

Just as a quick update... I'm trying the plugin on different WP themes and getting different results. Some the block appears but doesn't align bottom right, some the whole thing is behind the theme (default WP twentyEleven theme) Is there a theme you would recommend that works well with your plugin for all this then at all?

Thanks

Edit 2: Using the TwentyFifteen theme I have gotten this far now: http://k3-d.co.uk/floorplan-test/

The fullscreen and block work ok but still doesn't align bottom right using hide_part_of_iframe="r0,b0,200,50,#979797,10000".

As this will be for hosting these projects for clients I can use whichever theme makes it work the best... if you have any idea which theme, or any other way to get this working that would be fine! Trying to find the simplest route!

The problem is that modern themes use media queries. This means that depending on the width of your browsers different styles are used. And the plugin of course don't know the theme. But in your case the fullscreen settings is the "problem"

I just tested
hide_part_of_iframe="r0,b0,200,50,#979797,10000".

Basically this is correct but r0 b0 means the right, bottom corner of the element the iframe is placed. In your case this is the element with the id="entry-content". Normally this is than the right bottom corner of the iframe.

In you case you use a fullscreen iframe! Which means you have set position:fixed; at the iframe. This than also has to be set for the div.

So the code you need is:
hide_part_of_iframe="r0,b0,200,50,#979797;position:fixed;,10000".

This also can work for you original theme. Please try this if it works with this theme.

Best, Michael

Thanks! I have got it working here now http://www.dorfmeisterstudios.com/interactive-floor-plan/

I had to change the main iframe z-index to 0 as well then it worked.

Code for any future referance


[advanced_iframe securitykey="key" use_shortcode_attributes_only="true" src="http://goo.gl/BRjK4D" width="100%" height="100%" style="position:fixed;z-index:0;top:0px;left:0px;margin:0px" id="advanced_iframe" hide_content_until_iframe_color="#ffffff" content_id="html,body" content_styles="overflow:hidden" hide_part_of_iframe="r0,b0,200,50,#979797;position:fixed;,10000" ]

Great!