Remove JavaScript styles, allowing CSS to take control

Question

Preamble: Possible duplicate to my question can be found found here, although for me, this question was not sufficiently answered. A work-around is given, but a definitive answer to the question of whether or not it is possible, is not provided.

The question: On my website, when a user clicks a button (or area of screen), I want that area to "flash" a couple of times before returning to its original state. (I think this gives the user a reassuring feel of something having been activated, as in some circumstances, they may have short delay before the feedback is given.)

Anyway, I've managed to get this working using a bit of JavaScript and jQuery, and you can see the results here >>.

As you may notice, the problem is that after the flashing is done, the element doesn't return to its original state. Rather, it keeps its last "flash" state, and overrides the underlying CSS styling which originally styles the object when the page loads.

I style the element with the following jQuery:

$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);

And I 'attempt' to un-style it with:

$jq_obj.removeAttr('background-color').removeAttr('color');

I've also tried:;

$jq_obj.css('background-color','').css('color','');

Despite the documentation saying that this should remove styling, it doesn't.

Is there a solution, or do I have to revert to the work-around solution referred to in my preamble? The nice thing about the JavaScript option is that it becomes a lot more versatile when you want to play around with the animations a bit.

Thanks,

===EDIT 2014-06-28===

As a demonstration of why the class solution is untidy, please see this fiddle: http://jsfiddle.net/Y9L4x/ (inspired by @BiffMaGriff 's proposed solutin here: http://jsfiddle.net/rte3G/)

The problem is that the elements being flashed could already be CSS-ed up to the hilt with multiple classes.

I recognise that I can remove styling classes first, before applying the "flash" classes, complicate the JavaScript and/or the CSS rules, etc. etc.

But the whole point of looking for a non-class-solution is that this option becomes extremely verbose in a real world situation, and you tend to have to program each flashing object individually, rather than the tidy one-JavaScript-function-fits-all that I'm searching for.

generally easier to toggle a class, let rule for class handle various style properties — charlietfl
– charlietfl, Commented May 25, 2014 at 19:15

Biff MaGriff · Accepted Answer · 2014-05-25 19:18:15Z

2

You are going to want to do your styles as classes.

.activated{
    background-color: red; //or whatever else
}

and then with your jquery you can just toggle them a few times with the delays I assume you already have in your javascript.

$jq_obj.toggleClass('activated');

answered May 25, 2014 at 19:18

Biff MaGriff

8,2619 gold badges65 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

cartbeforehorse Over a year ago

Well, yes. That's the solution that I provided in my preamble. But that is specifically the answer I asked you NOT to provide. What I want to know is a definitive Yes/No on the question of whether it can be done another way?

cartbeforehorse Over a year ago

On a side-note though, maybe you could suggest the best way to insert the "delays" you mention. The setTimeout functionality I'm implementing right now is messy, given that it's asynchronous. What we really need is a synchronous delay() function.

Vincent van der Weele Over a year ago

@cartbeforehouse is there a specific reason you don't want this solution other than curiosity if the other is possible? If you have a powerful styling mechanism at hand, why would you prefer to mix in styling information in your javascript?

Biff MaGriff Over a year ago

@cartbeforehorse If you want to preserve the existing style without classes. Why don't you just save the existing style before you do your flashing. var s = $jq_obj.attr('style'); and then set it back after you are done. $jq_obj.attr('style', s); as for delay you could use the built in jquery .delay() but it may not work with your methods. api.jquery.com/delay

cartbeforehorse Over a year ago

@Heuster I've noticed that if you do this with classes, the "flashing" functionality is not so slick. A flash in JavaScript is much more snappy. A flash with switching classes puts you in the hands of the browser as to how quickly it updates the styling. Since the flash only lasts about a hlaf-second, even a small delay is very noticeable.

|

MasqueradeCircus · Accepted Answer · 2014-05-25 19:12:38Z

0

Try this:

$jq_obj.attr('style','');

answered May 25, 2014 at 19:12

MasqueradeCircus

8546 silver badges8 bronze badges

Comments

cartbeforehorse · Accepted Answer · 2014-06-28 14:43:01Z

The direct answer to the question appears to be a simple "No".

You cannot tell JavaScript to style an object, and then at a later stage, ask JavaScript to give styling responsibility back to CSS.

However, another messy work-around is to re-draw the HTML inside the element which contains your flashing-object.

$jq_flashing_obj.parent().html(original_html_);

This has the slight overhead of having to wrap your flashing object inside a div or span element, to ensure that the parent element contains nothing but your flashing element.

<div class="multiple-children">
    <a href="#">link 1</a>
    <span class="wrapper"><a href="#">Click me to watch me flash</a></span>
    <a href="#">link 3</a>
</div>

You then, of course, have to capture the outerHTML of your flashing-object before the flashing starts.

original_html_ = $jq_obj[0].outerHTML;

The resulting JavaScript is a little bit verbose, as you see here: http://jsfiddle.net/CgsLs/ . However, it does have the following benefits:

Reusable on all clickable elements regardles of CSS :hover and other messy styling
Can optionally define the flash-color of the element inside the JS
Independent of CSS, meaning that the code is in one file, and therefore more maintainable

There are down-sides too

Requires the use of JQuery on() function (as opposed to simple click event handler)

Anyhoo... it may not be a solution for everyone. In some cases (maybe even most cases) the class option might be simpler.

But this is one other possible method of tackling this inherent shortcoming in JavaScript/Browser technology.

Collectives™ on Stack Overflow

Remove JavaScript styles, allowing CSS to take control

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related