bjerreandersen

Thanks, Baden! It works perfectly now ??

frederik

Thanks Ed and Baden!

Eds notion about the last expand makes me think that the problem could be desribed like this: if there’s not room for the whole expand-text on the same line as the trigger, the expand will start on a new line. Instead it should be coded to place as many words, as there are actually room for, inline after the trigger and only shift to a new line when necessary in the specific browser/view.

f

…the way I’ve done it, it doen’t seem to work in Firefox either.

Here is the code – don’t know if it could have any influence, that it’s written inside a text block in WPbakery’s Visual Composer-plugin?:

<blockquote style="font-size: 28px;">Mit br?ndstof er at formidle [expand title="historier" trigclass="highlight, noarrow" targclass="highlight" targtag="span" targpos="inline"] , der g?r en forskel for de mennesker, der modtager dem[/expand] . Jeg g?r op i fort?llingens [expand title="platform, indhold og udtryk" trigclass="highlight, noarrow" targclass="highlight" targtag="span" targpos="inline"] ? – b?de den skarpe vinkel, de sproglige virkemidler og en god brug af sociale medier[/expand] ? – og jeg elsker at arbejde med [expand title="alle aspekter" trigclass="highlight, noarrow" targclass="highlight" targtag="span" targpos="inline"] , fra sparring om den l?se idé til det sidste punktum og evalueringen[/expand] . Inden for nyheder og kultur har jeg v?ret igangs?tter og aktiv i en lang r?kke [expand title="projekter og processer" trigclass="highlight, noarrow" targclass="highlight" targtag="span" targpos="inline"] , eksempelvis 2nd screen til Eurovision, web-tv fra musikfestivaler, dr.dks nye forside, opstart af Ekstra Bladets Nationen! og udvikling af poetry slam-scenen i K?benhavn [/expand] , og kan b?de [expand title="samarbejde, koordinere og holde" trigclass="highlight, noarrow" targclass="highlight" targtag="span" targpos="inline"] ? styr p? alle de l?se ender.[/expand]</blockquote>

@keith thank’s a lot for the advice – the plugin is a bit slower and a little less smooth than the script, but at least it works!

Now its live on bjerreandersen.dk/cv – it’s the beginning of my resume, in fact ??

(I’ll dig into javascript another time – would be great, though, if WP had a more step-by-step like guide in the codex instead of some description, that you’ll almost only understand if you’re that smart that you don’t need to …)

f

@keith Ok – I tried that as well. But it still doen’t work, I’m afraid.

I’m a total newbie in Javascript, so would really appreciate a walktrough – which code to put where? What exactly should go in hide.js, what should be put in the actual WP-page, the script is going to work on (I only need it on one page for now…). The code that is working outside WP is in its entirety:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script>
        <script type="text/javascript">
            $(function () {
                $('#intro').each(function () {
                    $('span.romance-toggle').on('click', function () {
                        var _this = $(this);
                        if (_this.hasClass('clicked')) {
                            $('#romance-' + _this.attr('rel')).hide();
                            _this.toggleClass('clicked');
                        } else {
                            $('#romance-' + _this.attr('rel')).fadeIn(500);
                            _this.toggleClass('clicked');

                        }
                    });
                });

            });
        </script>

I’ve already tried to use that code inside the WP-page itself. But no matter what I tried, it ended up adding some invisible <p>-tags, that screwed up the code. So if it’s supposed to be in the page, and not just called, how do I prevent those p-tags?

@andrew: according to Firebug, there are no actual errors, as far as I can see… But I guess the wrappers could make a difference, if everything else is set correctly. So far, it didn’t do the trick :-l

thank you in advance!

Thanks for the answer Keith!

I’ve copied hide.js (formerly known as hidden) to good-bones’ javascript folder, that has a little longer path than the one you suggested … and I changed that path in the code you gave me as well and added it in the end of functions.php (does this means it will load on every page/post, btw?)

I have also included the stylesheet for the script (which seems to be important for the visual part) to my custom CSS-file instead of loading it seperatly. Which seems to work.

But still something else is not working. I guess I’m confused what exactly needs to be included in hide.js and what can/should/must be let out.

Right now hide.js looks like this

<script type="text/javascript">
            $(function () {
                $('#intro').each(function () {
                    $('span.romance-toggle').on('click', function () {
                        var _this = $(this);
                        if (_this.hasClass('clicked')) {
                            $('#romance-' + _this.attr('rel')).hide();
                            _this.toggleClass('clicked');
                        } else {
                            $('#romance-' + _this.attr('rel')).fadeIn(500);
                            _this.toggleClass('clicked');

                        }
                    });
                });

            });
        </script>

…and on the page (/test4) I’ve only got the styled text itself. Should I make a reference to a bigger java-library at some point or…?

…forgot to mention, I’m using wp 2.9.1