JavaScript / Jquery to elide part of a figcaption element - CSS-Tricks

This topic is empty.

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

Author

Posts
October 24, 2015 at 9:52 pm #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!

October 24, 2015 at 11:20 pm #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;
```
October 25, 2015 at 12:54 am #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 <script></script>tags.

Is there something I need to put in the <head></head> 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.

October 25, 2015 at 1:42 am #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
October 25, 2015 at 2:43 am #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 </body> 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.

October 25, 2015 at 3:31 am #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

October 25, 2015 at 3:45 am #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;
}
});
```
October 25, 2015 at 4:16 am #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 <head></head>section or into the <footer></footer> section. That’s the closest I can get to the </body> tag. I don’t know if that’s sufficient. What say you?

October 25, 2015 at 4:20 am #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() {
```
October 25, 2015 at 4:30 am #210154

alxfyv
Participant

@paulieD, @Shikkediel:

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

@Shikkediel:

Your script works perfectly injected in the <head></head> section.
Author

Posts

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

The forum ‘JavaScript’ is closed to new topics and replies.