Jquery and @media in CSS

Question

Hello there!

I have an Angular project, where i'm working with HTML, CSS and Jquery. I have a paragraph set with "display: none", and I want it to appear only when the user click a "button" tag. The thing is, the CSS is inside a @media annotation. And I can't put it inside the Paragraph tag like "style=@media all and...." as the HTML file does not compile with the annotation. It has to be inside a specific CSS document. Thanks to that, I cannot use Jquery to override the display of the Paragraph tag.

This is how it goes:

HTML:

<p id="two">
    The history of ...</p>

CSS:

@media all and (max-width: 580px) {

   p#two
   {
       display: none;
   }

}

Jquery:

$(document).ready(function(){
    $("p#one button").click(function(){
      $("p#two").attr("style", "display: normal")
    });
});

I also tried a Jquery like:

    $("p#one button").click(function(){
      $("p#two").css({"display" : "normal"});
    });

or

$("p#one button").click(function(){
      $("p#two").css({
        display : 'normal'});
    });

But nothing seems to override the "display: none". What can I do to fix this problem?

[Please read this first.](https://stackoverflow.com/a/15012542/1264804) You should not be manipulating the DOM with jQuery in an Angular app. — isherwood, Oct 25 '18 at 20:31
Back on topic, `normal` isn't a valid value for `display`. Try `block`. — isherwood, Oct 25 '18 at 20:34
The logic you are attempting to do should be related to an `ng-click` on the button that changes a state some where in the angular app, which is used to determine if the other element(s) are displayed or not, either with an `ng-show` or `ng-hide` — Taplar, Oct 25 '18 at 20:34
Ok, I'm missing something. What are you associating with 'Angular' if not Angular 1 or Angular 2? — Taplar, Oct 25 '18 at 20:36
There is no Angular 1. There's AngularJS, and there's the entirely revised framework simply called Angular, which started with version 2. `ngShow` and `ngHide` don't exist in Angular. — isherwood, Oct 25 '18 at 20:37
Ok, so quick search looks like it would be something like `(click)="function"`. https://stackoverflow.com/questions/40211730/call-a-function-on-click-event-in-angular-2#40211968 The same concept applies though. This logic should be done with the angular bindings and not jQuery — Taplar, Oct 25 '18 at 20:41
And related to the ngShow/ngHide in Anguar, https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular — Taplar, Oct 25 '18 at 20:42

score 2 · Accepted Answer · answered Oct 25 '18 at 20:41

Personally, I don't like to mix css properties with javascript unless it's really really really necessary.

You can add a class for p#two that overrides the display: none property and toggle that class on on click.

@media all and (max-width: 580px) {
   p#two { display: none; }
   p#two.show { display: initial; } // "normal" is not a valid value for display
}

Then, on your click event handler, you add the class:

document.getElementById('two').classList.add('show')

Note that normal is not a valid option for display and also that both jquery and angular can handle showing element with their own methods like $('#p').show() of the ng-if directive.

score 2 · Answer 2 · answered Oct 25 '18 at 20:53

2

You can use simple way to resolve this problem:

@media all and (max-width: 580px) {

    p.hidden-class {
       display: none;
    }

    p.visible-class {
        display: block;
    }
}

And toggle your class with ngClass.

answered Oct 25 '18 at 20:53

Mandy

21
1

Jquery and @media in CSS

Hello there!

2 Answers2