Board with transparent background

[curiou...@gmail.com]

Hello,

Default background color of the board is white. In one of the examples I saw that if I want to change it to blue, I can do:

board.renderer.container.style.backgroundColor = 'blue';

My question is: how do I make it transparent?

Thanks very much.

[Murray]

Curious

"none" will do it. See

https://jsfiddle.net/mbourne/b5L7x9ap/

Regards

Murray

[curiou...@gmail.com]

Thanks, Murray. I tried that but for some reason that is not working for me: 'none' results in a white background.

I suppose something else is causing an issue. I am also having trouble with text alignment. anchorX: middle option hardly adjusts the text and essentially remains left-aligned.

[Murray]

Hi Curious

Best to put up a minimal example on jsfiddle (or your own site) so we can try to spot where the issues you are facing come from.

Regards

Murray

[curiou...@gmail.com]

I will try to do that. I have figured out that the problem, at least the problem with text-alignment. It arises when using jsxgraph with reveal.js (it is a presentation software). It is not easy to link to reveal.js as there are multiple files, and I have not used jsfiddle before. But I will see if reveal can be included there.

Thanks.

[curiou...@gmail.com]

On Saturday, March 12, 2016 at 11:52:18 AM UTC-5, curiou...@gmail.com wrote:
> I will try to do that. I have figured out that the problem, at least the problem with text-alignment. It arises when using jsxgraph with reveal.js (it is a presentation software). It is not easy to link to reveal.js as there are multiple files, and I have not used jsfiddle before. But I will see if reveal can be included there.
>
> Thanks.

Let me clarify my earlier post. I have not figured out what the problem is and how to fix it. I know that it occurs with reveal.js. It is not clear how to create a jsfiddle with reveal.js since it is not available on a cdn.

[Alfred Wassermann]

The correct value for a transparent background color is the color "transparent".
I want to mention that there is also the possibility to set the background-color with CSS, that is overwrite jsxgraph.css:

.jxgbox {
    background-color: transparent;
}

Best wishers,
Alfred

[Alfred Wassermann]

You can also post a minimal reveal example here.
I setup a small example and found a problem with dragging points. It seems that reveal.js meanwhile applies some CSS scaling which is not captured by JSXGraph.
For me, setting the scale factor to 1 solved the problem:

        <script>
            Reveal.initialize({
                minScale: 1.0,
                maxScale: 1.0
            });
        </script>

But of course, JSXGraph should be able to detect the scaling factor. We will work on it.
Please, tell us if this solves the aligning problems.

Best wishes,
Alfred

[Alfred Wassermann]

With the latest commit, JSXGraph supports also the CSS scaling from reveal.js. Problem was that there are two transformations and scaling is the second.
The bug fix will be contained in tonight's nightly build. Please, tell us your experience.

Best wishes,
Alfred

[curiou...@gmail.com]

Thank you, Alfred. I tested it. It is difficult to know when it works because on initial load it used to problematic, but a page refresh would fix it. Sometimes you need two page refreshes. However, it seems to be working now.

I want to test more. For that purpose could you please clarify:

Should I still add the minscale: 1.0 and maxscale: 1.0 to reveal.initialize() if I am using the nightly version? I suppose the answer is a no, but just want to make sure.

Also, does it matter whether the jsxgraph and the figure code script is included before or after reveal.initialize(). Should I load it before or after reveal.initialize()?

Really appreciate your help.

[Alfred Wassermann]

Should I still add the minscale: 1.0 and maxscale: 1.0 to reveal.initialize() if I am using the nightly version? I suppose the answer is a no, but just want to make sure.

This should not be necessary anymore.

Also, does it matter whether the jsxgraph and the figure code script is included before or after reveal.initialize(). Should I load it before or after reveal.initialize()?

It does not matter at all where jsxgraphcore.js is included. Of course it has to be included before the construction code.
For me, loading all JSXGraph related code before reveal.initialize() works. But this may not be true always.

The general rule - independent from reveal - is:
If the HTML element which hosts the JSXGraph board changes its size (or toggles display:none) during the user session, it should be possible to call the construction code during the initialization phase (i.e. before reveal.initialize()), but it may be necessary to call

board.resizeContainer(canvasWidth, canvasHeight, dontset, dontSetBoundingBox)

(see http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html#resizeContainer), when the construction is actually displayed to the user.

Best wishes,
Alfred