How to apply same custom css to multiple scenes?

Hello more experiences coders…I have a custom css that I am applying to multiple scenes through javascript…how can I revise the following code to apply to multiple scenes rather than just the one?

$(document).on(‘knack-scene-render.scene_1193’, function(event, view, data) {
$(“#kn-scene_1193”, “”).each(function() {
$(this).css({“width”:“80%”, “margin”:“auto”});
})
});

Thanks in advance!

Hi @Leah

I would suggest you use CSS and a span in any description in a view on the scene.

CSS

.kn-scene:has(.scene-width-80) {
     width: 80%;
     margin: auto;
}

In the description on any one view in the scene you wish to target put:

<span class='scene-width-80'></span>

If you still like to use jQuery

$(document).on('knack-scene-render.any', function (event, scene){
       const scenesForWidth = [scene_1193, scene_123, scene_456];

for (const sceneId of scenesForWidth) {
      const $scene = $(`#kn-${sceneId)`);
      if ( $scene.length > 0) {
              $scene.css({'width': '80%', 'margin': 'auto'});
      }
 }
});

Feel free to use your own names for the consts. If you need any further help please ask.

Hope this helps.

Craig

1 Like

Thank you! I’ve tried both methods but they do not want to work. Could you take a peek at this test page?

It does appear that the sceneId on the following line was missing a close bracket so I fixed that but I still can’t get it to work:

const $scene = $(#kn-${sceneId));

Any thoughts? I have applied the jquery to the test page referenced above.

Try this sorry I wrote it on my mobile:

$(`#kn-${sceneId}`)

If that doesn’t work I’ll be more than happy to take a look.

Craig

That’s what I noticed and made that change…it did not work. : (

Hi Leah

I’ll take a look and get back to you.

Craig

Hi Leah
I can see the class scene-width-80 but I can’t see the styles, can you please copy/paste the css you tried.

Can you please copy/paste the JavaScript you tried.

Craig

Hi @Leah

I’m sorry but this is my mistake:

//STUDENT PORTAL, make pages 80% width and center on screen
$(document).on('knack-scene-render.any', function (event, scene){
       const scenesForWidth = ['scene_1193', 'scene_1197', 'scene_1195', 'scene_1262', 'scene_1279']; 
 //scene keys must be strings

for (const sceneId of scenesForWidth) {
      const $scene = $("#kn-${sceneId}");
      if ( $scene.length > 0) {
              $scene.css({"width": "80%", "margin": "auto"});
      }
 }
});

The scene keys must be strings. I can only apologise.
Craig