Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I copy the id from a div to a CSS id?

I have the following in my Sightly for an AEM component.Using jQuery, how can I copy the id that is generated for the div, into the three CSS styles? There will be several of these cards on the page, so this will need to iterate through each card.

<div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}"
                  role="region" tabindex="-1">
                  <sly data-sly-test.isImageTheme="${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
                      <style data-sly-test="${isImageTheme}">
                          @media (min-width:1025px) {
                            #id-placeholder {
                              background-image: url(${card.imageLifestyle @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (min-width:768px) and (max-width:1024px) {
                            #id-placeholder {
                              background-image: url(${card.imageLifestyleTablet @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (max-width:767px) {
                            #id-placeholder {
                              background-image: url(${card.imageLifestyleMobile @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                      </style>
                  </sly>

Here’s the latest jQuery I tried, but nothing seems to be able to set the id in the CSS.

    $(".card").each(function() {
        var id = $(this).attr('id'); 
        var style = $(this).find('style').html(); 
        style = style.replace(/#id-placeholder/g, '#' + id); 
        $(this).find('style').html(style); 
    });
    ````
Tags:

2

Answers


  1. 0

    Changing the CSS to target an Id directly in your HTML isn’t the best Idea.

    Instead, you could combine the power of css variables and the style attribute to define an image for each size.

    You can, then, access those variables in your CSS and apply the styles that are shared between all your cards.

    A css variable can be used to modify the style at run time, and can be set directly on an element. You can identify css variable since they start with --.

    Note that I’m not familiar with aem or sightly, so the following example are used as a demonstration only.

    First, we will add a class that will be used to apply the style to all card. Here, i’m going to use my-responsive-card.

    <div id="${card.id}" 
     class="card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
     role="region" 
     tabindex="-1">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-size: cover;
  background-position: bottom right;
}
</style>

    Then, we can use the style attribute to define 3 css variables, one for each image size. Let’s use --image-desktop, --image-tablet and --image-mobile.

    Those variable can be defined like any other css property:

    <div id="${card.id}" 
  class="card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
  role="region" 
  tabindex="-1" 
  style="--image-desktop: ${card.imageLifestyle @ context='attribute'}; --image-tablet: ${card.imageLifestyleTablet @ context='attribute'}; --image-mobile: ${card.imageLifestyleMobile @ context='attribute'}">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-size: cover;
  background-position: bottom right;
}
</style>

    Now, once each card has their own css variables, we can access them in the stylesheet, where we can use the media query check, just like you did previously.

    To access the css variable, you need to use the var() css function.

    <div id="${card.id}" 
  class="card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
  role="region" 
  tabindex="-1" 
  style="--image-desktop: ${card.imageLifestyle @ context='attribute'}; --image-tablet: ${card.imageLifestyleTablet @ context='attribute'}; --image-mobile: ${card.imageLifestyleMobile @ context='attribute'}">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-image: var(--image-desktop); 
  background-size: cover;
  background-position: bottom right;
} 

@media (min-width:768px) and (max-width:1024px) {
  .my-responsive-card {
    background-image: var(--image-tablet); 
  }
}
                         
@media (max-width:767px) {
  .my-responsive-card {
    background-image: var(--image-mobile); 
  }
}

</style>

    Note that your first mediaquery condition is not required, since it’s the default value.

    Login or Signup to reply.
  2. 0

    You can use Sightly/HTL variables to render the ids too:

    <div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}"
                  role="region" tabindex="-1">
                  <sly data-sly-test.isImageTheme="${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
                      <style data-sly-test="${isImageTheme}">
                          @media (min-width:1025px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyle @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (min-width:768px) and (max-width:1024px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyleTablet @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (max-width:767px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyleMobile @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                      </style>
                  </sly>

    But, to me, this is really ugly. I would instead store the background images as data attributes on the card and use attr in the CSS to set the background images, then the CSS can be kept generic and defined once for all cards:

    <style data-sly-test="${isImageTheme}">
.card .theme-light-bg-img, .card .theme-dark-bg-img {
    background-size: cover;
    background-position: bottom right;
}
@media (min-width:1025px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImage'));

    }
}
@media (min-width:768px) and (max-width:1024px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImageTablet'));

    }
}
@media (max-width:767px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImageMobile'));

    }
}
</style>

    and the HTML would look like:

    <div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}" role="region" tabindex="-1"
     data-backgroundImage="${card.imageLifestyle @ context='attribute'}"
     data-backgroundImageTablet="${card.imageLifestyleTablet @ context='attribute'}"
     data-backgroundImageMobile="${card.imageLifestyleMobile @ context='attribute'}">
...
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search