Synchronized style updates with multiple shortcodes on one page

Resolved pepperfoggyhorn
(@pepperfoggyhorn)

2 years ago

Hi,

Thanks for your great plugin.

Is there a way to get the styling of the icon to update synchronously when you have the shortcode inserted more than once on a given page?

On the example URL above, I have the favourites shortcode in three locations. If I save the content by clicking on the “save” heart, the other save hearts stay outlined instead of changing to solid.

Is there a way to get all three hearts to update to be solid, no matter which “save” heart someone clicks?

Thanks.

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

Takashi Matsuyama

(@takashimatsuyama)

2 years ago

Hi @pepperfoggyhorn,

Thank you for your rating and your question.
Sorry for the delay in answering.

Unfortunately, This plugin can not currently sync them.

I think this topic could be accomplished with another approach, such as using JavaScript to clone elements outside of this plugin. But that should have to be done after Ajax.

Thanks.

Thread Starter

pepperfoggyhorn

(@pepperfoggyhorn)

1 year, 10 months ago

Thanks, I used a very basic javascript function to sync the content and the classes.

<script>
window.onclick = e => {
	clickedElement = e.target;
	var elementClass = clickedElement.className;
  if( elementClass.includes( "ccc-favorite-post-toggle-button" ) ){
    if( elementClass == "ccc-favorite-post-toggle-button" ){
      newContent = '\\f004'; // filled
      newClass = 'ccc-favorite-post-toggle-button save';
    }
    else if( elementClass == "ccc-favorite-post-toggle-button save" ){
      newContent = '\\f08a'; // hollow
      newClass = 'ccc-favorite-post-toggle-button';    
    }    
    var favHeartElements = document.getElementsByClassName("ccc-favorite-post-toggle-button");  

    for ( i = 0; i < favHeartElements.length; i++ ){
      element = favHeartElements[i];
      if( element != clickedElement ){
        element.className = newClass;
        var styleElem = document.head.appendChild(document.createElement("style"));
        styleElem.innerHTML = ".skhc-save-content .ccc-favorite-post-toggle a:before{content: '" + newContent + "';}";
      }
    }    
  }
}
</script>

It may not be the most beautiful or efficient script, but it gets the job done.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Synchronized style updates with multiple shortcodes on one page’ is closed to new replies.

Tags