Embed Bugs

fonchi

I have the Vanilla Forum (2.1.9) embedded to a wordpress site (hablemosenbits .com/foro ) and the notifications are displayed at the bottom of the page instead of the bottom of where I'm at which is the way it shows when I'm seeing the forum without the embedding (hablemosenbits .com/forum).

It happens also with the default theme. What could it be?

Another bug I've been having with the embedding is that it crops the top of the forum when I'm logged and enter a discussion for the 2nd(+) time. If I reload, then it renders correctly again. It happens with all the plugins disabled. I'm using Bootstrap (2.5.1) theme. What could be the problem?

I've tried alot of things to no effect and looked everywhere and haven't found the answer. Thanks for your time and knowledge, hehe.

hgtonight

This is an issue with your specific embedding solution.

The inform messages are designed to show up on the bottom left of the screen. This is done using fixed bottom positioning. This works great, but the bottom of an iframe is different than the bottom of the window. You can use some JS hacking to get the inform messages offset to be equal to the viewport size.

The other spacing requires a few tweaks to the embedded forum theme.

fonchi

Thanks for the reply @hgtonight I changed the theme so I don't have that cropping issue anymore.

As for the notification, which js should I hack?

hgtonight

@fonchi said:
Thanks for the reply hgtonight I changed the theme so I don't have that cropping issue anymore.

As for the notification, which js should I hack?

You need to calculate the bottom of the viewable area of the I frame (via JS) and set the bottom of the inform message wrapper to that.

fonchi

Will this be how I get the viewable area?

<script type="text/javascript"> <!-- function viewport() { var e = window , a = 'inner'; if ( !( 'innerWidth' in window ) ) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] } } //--> </script>

hgtonight

I would do something like the answer here: http://stackoverflow.com/questions/15250235/determine-if-an-element-in-an-iframe-is-visible-on-the-screen

fonchi

@hgtonight, would this work for the javascript?

var iframe = window.parent.$('iframe#id'); var screenHeight = iframe.height(); iframe.animate({ scrollTop: screenHeight }, "fast");

hgtonight

@fonchi said:
hgtonight, would this work for the javascript?

var iframe = window.parent.$('iframe#id'); var screenHeight = iframe.height(); iframe.animate({ scrollTop: screenHeight }, "fast");

Did you try it?

Did it work?

fonchi

Hi @hgtonight. I've been trying to get the thing to work to no success.
Was trying to avoid asking too much but I can't seem to figure it out on my own.

hgtonight

What you need to do is calculate the offset for the .InformMessages bottom attribute.

In a standard forum (non-embedded), the bottom attribute is set to 0, because that is the bottom of the window frame.

Once you calculate the offset, you just set the css bottom attribute to that. Using jQuery, that would be $('.InformMessages').css('bottom', yourCalculatedValue);. Things are little more complicated than that since that element doesn't exist until you get an inform message. So we will manually create it in our script on the global.js file will use it.

if($('div.InformMessages').length == 0) {
  $('<div class="InformMessages"></div>').appendTo('body');
}

Now, whenever the scroll event (or something similar) happens, you call your calculation function which will update the CSS for your inform messages div.

fonchi

Ok, let me see if I got it .. haha. Will let you know.

Deprecatedz

@fonchi said:
Ok, let me see if I got it .. haha. Will let you know.

Si quieres resolver cualquier duda en español consúltame por privado, con mucho gusto intentaré ayudarte.

fonchi

@hgtonight , the calculation javascript and scroll event handler should be launched within wordpress? While the CSS with jQuery have to be added in /applications/dashboard/design/style.css and the code for the div in /js/global.js ?

hgtonight

All this should be done in a plugin.

fonchi

A plugin for the forum? Would it be able to calculate the viewable area even if its in an iFrame?