This question already has answers here:
Animate element transform rotate
(7 answers)
Closed 8 years ago.
What is wrong with this Code?
$("button").click(function(){
var div=$("#oarm2");
div.animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow");
});
When I press the button, an div Element should be go down in the Page and change the Form.
The "marginTop" is functionally, but the transform skew not..
What is wrong? How I must write this?
Check this Demo Fiddle
Js
$("#go").click(function(){
$("#oarm2").animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow"); });
HTML
<button id="go">» Run</button>
<div id="oarm2">Hello!</div>
CSS
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
Here I include jquery library file jquery-1.8.3.js
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed last month.
im new to the whole Angular/Web Development world. I am currently trying to improve my HTML/CSS skills and ran into a problem I couldnt solve myself.
I am using Bootstrap in my angular project and implemented the cards component.
the card for my usecase](https://i.stack.imgur.com/yOj9R.png)
I added hover effects with css and made the whole card clickable, now I want to implement a frame/border after the card get clicked (as shown in the image).
Does anyone knows a way to do this ?
Best Regards
tschanni
.....................................................................................................
your question doesn’t contain any example of your code but you could do something like adding an onclick or add an event listener to toggle a “clicked” class with the desired border: i.e.
<div class="card" onclick="this.classList.toggle('clicked')">card</div>
With CSS
.card {width: 50px; height: 100px;}
.clicked {border: 1px solid red;}
an example
You can do it in simple and code-readable way, for example add this CSS:
.card.selected {
border: 2px solid blue;
}
And JavaScript click event:
const card = document.querySelector('.card');
card.addEventListener('click', function() {
this.classList.toggle('selected');
});
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
getElementsByClassName() is not working [duplicate]
(2 answers)
Closed 5 years ago.
The simple code for change width of a class in css code using javascript is not working. I have given the width is 200px. Then i want to change the width to 50px. i want to use a javascript code to change width. But it is not working.
document.getElementsByClassName("main").style.width = "50px";
.main {
width: 200px;
height: 200px;
background-color: red;
}
<div class="main"></div>
fiddle: https://jsfiddle.net/33zc0efq/
document.getElementsByClassName returns an array of object so you need to specify index for that. Change it to document.getElementsByClassName("main")[0].style.width="50px";
document.getElementsByClassName("main")[0].style.width="50px";
.main{
width:200px;
height:200px;
background-color:red;
}
<div class="main">
</div>
This question already has answers here:
animating addClass/removeClass with jQuery
(6 answers)
Closed 6 years ago.
I don't know how to add an animation effect when the classes are changed.
Here is my code:
$("#a-button").click(function() {
$("#a-div").toggleClass("hidden show");
});
This works but it doesn't have any effect when changing the classes.I want to make it smoother, maybe something like fading in and out. How can i do that?
You could use fadeOut()/fadeIn() with hasClass() condition to check the if the div has a specific class:
$('.show_hide').click(function()
{
if($('#target').hasClass('show'))
$('#target').fadeOut('normal');
else
$('#target').fadeIn('normal');
$('#target').toggleClass("hidden show");
});
#target {
background: green;
margin-bottom:15px;
height:150px;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show_hide">Show / Hide</button>
<div id="target" class='show'></div>
Try this and let me know. It is fadeToggle by jQuery.
$("#a-button").click(
function() {
$("#a-div").fadeToggle();
});
This question already has answers here:
How to get an HTML element's style values in JavaScript?
(5 answers)
Closed 6 years ago.
I have a simple script that is getting the color of the text in an element and printing it to the console. However, when I run the script, I'm getting an empty string rather than the actual color. Can anyone explain to me why and how to fix it?
HTML
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>
CSS
#scrollingText{
margin-top: 5%;
color: black;
}
JS
window.addEventListener("load", function(){
console.log(document.getElementById("scrollingText").style.color);
})
Pen
You can use getComputedStyle() and getPropertyValue(), also color is returned as rgb(R,G,B)
var a = document.getElementById("scrollingText");
console.log(window.getComputedStyle(a).getPropertyValue('color'))
#scrollingText {
margin-top: 5%;
color: black;
}
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>
This question already has answers here:
jquery to change style attribute of a div class
(9 answers)
Closed 7 years ago.
I want to change background color of my div using jQuery selector and I can't get it to work.
My Codepen.
HTML
<div class='demo'></div>
CSS
.demo {
height: 100px;
width: 100px;
}
JS
$(document).ready(function() {
$('demo').style.backgroundColor = "black";
});
$('demo') will return jquery object not a dom object also your selector is missing a ., use
$('.demo').css('background-color ','black');
Reference: jquery css() doc.