Style toggler? - Githubissues

GoogleCodeExporter commented 9 years ago

Can You help me to style toggler to be

*) vertical
*) snaped to the middle of the right edge of the first screen (it shouldn't 
follow me on scroll)

?

Here's my best try:

To rotate the toggler:

    myBox.style.WebkitTransform = "rotate(-90deg)";
    myBox.style.MozTransform = "rotate(-90deg)";

To set the absolute position:

    myBox.style.top = '160px';
    myBox.style.right = '30px';

But when I toggle it — its horizontal position changes — and I can't find 
where it is set.

Original issue reported on code.google.com by kheyfbo...@gmail.com on 31 Jul 2013 at 5:59

GoogleCodeExporter commented 9 years ago

Hi

Works fine for me:
{{{
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Hyphenator.js – toggle style</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                width:50%;
                margin-left:25%;
                margin-right:25%;
                font-size: 40px;
            }
            #hyphenationbutton {
                /*styles that won't change on click*/
                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                position: absolute;
                top : 160px;
                right : 30px;
            }
        </style>
        <script src="./Hyphenator.js" type="text/javascript"></script>
        <script type="text/javascript">
            var hyphenatorSettings = {
                    displaytogglebox: true,
                    togglebox: function () {
                            var myelem = document.getElementById('hyphenationbutton');
                            if (Hyphenator.doHyphenation) {
                                    /*styles that change on click*/
                                    myelem.style.color = '#00FF00';
                                    myelem.onclick = Hyphenator.toggleHyphenation;
                            } else {
                                    /*styles that change on click*/
                                    myelem.style.color = '#FF0000';
                                    myelem.onclick = Hyphenator.toggleHyphenation;
                            }
                    }
            };
            Hyphenator.config(hyphenatorSettings);
            Hyphenator.run();
        </script>
    </head>
    <body>
        <div id="hyphenationbutton">toggle hyphenation</div>
        <p class="hyphenate">Supercalifragilisticexpialidoucious</p>
    </body>
</html>
}}}

Original comment by mathiasn...@gmail.com on 1 Aug 2013 at 3:30

Changed state: Started

GoogleCodeExporter commented 9 years ago

That is unfair: You don't change the text dynamically. Hyphenator.js changes 
Hy-phen-ation to Hyphenation, and in Your sample You just have static "toggle 
hyphenation".

That would be more fair:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Hyphenator.js – toggle style</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
        body {
            width:50%;
            margin-left:25%;
            margin-right:25%;
            font-size: 40px;
        }
        #HyphenatorToggleBox {
            /*styles that won't change on click*/
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            position: absolute;
            top : 160px;
            right : 30px;
        }
      </style>
      <script src="./Hyphenator.js" type="text/javascript"></script>
      <script type="text/javascript">
        var hyphenatorSettings = {
            displaytogglebox: true,
            togglebox: function () {
                var bdy, myTextNode,
                text = (Hyphenator.doHyphenation ? 'Hy-phen-a-tion' : 'Hyphenation'),
                myBox = document.getElementById('HyphenatorToggleBox');
                if (!!myBox) {
                    myBox.firstChild.data = text;
                } else {
                    bdy = document.getElementsByTagName('body')[0];
                    myBox = createElem('div', document);
                    myBox.setAttribute('id', 'HyphenatorToggleBox');
                    myBox.setAttribute('class', dontHyphenateClass);
                    myTextNode = document.createTextNode(text);
                    myBox.appendChild(myTextNode);
                    myBox.onclick =  Hyphenator.toggleHyphenation;
                    myBox.style.position = 'absolute';
                    myBox.style.top = '0px';
                    myBox.style.right = '0px';
                    myBox.style.margin = '0';
                    myBox.style.backgroundColor = '#AAAAAA';
                    myBox.style.color = '#FFFFFF';
                    myBox.style.font = '6pt Arial';
                    myBox.style.letterSpacing = '0.2em';
                    myBox.style.padding = '3px';
                    myBox.style.cursor = 'pointer';
                    myBox.style.WebkitBorderBottomLeftRadius = '4px';
                    myBox.style.MozBorderRadiusBottomleft = '4px';
                    myBox.style.borderBottomLeftRadius = '4px';
                    bdy.appendChild(myBox);
                }
            }
        };
        Hyphenator.config(hyphenatorSettings);
        Hyphenator.run();
      </script>
    </head>
    <body>
      <!-- <div id="hyphenationbutton">toggle hyphenation</div> -->
      <p class="hyphenate">Supercalifragilisticexpialidoucious</p>
    </body>
  </html>

But it gives: createElem not defined -- despite it is defined in Hyphenator.js, 
and I load it before the call... I'm not in JavaScript, so I've no idea what it 
is.

Original comment by kheyfbo...@gmail.com on 3 Aug 2013 at 10:52

GoogleCodeExporter commented 9 years ago

I managed to do what I wanted with this:

toggleBox = function () {
    var bdy, myTextNode,
    text = (Hyphenator.doHyphenation ? 'toggle hy-phen-a-tion' : 'toggle hyphenation'),
    myBox = contextWindow.document.getElementById('HyphenatorToggleBox');
    if (!!myBox) {
        myBox.firstChild.data = text;
    } else {
        bdy = contextWindow.document.getElementsByTagName('body')[0];
        myBox = createElem('div', contextWindow);
        myBox.setAttribute('id', 'HyphenatorToggleBox');
        myBox.setAttribute('class', dontHyphenateClass);
        myTextNode = contextWindow.document.createTextNode(text);
        myBox.appendChild(myTextNode);
        myBox.onclick =  Hyphenator.toggleHyphenation;
        myBox.style.position = 'absolute';

        myBox.style.WebkitTransform = "rotate(-90deg)";
        myBox.style.MozTransform = "rotate(-90deg)";
        myBox.style.top = '160px';
        myBox.style.right = '-90px';

        myBox.style.margin = '0';
        myBox.style.backgroundColor = '#AAAAAA';
        myBox.style.color = '#FFFFFF';
        myBox.style.font = '6pt Arial';
        myBox.style.letterSpacing = '0.2em';
        myBox.style.padding = '3px';
        myBox.style.cursor = 'pointer';

        myBox.style.WebkitBorderTopLeftRadius = '4px';
        myBox.style.MozBorderRadiusTopleft = '4px';
        myBox.style.borderTopLeftRadius = '4px';

        myBox.style.WebkitBorderTopRightRadius = '4px';
        myBox.style.MozBorderRadiusTopright = '4px';
        myBox.style.borderTopRightRadius = '4px';

        bdy.appendChild(myBox);
    }

    if (Hyphenator.doHyphenation) {
        /* styles for hyphynation */
        myBox.style.right = '-90px';
        myBox.onclick = Hyphenator.toggleHyphenation;
    } else {
        /* styles for no hyphenation */
        myBox.style.right = '-78px';
        myBox.onclick = Hyphenator.toggleHyphenation;
    }

},

So I just modified toggleBox in Hyphenator.js

I don't use it directly by myself, instead I'm using throught a sphinx 
extension:

https://bitbucket.org/birkenfeld/sphinx-contrib/src/c9bd69e36233ec00df831de6bc1c
4d9c51b559d5/hyphenator?at=default

I attached a screenshots with result.

Original comment by kheyfbo...@gmail.com on 3 Aug 2013 at 11:15

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by mathiasn...@gmail.com on 25 Sep 2014 at 3:01

Changed state: Fixed

xles / hyphenator

Style toggler? #189