Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript JavaScript / Jquery to elide part of a figcaption element

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #210140
    alxfyv
    Participant

    I have this site on Squarespace. On a /test page I have a block quote. In Squarespace, the block quote is followed by the author’s name preceded by an em dash. This is in a <figcaption> element.

    I want to elide that em dash. It will have to be done with some JavaScript or JQuery. Can anyone provide the code?

    Mille grazie!

    #210142
    Shikkediel
    Participant

    Fiddled around with it a bit, this should work when it is the first occurrence of the class source :

    var item = document.querySelectorAll('.source'),
    text = item[0].innerHTML.substring(1);
    
    item[0].innerHTML = text;
    
    #210144
    alxfyv
    Participant

    Thank you for taking the time to consider my problem and work on it. Much appreciated.

    Unfortunately, it doesn’t seem to work. I copied and pasted the code into the header for the page on which the block quote appears. I wrapped it in &lt;script&gt;&lt;/script&gt;tags.

    Is there something I need to put in the &lt;head&gt;&lt;/head&gt; section of the site to “load” JavaScript into the site or make a “call” to JavaScript. (Please pardon me if I’m not using the correct terminology; I’m completely unfamiliar with JavaScript.)

    Is there a single “function” of code that would work on all instances of a block quote (the class .source) site wide irrespective of the number of instances of the class previously?

    Again, thanks so much for your time.

    #210145
    Paulie_D
    Member

    Actually, you don’t need JS to do this (sort of).

    figcaption::first-letter {
      font-size:0;
    }
    

    http://codepen.io/Paulie-D/pen/ZbxpLQ

    #210147
    Shikkediel
    Participant

    Neat but it doesn’t seem to work with Mozilla.

    Just for good order – the script would need to be executed when the document has been read. Right before the &lt;/body&gt; tag at the bottom is probably easiest. In the head, it would need an event listener for when the DOM is ready to be manipulated.

    Depending on where the pen’s cross browser functionality goes, I could write a bit of extra code to create a loop. The above seems a much nicer solution though.

    #210148
    Paulie_D
    Member

    ::first-letter is definitely supported by FF.

    It may be that they haven’t caught up with the CSS that can be applied to it or they are using the single colon syntax.

    https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter

    #210149
    Shikkediel
    Participant

    Looks like Firefox is taking “letter” too literally and not recognising the dash as such…

    This should do the trick as well in any case :

    document.addEventListener('DOMContentLoaded', function() {
    
    var quotes = document.querySelectorAll('.source');
    
    for (var i in quotes) {
    var text = quotes[i].innerHTML.substring(1);
    quotes[i].innerHTML = text;
    }
    });
    
    #210151
    alxfyv
    Participant

    @PaulieD:

    Way cool! So obvious once explained. I can live with Firefox displaying the em dash.

    @Shikkediel:

    In Squarespace I can inject code into the &lt;head&gt;&lt;/head&gt;section or into the &lt;footer&gt;&lt;/footer&gt; section. That’s the closest I can get to the &lt;/body&gt; tag. I don’t know if that’s sufficient. What say you?

    #210152
    Shikkediel
    Participant

    Either should be fine when the event listener is included, without it the footer would be a better place. Just in case that one doesn’t trigger in time, try this one :

    window.addEventListener('load', function() {
    
    #210154
    alxfyv
    Participant

    @paulieD, @Shikkediel:

    Thanks so much for your time and answers. Much appreciated.


    @Shikkediel
    :

    Your script works perfectly injected in the &lt;head&gt;&lt;/head&gt; section.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.