When using ToggleClass how do I overwrite CSS? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Code:
$(document).ready(function () {
$('.button').click(function () {
$('.button').toggleClass('active');
});
});
CSS:
.button {
background-color: red;
}
.active {
background-color: green;
}
The JQuery works but the CSS of .button overwrites the css of .active. What can I do so that .active is taking precedence when it's active? I don't want to apply !important. Any other way?

You could take a look at the .removeClass class, you can therefor remove an active class when your click event is triggerer. You can then use the .addClass function to add a selected css class.
You could check the currently selected class and change depending on the situation. Maybe not the best approach but it should work.
You should also take a look at .on, .on can prevent troubles when it comes to constructing and working with the DOM, recommended notes.
$('.button').on("click", function () {
//...
});

Related

Make a button image change when pressed / focused / disabled [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have several pictures of the same button, each one representing it in a different sate: normal, pressed, focused, disabled.
How can I make it into an html button that automatically shows the correct picture (and also has an onClick event) ?
Feel free to use html / css / javascript.
The tag also doesn't need to be a button, it could be an image, , or whatever you want, but hopefully written in a generic enough way for others to use your solution too
Thanks!
Just add a class to a link:
<a href="#" class='styledbutton'>Buttontext</a>
... and some CSS:
.styledbutton {background: url(defaultstate.png); display: inline-block;}
.styledbutton:hover {background: url(hoverstate.png);}
.styledbutton:focus {background: url(focusstate.png);}
You can make use of the CSS pseudo-selectors :hover and :focus to change the state of a button at various different interaction points, and simply tie a function into the onclick event in order to run additional JavaScript if required:
function buttonClick() {
console.log('Button clicked');
}
button { /* Default state */
background: white;
}
button:hover { /* On hover */
background: red;
}
button:focus { /* After a click */
background: blue;
}
<button onclick="buttonClick()">Button</button>
Keep in mind that this can also be done with an image by simply passing the image's path into background-image as a url() value.

Benefit of using jQuery to modify CSS [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am currently going over the 'Modifying HTML Elements' jQuery course on Codecademy and it is walking you through modifying CSS using jQuery. I was just wondering if there is a benefit of modifying the CSS via this method rather than just editing the actual CSS file?
There is a huge benefit, you can modify the CSS on your code dynamically within the page, for example, in response to some actions by the user. E.g. the user presses a button and you change the color of the button to red.
You should use CSS files to set the basic styles for the page, and then use jQuery in you code to add dynamism to the page and change styles in response to some events, like user interactions or web requests.
Tip One of the best approaches is to only use CSS classes defined in you CSS files. If you need to change the color of the button to red, make a class in your CSS file
button.pressed {
color: red;
}
And use jQuery to add/remove that class, instead of directly modifiyng the CSS. This way you can have all your styles in your CSS file and in the code just use classes, this keeps the code cleaner.
This is probably kinda advanced, but keep it in mind!
Modifying CSS via jQuery allows you to change the style of elements based on user interactions or other events/states. For example, changing the styling of invalid form inputs.
One of the best use cases of modifying CSS via jQuery is animating the position of an element. This is thanks in part's to jQuery's ability to change the CSS properties based on the element's current properties. See the example below.
That said, in many cases it's better to apply a class to an element and use CSS to style that specific class. The class can be toggled on/off as needed, preventing the need to reset CSS styles in jQuery.
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
div {
position: absolute;
background-color: #abc;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">«</button>
<button id="right">»</button>
<div class="block"></div>

JQuery/Javascript/CSS icon shrinking when de-hovered [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.

How to get css property from class using jquery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How can i get the 'color' property from test class but should not use .addClass and .css function.
.test {
color: red;
margin: 10px 10px 10px 10px;
}
I need to add color property for other class.something like following
<div class="getproperty"></div>
How can i get only color property from test class to use getproperty class.
Update :
I want to get the color property that is for the class:test and to use the obtained color to another class named as getproperty.
How can i do this in jquery ?
With jQuery you could do something like this:
var color = $("<i>", {class: "test"}).css("color");
$(".getproperty").css("color", color);
This doesn't require you have an element with the class test in the page
If you want to get the color from the class:
var color = $(".test").css("color");
$(".getproperty").css("color", color);

Toggle triangle ► ▲ on dropdown jQuery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
What would be the best way to toggle ► triangle to ▲ on dropdown (without using images)?
<div class="box-heading">
<a href="javascript:void(0);" id="switch-filters">
<span>►</span> Možnosti filtrovania</a>
</div>
$( "#switch-filters" ).click(function() {
$(".filter_group[filtertype!='p']").toggle();
});
You could use toggleClass and define the triangle in CSS3 with the pseudo tag :before
CSS
.box-heading > a:before{
content: "▲";
}
.box-heading > a.active:before{
content: "►";
}
jQuery
$(".box-heading > a").click(function(){
$(this).toggleClass("active")
});
you could use CSS.. so when you click on the a tag, you add a class to the a tag.. say a class called clicked and then have a CSS rule associated with that class
a.clicked span {
transform: scale(1) rotate(90deg) translate3d(0,0,0);
/* transform for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
zoom:1;
}
then CSS will rotate the span 90 degrees making the left arrow become a down arrow
browser compatibility
http://caniuse.com/#search=transforms
also link to CSS Matrix Rotation Calculator:
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
:)
Use a Ternary expression
$(".filter_group[filtertype!='p']").is(":visible") ? $(this).next("span").text("▲") : $(this).next("span").text("►")
Using jQuery to replace the html of your span
Something like :
$('span').text('▲');

Categories