Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1430780

    Hello dear Kriesi team,

    First of all, your Enfold theme is truly fantastic.

    Currently, I have a minor issue. On my source page, there is an SVG vector graphic introducing the team. When a word is clicked, a small window opens (also a graphic).
    I’m referring to this section: https://prnt.sc/SZi5lGli4nhv

    Source page: https://www.hausderwertarbeit.de/agentur

    Target page: https://wp.hausderwertarbeit.de/agentur

    Is it possible to achieve this with the Enfold theme in WP? Or, in other words, does anyone have an idea on how to implement this in WP?

    Thank you in advance to everyone…

    Warm regards,
    Patrick

    #1431274

    Hi Patrick,

    There’s nothing like that in the theme by default unfortunately, but the closest element would likely be the Image with hotspots element, if you would like to try that out.

    Best regards,
    Rikard

    #1431403

    Hey Rikard.

    Great Idea. Will give it a try.

    Patrick

    #1431450

    Hi,

    Alright! Let us know if you need more assistance.

    Best regards,
    Ismael

    #1434095

    Hey Ismael,

    is it possible to change the shape of that hotspots?
    From circle to a box 100px, 50px?

    Patrick

    #1434145

    but on your target page you did not use the svg. there is only a png.
    Try to place your svg code inside a codeblock element – give the codeblock element a custom class: wordcloud.
    Then try to transfer those scripts to the enfold theme

    #1434164

    Hey Guenni,

    I could simulate the image map with the hotspots elements. I played around with it a bit yesterday and was just wondering how I could make a rectangle from the circles of the hotspots, which I could then “push” to the right place in my png.

    #1434165

    as mentioned above : codeblock with your svg code inside and custom class: wordcloud

    codeblock is important – because you need that svg as inline-svg – not as img

    this is the function i only transfered to child-theme functions.php:
    (in my case only for that example page (page id: 44324))

    function wordcloud_trigger_images() { 
    if(is_page(44324)){
    ?>
    <script type="text/javascript">
      var wordcloud = document.getElementsByClassName('wordcloud')[0];
    
      if (wordcloud) {
        var triggerword = document.querySelectorAll(".wordcloud g[id^='Trigger_']");
        var wordgroups = document.querySelectorAll(".wordcloud g[id^='Box_']");
        Array.from(triggerword).forEach(function (t) {
          t.addEventListener('click', function (e) {
            var triggerid = this.id;
            var triggertargetid = triggerid.replace('Trigger', 'Box');
            Array.from(wordgroups).forEach(function (w) {
              w.classList.remove('is-visible');
            });
            document.getElementById(triggertargetid).classList.add('is-visible');
          });
        });
      } 
    </script>
    <?php 
    }
    }
    add_action('wp_footer', 'wordcloud_trigger_images');

    your svg code : https://pastebin.com/Sw5Nyr3m

    the quick css:

    .wordcloud {
      margin: 2rem auto;
    }
    
    .wordcloud svg {
      width: 100%;
      height: auto;
    }
    
    .wordcloud svg g[id^=Trigger_] {
      cursor: pointer;
      display: block;
    }
    
    .wordcloud svg g[id^=Box_] {
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s;
    }
    
    .wordcloud svg g[id^=Box_].is-visible {
      opacity: 1;
    }
    
    .wordcloud path {
      pointer-events: none !important;
    }

    see: https://webers-testseite.de/wertarbeit/

    PS: one little error is on your svg code on “Durchblicker” it is the only trigger without a rect inside to have a clickable area – so you had to aim exactly the “letters” if the mouse is over a space – there is no pointer. – on my svg code on pastebin i added that missing rect.

    #1434193

    There is an error-message at pastebin:
    https://prnt.sc/dYdnWribzziU

    #1434195

    Wow..Guenni007!

    That is really great. Thank you so much for that great work. It works really fine…. And also for bug fixing…

    If it’s not too complicated, could you tell me how I can close the small boxes again as soon as the user has moved his mouse away from the open box?

    Best regards,

    Patrick

    #1434198

    i just transfered your original code – and there is no such option.

    i will look inside script – maybe we can add an option to remove that class: is-visible on scroll or on click outside
    But i guess it would be best if there is a defined scroll distance to get rid of that class.

    But: you must have made a mistake – because look to your page in responsive view – and to mine example page.
    my svg shrinks with all its content – on your page all boxes opens at once.

    did you insert the css code to quick css ?

    Now you can see the new code on that example page: https://webers-testseite.de/wertarbeit/

    it is looking if that box is in viewport – if not the box will not be visible – ( open a box and see what happens if you scroll that box )

    #1434259

    Good Morning,

    Yes, I have already seen that my version contains an error. The interactive SVG had already worked as desired, but I had wanted to change something and then suddenly all the info boxes were open. It was just too late to correct my mistake, that’s why my version still looks so “wrong”.
    I’ll fix it in the course of the week.

    Closing boxes:
    Maybe it’s enough if the mouse pointer leaves the respective retancle, which makes the box invisible again?

    But I don’t want to steal your time either… you have already helped me so much (and even for free), for which I am very grateful.

    And in general:
    The community here at Kriesi.at is really great.

    #1434260

    How would it be if the info field that appears on click disappears again after a certain time?
    see example page.

    #1434292

    That would be absolutely enough

    #1434294

    the code is on that example page ( ps: on hovering the code there is a copy button on top right)

    and by the way – the css is inside a media query greater than 1600px – it has to be set globaly

    #1434435

    Hi,
    Thank you Guenni007 for your generous help and your example page, very cool. patrick_gilles it sounds like Guenni007 was able to help and there has been no comments for the last three days, so I’m wondering if we shall close this thread?
    Guenni007 did you have anything else to add?

    Best regards,
    Mike

    #1434440

    no – and on his target-page all works now as expeted – so i think it is solved.

    #1434452

    Hi,
    Thanks Guenni007, we will leave this open to hear back from patrick_gilles also.

    Best regards,
    Mike

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.