Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1306284

    There seems to be a fundamental issue with the Masonry Title settings being preconfigured at H3.
    ADA (Americans with Disabilities Act) Section 508 requires that “H” titles be in descending numeric order. For example, h3 cannot be viewable before an item with h2.
    So, if I want to place my Masonry content above a section that has an h2 header, I am in violation of the ADA.
    My question is, how can I replace the “h3” captions tile in the Masonry app?

    Thanks!

    #1306525

    Hey laptophobo,
    Thank you for your patience and explaining the situation, it sounds like you may need to change the tags differently on different pages based on the page structure, so there would not be one setting that would work for you across your whole site, I would recommend adding the script to a code block on each page that you will use it on, and changing the tag to suit for that page.

    <script>
    (function($) {
      $(document).ready(function(){
        function replaceElementTag(targetSelector, newTagString) {
          $(targetSelector).each(function(){
            var newElem = $(newTagString, {html: $(this).html()});
            $.each(this.attributes, function() {
              newElem.attr(this.name, this.value);
            });
            $(this).replaceWith(newElem);
          });
        }
        replaceElementTag('h3.av-masonry-entry-title', '<h2></h2>');
      });
    }(jQuery)); 
    </script>

    Please note that the script is wrapped with <script> tags, this is so it will work in a code block element.
    Please give this a try and if you have any issues getting it to work please link to the page so we can see.

    Best regards,
    Mike

    #1306551

    Hi Mike,
    Thanks for the script. However, I was not able to get it to work. What I did was add a Code Block just above the Masonry Gallary. But the captions remain at <h3>.
    Please see “private” for link to the page.

    #1306564

    Hi,
    Thank you for the feedback and the link to your site, I see that you are getting this error in your console: Uncaught ReferenceError: jQuery is not defined I believe this points to you having the Load jQuery in your footer setting enabled in your theme settings, so the script runs before the jQuery library is loaded.
    To correct this you could disable the setting so the JQuery library is loaded in the head, but I assume you would prefer to not allow this so try this script instead, it will try to wait until after the DOM is loaded before running the script:

    
    <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($) {
      $(document).ready(function(){
        function replaceElementTag(targetSelector, newTagString) {
          $(targetSelector).each(function(){
            var newElem = $(newTagString, {html: $(this).html()});
            $.each(this.attributes, function() {
              newElem.attr(this.name, this.value);
            });
            $(this).replaceWith(newElem);
          });
        }
        replaceElementTag('h3.av-masonry-entry-title', '<h2></h2>');
      });
    }(jQuery)); 
     });
    </script>
    

    Best regards,
    Mike

    #1306569

    This will work on masonry and masonry galleries aswell.
    both masonry default h3 got the class : av-masonry-entry-title

    By the way the code-block element is not necessary to have it on top of the page.

    if you got one masonry on top and one on the bottom you can differ between them on having custom class f.e. on the masonry element itself ( in my test page the masonry on top got custom class: is-h2
    and the script in that case is:
    https://webers-testseite.de/abcdef/

    <script>
    (function($) {
      $(document).ready(function(){
        function replaceElementTag(targetSelector, newTagString) {
          $(targetSelector).each(function(){
            var newElem = $(newTagString, {html: $(this).html()});
            $.each(this.attributes, function() {
              newElem.attr(this.name, this.value);
            });
            $(this).replaceWith(newElem);
          });
        }
        replaceElementTag('.is-h2 h3.av-masonry-entry-title', '<h2></h2>');
      });
    }(jQuery)); 
    </script>
    • This reply was modified 3 years, 6 months ago by Guenni007.
    #1306629

    Thank you Mike (and Guenni),

    I tried your solution first, Guenni, but it did not change my problem. However, Mike’s alternative solution did. (I replaced h3 with P).

    I am curious why Enfold would choose to use a Title element in something that is generally not a title. It’s a caption. Perhaps this will be addressed in the next Enfold iteration.

    Anyway, thank you very much for the support.

    #1306698

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘change Masonry title from h3 to’ is closed to new replies.