Affect a CSS element in javascript

Question

Im working on a project and I just got to a place where I have to remove a CSS element by using JavaScript.

I have pasted what I have done so far here: jsfiddle.net

After running the code you will notice a basic registering steps (left side) and a registering methods using social media (right side). And between those two elements, there is an element "OR" with a yellow background.

On the left side when I decided to register as designer, new fiels appear and the social media disappear. The main problem which is bringing me here is that, I am unable to increase the margin-left of the block of basic formula located at the left and also unable to remove the "OR" when a user decides to register as "designer", even if I use

$(".form-register-with-email:after").hide();

Thanks for helping me. Sorry Im not a native english speaker, Im trying my best.

See http://stackoverflow.com/questions/27254674/jquery-select-pseudo-element-after/ , http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — guest271314, Mar 21 '16 at 19:18

score 0 · Answer 1 · answered Mar 21 '16 at 19:22

0

You can't directly target :after. You can, however, define a class combination with the :after hidden. Then you can add that class to the element you're targeting.

$("#dropdown").change(function() {
  if ($("#dropdown").val() == "designer") {
    $(".form-register-with-email").addClass('designer');
  }
  ...
});

.form-register-with-email.designer:after {
  display: none;
}

JSFiddle

answered Mar 21 '16 at 19:22

Mike Cluck

31,869
13
80
91

Thans Mike for your answer. very helpful – Mar 21 '16 at 20:33

Wesley Smith · Accepted Answer · 2016-03-22T05:35:41.950

One way would be add a class to the container element and use CSS targeting descendants of that class.

To do this, modify your CSS like this:

/* add :not(.design) to this CSS rule*/
.main-content:not(.design) .form-register-with-email:after {
  content: 'OR';
  position: absolute;
  /*bottom: 396px;  remove this, see media query below*/ 
  right: -100px;
  border-radius: 50%;
  background-color: #edeca5;
  width: 50px;
  height: 50px;
  color: #93923b;
  font-size: 17px;
  line-height: 50px;
}
/* add these two new CSS rules*/
.main-content.design .form-register {
    margin-left: 11%;
}
/* Small Devices, Tablets */
@media only screen and (min-width: 920px) {
  .main-content:not(.design) .form-register-with-email:after {
     bottom: 396px;
  }
}

Then change your JS to:

  $("#dropdown").change(function() {

    if ($("#dropdown").val() == "designer") {
      $('.main-content').addClass('design'); // add this line
      $("#design1").show();
      $("#design2").show();
      $(".form-sign-in-with-social").hide();
    } else {
      $('.main-content').removeClass('design'); // add this line
      $("#design1").hide();
      $("#design2").hide();
      $(".form-sign-in-with-social").show();
    }
  });

Working jsFiddle

Thanks u very much, it is working, just that the "OR" is misplaced when we come to the responsive design and I need to set the top space to 900px or 1110px (which are very big numbers). Do you have a better solution ? — , Mar 21 '16 at 20:32
@PrinceLionelNzi That is happening because you already use `bottom: 396px;` to set it higher for the larger screens. Instead of fighting that value, you can use a media query in your css to only apply the `bottom: 396px;` rule if the screen is at least a certain width, see my edit above and the updated fiddle. You may need to adjust the px value a bit but that should get you sorted :) — Wesley Smith, Mar 22 '16 at 05:38
@PrinceLionelNzi It might be worth mentioning here, if you do this kind of stuff often, [bootstrap](http://getbootstrap.com/) is an awesome framework that makes this type of responsive design utterly simple ;) — Wesley Smith, Mar 22 '16 at 05:43

Affect a CSS element in javascript

2 Answers2

Working jsFiddle