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);
Related
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 3 years ago.
Improve this question
I am trying to create button effect in which will change its color on click and returns to its original colour after the click.
A conditional was added within the button effect to returns to its original code.
In this case I have four variables storing each color and instantiates for each button id in HTML.
// VARIABLES - ids from DOM instantiated as querySelector().
const btnBlue = document.querySelectorAll("#btnBlue");
const btnGreen = document.querySelectorAll("#btnGreen");
const btnRed = document.querySelectorAll("#btnRed");
const btnYellow = document.querySelectorAll("#btnYellow");
Giving an example of a button here is where I am stuck with the logic.
// Exemple with blue button:
$(btnBlue).click(function() {
$(this).css('background-color', '#00FFFF');
// the play() func does other logic such as join other functions
// together and flash all the buttons in different order.
blueBtnAudio.play();
if(btnBlue == '#00FFFF' ){
$(btnBlue).stop();
}
});
There's no need for any JS here. You can do this with CSS alone by using the :active pseudo-selector:
button {
background-color: #CCC;
border: 0;
border-radius: 5px;
padding: 10px 20px;
outline: 0;
}
button:active {
background-color: #C00;
color: #EEE;
}
<button>Click me</button>
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.
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 6 years ago.
Improve this question
I created a coffescript function with parameters that looks like this:
enlargeSelectionOn : (zoneSelected) ->
$(zoneSelected).stop().animate
width:450
height:510
1000
The html part looks like this :
#container1
.title1
img(src="img/team.png")
span.text First Title
a(href="#")
And the CSS part (with stylus) looks like
#container1
width 398px
height 490px
float left
margin-right 11px
border 2px solid $color6
background-color $color5
border-bottom-right-radius: 50px;
box-shadow 4px 4px 8px #aaa
.title1
height 53px
width 100%
border-bottom 1px solid $color6
color white
background-color $color6
I created the function to animate div's dimension when I hover it
so I want to call it with hover event :
'hover div#container1' : 'enlargeSelectionOn("container1")'
But it's doesn't work! I know there's something wrong with my code
when I call it with no parameters like this
'hover div#container' : 'enlargeSelectionOn'
it works correctly
But in this case i'm forced to call the selected div inside my function
enlargeSelectionOn : () ->
$('div#container1').stop().animate
width:450
height:510
1000
I want to use parameters because i'm going to use this function for differents div containers.
I don't think the way you wrote the function is correct syntax. It should be:
enlargeSelectionOn = (zoneSelected) ->
$(zoneSelected).stop().animate
width:450
height:510
1000
To call this function on a hover event, you'll want to tell jQuery to call the function enlargeSelectionOn when your div is hovered on. To do this, use the following code:
$("div#container").hover(enlargeSelectionOn("container1"))
More on the hover function can be found in the jQuery docs.
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 8 years ago.
Improve this question
I want to set transform: translate(50px, 25px) from JavaScript (I want to calculate 50 & 25 coordinates) to element <div id="foo">bar</div> and to inherit from CSS #foo { transform: scale(.8) }.
I explicitly want to have scale defined in CSS.
I would like to know if it's possible to override only one type of transform from JS without overwriting whole transform property. (example: like with margins; if you set in CSS margin: 10px 20px 30px 40px; you can directly access margin-top and change it without affecting other 3 sides).
You need to use window.getComputedStyle to read styles from CSS file. Read current transformation and apply with new one.
See how this works there:
http://jsfiddle.net/Lcjb5vLd/
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 () {
//...
});