Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum
https://www.tinywebgallery.com/forum/

Simply need to hide a block at the bottom right here!
https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=4150
Page 1 of 1

Author:  chalk [ 19. Sep 2016, 11:25 ]
Post subject:  Simply need to hide a block at the bottom right here!

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

Author:  TinyWebGallery [ 19. Sep 2016, 12:29 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Author:  chalk [ 19. Sep 2016, 12:52 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Author:  TinyWebGallery [ 19. Sep 2016, 14:25 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Best, Michael

Author:  chalk [ 19. Sep 2016, 18:47 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Author:  TinyWebGallery [ 20. Sep 2016, 00:23 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Author:  chalk [ 20. Sep 2016, 08:21 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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" ]

Author:  chalk [ 20. Sep 2016, 08:51 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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!

Author:  TinyWebGallery [ 20. Sep 2016, 10:11 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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

Author:  chalk [ 20. Sep 2016, 15:09 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

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" ]

Author:  TinyWebGallery [ 20. Sep 2016, 22:42 ]
Post subject:  Re: Simply need to hide a block at the bottom right here!

Great!

Page 1 of 1 All times are UTC + 1 hour [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/