Set style on "kn-back-link"

API & Customization Ask Developers
1

If anyone can figure this out it would be much appreciated. I'm trying to set the style on the "kn-back-link" class but only when the "password reset" screen is in view after clicking the "Forgot?" link. I can't do it with css because it's not really a conditional language and I can't do it with javascript because the div that controls the reset elements does not exists when the scene is rendered.

Any thoughts?

2

Yes I'm sure that it could come in real handy when trying to customize design or function. I appreciate you sending it along.

3

Ah thats cool.. I had never even heard of a mutation listener. What intrigued me about it was the article I read described it as a zero overhead, zero load way of watching the DOM unlike some of the other listening/watching methods. I am going to explore it more when I have time.

4

This worked great. Thank you.

5

thanks Tony, I'll give it a try.

6

Awesome Tony!

7

Here ya go MutationObserver ran across this tonight and thought it might work here and it does it needs cleaned up severly but it gets the job done watching the DOM tree for any changes. If I had more time I would dig into how to clean it up but there are plenty of tutorials on the net about it.


function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* One or more children have been added to and/or removed
           from the tree; see mutation.addedNodes and
           mutation.removedNodes */
        
        break;
      case 'attributes':
        /* An attribute value changed on the element in
           mutation.target; the attribute name is in
           mutation.attributeName and its previous value is in
           mutation.oldValue */
        if($('#knack-reset-pass').length) {
            $('div.kn-view.kn-back-link > a.ang-link').css('color','hotpink');
             observer.disconnect();
           }
        break;
    }
  });
}


var targetNode = document.querySelector("#knack-body");
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omit or set to false to observe only changes to the parent node.
}


var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
8

I've run through all that and I get no errors. Maybe something that will get resolved with the new builder. :) Thanks Brad.

9

Sounds like the scene-render event isn't triggering...

Try running some console.log tracing in scene-render.any and view-render.any events to see if anything happens when the #knack-reset-pass id appears.

If not there might be other ways that start to get more complicated, or there might event be a special event handler for that view that isn't documented the Knack team might know of.

10

Unfortunately not. I'm pretty sure it's because the way that the div is hidden until you click the "Forgot?" link.

11

Did you get it working Dee Jay?

12

Mate - because I get it wrong so often... ;-)

13

There is the guy with the answers lol ! air code lmao I wish I could just write Jquery freestyle..

14

I think you're right - can only be done with Javascript.

  1. Check for existence of #knack-reset-pass inside scene-render.any
  2. Then apply CSS

Some aircode not tested:

$(document).on('knack-scene-render.any', function(event, scene) {
    if($('#knack-reset-pass').length) {
        $('div.kn-view.kn-back-link > a.ang-link').css('color','blue');
    }
});

Keen to hear if you get something working.

15

You'd have to try it to see what I mean. With css you can't target it to that specific area because of how knack displays the forgot password. If it was wrapped in the "kn-password-reset" div then I could do it, but it's only wrapped in the "scene" div which isn't specific enough. Anyway, I'll keep looking for a possible solution with javascript. Thanks for your thoughts.

16

I don't follow just target it with more specificity, on other pages with back links you can target them by the views

17

When I apply the style like that it also applys to the actual scene upon login. My goal is to just style (really just align) the link properly on the forgot password screen based on my needs. This is why I need to apply conditions but unfortunately that's what I'm having a hard time with.

18

Oh okay then similar just different targets

this will target it..

a.ang-link { color:blue !important;}

If you want to limit to that exact forgot backlink for the single page add the scene ID

#kn-scene_XX a.ang-link { color:blue !important;}

example:

#kn-scene_26 a.ang-link { color:blue !important;}

19

Tony,

Thanks for the post, however I'm referring to the "back link" on the "forgot password" screen.

20

The forgot password link can be styled by targeting its ID tag.

#forgot-pass {

font-size:30px !important;

color:blue !important;

}

and for the link anchor styling


a#forgot-pass:active {
color: #ad1820 !important;
}