Strange JS behavior with WP sidebar

  • Hi All,

    I am hoping someone can help out with what seems like a very strange behavior in my WP widget.

    I will layout some background info.

    The widget was developed in javascript. So, it can be used on a non WP site as well. When used outside of WP it consists of a functions file that goes in the header and a div and script tag that is in the body. Pretty standard stuff for a widget:

    <!--in the header-->
<script src=https://www.mysite.com/js/functions.js></script>
<!--in the body-->
<div id="123"></div>
<script>
param1="123";
param1="a";
param1="b";
more params...
doWork();
</script>

    Here is an overview of what the code does.

    The div that is created is the “main” div for the widget. The widget can function one of two ways based on params.

    1)It can be inline content. So, wherever you place the div and script tags, the widget will be displayed. The javascript function runs, reads the params, gets the relevent content, and creates an iFrame using document.createElement. The iFrame as appended to the “main” div with appendChild.

    2)It can have a floating button (position:fixed;left:0;top:50%). When you click on this button, a new div slides from offscreen. In this case, the “main” div becomes the floating button. Two new divs are created using createElement:

    a)a div that is the same dimension and position as the “main” div. it goes just under the “main” div. Its only purpose is so that the “main” div (acting as a button) can have opacity:.6 and you dont see the content underneath because this other div has opacity:1 and color #fff.

    b)a div that is positioned offscreen. The iFrame created with createElement is added to this div. When you click the floating button, this div slides onto the screen.

    It all works fine in any non-WP site I have tested. No issues at all.

    So, now the plan is to make this a WP widget. I enque the functions file (and a css file), add the params as widget options, create the body script tag in echo statements, and test with the Twenty Fifteen template, which has a sidebar–which floats separate from the content of the page. I believe it is called “sticky” as it floats until it hits the top or bottom.

    When I test with the widget as inline content (#1 above), no issues. So, everything now is about when the widget is using a floating button.

    When I make it a floating button, this is what happens–when you scroll the page and the sidebar reaches the top or bottom, the “main” div disappears. Scroll the other way, away from the top or bottom, and the “main” div appears again. So, it only disappears while the side bar is resting on the top or bottom. If I make the sidebar longer than the content of the page (with more widgets or a bunch of <br>) the “main” div never disappears.

    I just can’t make sense out of it. I would think that, if anything strange like this were going to happen, it would be to a div that was added to the DOM using the js. But, this is why I put “main” div in quotes all along–to emphasize it is a real div, not added to the dom by js. It is the div that is created with an echo statement that this is happening to. The divs created by createElement are fine. They never disappear.

    I have checked and ruled out any css issues. And, unless I missed something, have checked anything I am doing to this div in the js (really nothing more than adding classes, setting some attributes. And I am moving one <a> from the “main” div to the sliding div (this is for seo purposes–so an <a> to my site exists in the HTML before I move it to the slider div) but I have ruled this out as not an issue.

    Does this make any sense to anyone? Have you seen it before? Im happy to share pages, css, js, etc for anyone interested.

    • This topic was modified 6 years, 9 months ago by chz516.
    • This topic was modified 6 years, 9 months ago by chz516.
    • This topic was modified 6 years, 9 months ago by chz516.
    • This topic was modified 6 years, 9 months ago by chz516.
    • This topic was modified 6 years, 9 months ago by chz516.
    • This topic was modified 6 years, 9 months ago by chz516.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter chz516

    (@chz516)

    Ok, if anyone is interested, I have narrowed it down to a problem with: /wordpress/wp-content/themes/twentyfifteen/js/functions.js

    I guess that makes sense–a functions file specific to the theme.

    Thread Starter chz516

    (@chz516)

    There is a section specific for sidebar scrolling. If anyone can make sense of this I would really appreciate it. Im hoping that in my script I can compensate for whatever it is the twentyfifteen.js is doing to make my div disappear.

    Thread Starter chz516

    (@chz516)

    Ok, I found the issue and solution. i really didnt think I would, which was why I posted here. But feel free to delete this post.

    If you leave it, and it may help others, the issue was that the twentyfifteen theme has a js script that was setting the sidebar to fixed if it reached the top or bottom. My div didnt like this.

    To solve this, I moved my off of the sidebar and into body, so it no longer had sidebar as a parent: document.body.appendChild(myMainDiv)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Strange JS behavior with WP sidebar’ is closed to new replies.