Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #1194759

    (German below)
    Hi Kriesi team,
    I would like to open several hidden color sections on one page using several buttons (one button per section).
    I assigned a unique class to the button and assigned a unique ID to the color section to be opened.

    Then I used this code from Yigit (https://kriesi.at/support/topic/hidding-color-section/):

    function add_custom_cs () {
    ?>
    <script>
    jQuery (window) .load (function () {
    jQuery (“# ​​your-unique-color-section-id”). hide ();
    jQuery (“.your-custom-button-class”) .click (function () {
    jQuery (“# ​​your-unique-color-section-id”) .toggle ();
    });
    });
    </script>
    <? php
    }
    add_action (‘wp_footer’, ‘add_custom_cs’);

    The code works great as long as I have defined one button and a section and the information is used accordingly in the code.
    The moment I adjust the code for another section, I get a critical error.
    Can you help me?
    Best regards
    Grobi

    _____________________________
    Hi Kriesi-Team,
    ich möchte mehrere versteckte Color-Sections auf einer Seite über entsprechend mehrere Buttons öffnen (ein Button pro Section).
    Ich habe dazu dem Button eine einzigartige Klasse zugeteilt und der zu öffnenden Color-Section eine einzigartige ID zugewiesen.

    Danach habe ich diesen Code von Yigit (https://kriesi.at/support/topic/hidding-color-section/) verwendet:

    function add_custom_cs(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(“#your-unique-color-section-id”).hide();
    jQuery( “.your-custom-button-class” ).click(function() {
    jQuery( “#your-unique-color-section-id” ).toggle();
    });
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_cs’);

    Der Code funktioniert super, solange ich einen Button und eine Section definiert habe und die Angaben entsprechend im Code eingesetzt sind.
    In dem Moment, wo ich den Code für eine weitere Section anpasse, erhalte ich einen kritischen Fehler.
    Könnt ihr mir helfen?

    Liebe Grüße
    Grobi

    #1198013

    Hey Grobi,

    You need to use different function names or combine the code in one function.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1198014

    Hi Victoria,
    can you tell me how?
    I tried to copy the code and filled it up with the next classes and ids, but this does not work.

    I hope you can help me.
    Best regards
    Grobi

    #1198347

    …unfortunately I am not able to edit php-code…. :-(

    #1198596

    Hi Grobi,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1198888

    Dear Victoria,
    thank you for taking care.

    Unfortunately, the page in question is only offline on my computer, but I have now transferred the content and code for the functions.php to an online site so that I can show it to you.
    You find the address and login credentials below.

    My problem remains the same here: I would have to change Ygits PHP code so that I can hide and open several color sections – even on different pages – which I unfortunately cannot do due to a lack of knowledge of PHP. The first button (with its own ID) opens the desired section perfectly, the remaining sections to be closed remain open – in the absence of code – of course.

    Best regards – and please stay healthy.
    Grobi

    #1199399

    Hi Grobi,

    Which other section do you need to toggle and what is the button?

    Best regards,
    Victoria

    #1199439
    This reply has been marked as private.
    #1200635

    Hi Grobi,

    Please try using this code:

    
    function add_custom_cs(){
    ?>
    	<script>
    	jQuery(window).load(function(){
    		jQuery("#hide_company").hide();
    		jQuery("#hide_technology").hide();
    		jQuery("#hide_product").hide();
    		jQuery("#hide_sustainability").hide();
    		jQuery( ".companyschalter" ).click(function() {
    			jQuery( "#hide_company" ).toggle();
    		});
    		jQuery( ".technologyschalter" ).click(function() {
    			jQuery( "#hide_technology" ).toggle();
    		});
    		jQuery( ".productschalter" ).click(function() {
    			jQuery( "#hide_product"  ).toggle();
    		});
    		jQuery( ".sustainabilityschalter" ).click(function() {
    			jQuery( "#hide_sustainability" ).toggle();
    		});
    	});
    	</script>
    <?php
    }
    add_action('wp_footer', 'add_custom_cs');
    

    Best regards,
    Victoria

    #1200783

    Hi Victoria,
    thanks for the code.
    Unfortunately it does not work, I get this error-message:
    “Parse error: syntax error, unexpected ‘?’ in /homepages/10/d85211480/htdocs/subd_foo/wp-content/themes/enfold/functions.php on line 47”

    Watch this screenshot, please: [img]https://i.imgur.com/yusyZYP.png?1[/img]

    To make my website work again, I comment out the code temporarily. I hope that’s OK for you.
    Best regards
    Grobi

    #1200784
    This reply has been marked as private.
    #1201359

    Hi Grobi,

    https://share.getcloudapp.com/eDuxN1L2Please pay attention and edit the signs. You have there “;& l t” and it should be > ant the other one. Please check the code and edit it there.

    Best regards,
    Victoria

    #1201522

    Hi Victoria.
    Thank you very much – now it works.
    I have no idea how that happened. I’m pretty sure that I haven’t saved the script anywhere. But, that seems to be a mistake on my part …

    Victoria, I have one more question to the behaviour of the opened section:
    if you have opened the section, the page scrolls to the head of the section in which the button is located – but unfortunately not to the new content that has just opened.
    Can you adjust that?

    Best regards
    Grobi

    #1201556

    An addandum:
    The effect I have described relates to the page I am working on offline. On the side accessible to you, Victoria, the effect is slightly different. Here the page remains in place after clicking on the button. But here, too, it would be great if the page would scroll to the coolor section that was just opened.

    Best regards
    Grobi

    #1203557

    Hey Grobi!

    You might want to look for a plugin that will allow you to have the functionality that you want. Here are some of them
    https://www.formget.com/wordpress-show-hide-content-plugins/

    Cheers!
    Victoria

    #1204717

    Hi,
    I took a look at your page and see that the script is working and the issue now is that the section is not scrolling to the top when it becomes visible.
    So to test on the “tech” section I added this function to your script:

    (function ($) { 
      $(".technologyschalter").click(function(e) {
      	e.preventDefault();
      	var elmnt = document.getElementById("hide_technology");
      	setTimeout(function () {
     elmnt.scrollIntoView(true);
      	}, 1500);
       });
    })(jQuery);

    clicking on the button that shows the “hide_technology” section will delay 1.5 seconds (1500ms) and then scroll the section to the top. The delay seems necessary and if it is too short it won’t work, so you can try changing the “1500” to suit.
    Also, note that you will need to clear your browser cache to see this work.
    If you are satisfied with this you can model it for your other buttons.

    Best regards,
    Mike

    #1204740

    Hi Mike,
    first of all thank you very much for your help.

    The changes you have made are almost that want I wanted to get. The delay is not my problem at all, but the movement of the page.
    After clicking the button – and delay – the site is “jumping” to the right position, not srolling, what is the normaly style. Thats a pity for me a little bit.
    Is there a chance to adjust this?

    My seccond question is: how do i have to edit the code, when I want to include more “buttons” into the script. Can you give me an example for that?

    Best regards and stay healthy.
    Grobi

    #1205049

    Hi,
    To smooth scroll into place we will change elmnt.scrollIntoView(true); to elmnt.scrollIntoView({ behavior: 'smooth', block: 'start' });
    To add more buttons to the script, follow this format and adjust the class of the button and the ID of the hidden section, link this:

    (function ($) { 
      $(".sustainabilityschalter").click(function(e) {
      	e.preventDefault();
      	var elmnt = document.getElementById("hide_sustainability");
      	setTimeout(function () {
     elmnt.scrollIntoView({ behavior: 'smooth', block: 'start' });
      	}, 1500);
       });
    $(".productschalter").click(function(e) {
      	e.preventDefault();
      	var elmnt = document.getElementById("hide_product");
      	setTimeout(function () {
     elmnt.scrollIntoView({ behavior: 'smooth', block: 'start' });
      	}, 1500);
       });
    $(".class-of-button").click(function(e) {
      	e.preventDefault();
      	var elmnt = document.getElementById("ID-of-hidden-section");
      	setTimeout(function () {
     elmnt.scrollIntoView({ behavior: 'smooth', block: 'start' });
      	}, 1500);
       });
    })(jQuery);

    Best regards,
    Mike

    #1205842

    Hi Mike,
    sorry for my late reply.
    Thank you very much for editing the script. I replaced the old code with the new “smooth”-script you send, so I got this and uploaded functions.php:

    function add_custom_cs(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(“#hide_company”).hide();
    jQuery(“#hide_technology”).hide();
    jQuery(“#hide_product”).hide();
    jQuery(“#hide_sustainability”).hide();
    jQuery( “.companyschalter” ).click(function() {
    jQuery( “#hide_company” ).scrollTop(100);
    jQuery( “#hide_company” ).toggle();

    });
    jQuery( “.technologyschalter” ).click(function() {
    jQuery( “#hide_technology” ).toggle();
    });
    jQuery( “.productschalter” ).click(function() {
    jQuery( “#hide_product” ).toggle();
    });
    jQuery( “.sustainabilityschalter” ).click(function() {
    jQuery( “#hide_sustainability” ).toggle();
    });
    });

    (function ($) {
    $(“.sustainabilityschalter”).click(function(e) {
    e.preventDefault();
    var elmnt = document.getElementById(“hide_sustainability”);
    setTimeout(function () {
    elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
    }, 1500);
    });
    $(“.productschalter”).click(function(e) {
    e.preventDefault();
    var elmnt = document.getElementById(“hide_product”);
    setTimeout(function () {
    elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
    }, 1500);
    });
    $(“.class-of-button”).click(function(e) {
    e.preventDefault();
    var elmnt = document.getElementById(“ID-of-hidden-section”);
    setTimeout(function () {
    elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
    }, 1500);
    });
    })(jQuery);

    Unfortunately i got this error-message:
    Parse error: syntax error, unexpected end of file in /homepages/10/d85211480/htdocs/subd_foo/wp-content/themes/enfold/functions.php on line 855

    Best regards
    Grobi

    #1207057

    Hi,
    Thank you for the feedback, it looks like you were missing this part of the code at the end:

    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_cs');

    I added it for you. I also added the first couple of sections to the code using the example above.
    Now it seems to work, please clear your browser cache and check.

    Best regards,
    Mike

    #1210410

    Oh, one week ago – big sorry for my late reply!

    Hi Mike!
    Thank you very much, of corse this part of the code was missing. Since I can’t write php-code I was not able to recognize that.

    One last question to this issue:
    after clicking the button to open the section, my site scrolls not exactly to the beginning of the section but about 100 or 110 pixels too far.
    This means, that it is not possible to read a heading or the first lines of a text in the just opened section.

    Unfortunately this effect is shown on the site I build off-line – not on the test-site you can see…
    So, is there a possibility for me – for instance by entering different pixel values ​​- to adjust the gap between the beginning of the section and the position where the scrolling ends?
    That would be perfect!!!

    Best regards – and stay healthy!!
    Grobi

    #1210716

    Hi,
    Sorry, I tried a few ways to add another offset to this but it didn’t work as expected. So if the online version is working correctly and your localhost version is not, perhaps there is a conflict or an error in the script. Try disabling your plugins and ensure that your Enfold Theme Options > Performance > Load jQuery in your footer is disabled.
    Try reading about the browser “console panel” and see if your localhost gives any errors when you click the buttons.

    Best regards,
    Mike

    #1214381

    Dear Mike,
    thank you very much for your efforts.
    I apologize for my late reply but due to a hospital stay I could not answer earlier.

    I will check the ideas you suggest, thank you very much.
    Again thank you very much for your help.

    Best regards
    Grobi

    #1215198

    Hi,
    Hope you are feeling better, we will leave this open until we hear back from you.

    Best regards,
    Mike

Viewing 24 posts - 1 through 24 (of 24 total)

You must be logged in to reply to this topic.