I need code for this functionality.
By default, it should be like right headed arrow and when i click it should be down headed arrow.
Thanks,
Ram
You can do it by using javascript. If you don't know how to use javascript, refer to the code below.
<html>
<head>
<title>Title</title>
<script type="text/javascript>
function myFunction(){
document.getElementById('img').src = "down.jpg";
}
</script>
<body>
<img src="right.jpg" id="img" onclick="myFunction();"/>
</body>
</html>
Enjoy :D
As you can see, we fetch the element in js using its id and change its src attribute and set it to your another image. You can change the event which is onclick as per your needs. You can use ondblclick to trigger the function on double click. ^-^
This may help you #pbrc1995 :)
function myFunction(x) {
x.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Since you are not asking for a JavaScript solution, here's one without it.
div.arrow {
width:33px; height:30px;
background:url('https://i.stack.imgur.com/yMatp.png');
}
div.arrow:active{
width:51px; height:26px;
background:url('https://i.stack.imgur.com/M3Bew.png');
}
<div class="arrow"></div>
Related
I was following a Youtube tutorial to create a Memory Card game. Halfway through I started to tinker to see if I could figure out the steps myself. I have a div that looks like this:
<div class="memory-card">
<img class="front-face" src="img/aurelia.svg" alt="Aurelia">
<img class="back-face" src="img/js-badge.svg" alt="JSBadge">
</div>
The CSS for this div looks like this
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
transition: transform 0.2s;
}
.flip {
transform: rotateY(180deg);
transition: transform 0.2s;
}
The class "flip" is added to the div by toggling on the classList of the memory-card element when a click occurs. Essentially what this does is that when the memory-card is clicked and held it becomes active and scales to 0.97 and when released it is rotated by 180 degrees around the Y-axis (class="memory-card flip").
Before click
However, when I click again (and hold) it rotates again without waiting for the click to be released. As per my understanding (which has a hole that I hope you can fill), the card (which the div represents btw) should rotate only after I release the click. Can anybody help? This seems like an issue that must have been answered before but for the life of me, I could not find it.
Try like this:
var memorycard = document.querySelector('.memory-card');
memorycard.onclick = function(e) {
memorycard.classList.toggle('flip');
};
.memory-card {
width: calc(25% - 10px);
height: calc(33.33% - 10px);
position: relative;
margin: 5px;
transition: transform 0.2s;
}
.memory-card:active {
transform: scale(0.97);
}
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}
.flip {
transform: rotateY(180deg);
}
img {
width: 100%;
height: auto;
}
<div class="memory-card">
<img class="front-face" src="https://i.stack.imgur.com/esMJU.png" alt="Aurelia">
<img class="back-face" src="https://i.stack.imgur.com/xR2ZZ.png" alt="JSBadge">
</div>
.flip has this CSS property: transform: rotateY(180deg);. However, as soon as the click begins, .memory-card:active is applied, so that property gets overwritten as transform: scale(0.97);. The solution is to specify that when the .flip class is present, both transform functions should be applied:
.memory-card.flip:active {
transform: rotateY(180deg) scale(0.97);
}
SOLVED Chrome bug, Stop CSS3 transition from firing on page load
This might be a duplicate.
I'm getting something weird with the following code:
JsFiddle: https://jsfiddle.net/xz3hcbqv/
You can see it working fine here and if I export it to my own HTML file like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.stripes {
cursor: pointer;
width: 35px;
}
.stripe {
width: 35px;
height: 5px;
margin: 6px 0;
transition: background-color 10s;
background-color: black;
}
label {
background-color: black;
}
input {
display: none;
background-color: black;
}
input:checked + .navbar-toggle .stripe {
background-color: red;
}
input:checked + .navbar-toggle .stripe.first {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
input:checked + .navbar-toggle .stripe.second {
opacity: 0;
}
input:checked + .navbar-toggle .stripe.third {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
</style>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="navbar-toggle-cbox">
<label for="navbar-toggle-cbox" class="navbar-toggle collapsed">
<div class="stripes">
<div class="stripe first"></div>
<div class="stripe second"></div>
<div class="stripe third"></div>
</div>
</label>
</nav>
</body>
</html>
Still working fine, notice that it's the exact same code.
But then, when I copy the inner of <style> </style> and put it into a style2.css file. On the browser load, it fades the black color as well.
What causes this?
How can I solve this?
I pulled the code out of the style section and placed it into a local style2.css file and put the rest of the code into an index.html file and was able to reproduce the effect you're describing, but only in Chrome (and in Chrome it doesn't produce the effect in jsfiddle). The rule that is likely causing the fade is the transition on the .stripe rule, though. It sounds like the issue you are describing is caused by a bug in Chrome. See this question for more information: Stop CSS3 transition from firing on page load
Different solution: since it's a bug in Chrome afaik, you can set the transition 1s to the input:checked.
When the browser get's loaded, the input isn't checked yet. This way you won't have to use JS or something else fancy.
EDIT:
Adding -webkit-transition also seems to work.
I asked this question. Here another issue to complement that:
I have an image and header in my html
HTML:
<div class="col-md-4 no-underline-hover">
<a class="rightImg">
<img class="img-responsive icon-img homepage-icon" src="{{asset('assets/img/homepage/icons/1.png')}}" alt="Greece-1173 - Temple of Athena by Dennis Jarvis, on Flickr">
<h3 class = "gray-color homepage-icon-detail">perfume </h3>
</a>
</div>
CSS:
.homepage-icon:hover {
transform: scale(1.03, 1.03);
}
.homepage-icon {
transition: 0.3s ease;
}
.homepage-icon:hover +.homepage-icon-detail {
color: hsl(288, 63%, 28%);
transform: scale(1.1);
}
h3.homepage-icon-detail:hover {
transform: scale(1.1);
color: hsl(288, 63%, 28%);
}
h3.homepage-icon-detail:hover + .homepage-icon{
transform: scale(1.03, 1.03);
}
Whenever I hover homepage-icon , h3's color is changing. What I want to change is the icon size when I hover h3. Any suggestion?
This should do what you want
h3:hover + .homepage-icon{
transform: scale(1.03, 1.03);
}
homepage-icon:hover ~ h3{
color:white;
}
I think You have to do this way:
h3:hover .homepage-icon{
transform: scale(1.03, 1.03);
}
and
homepage-icon:hover h3{
color:white;
}
I'm trying to make a html page with a cube on it, each face of said cube would have buttons on it. On the default face all the buttons work fine, however, as soon as I rotate the cube the new face looses all interactivity.
HTML:
<button type="button" id="button">Toggle</button>
<hr>
<div id="cube">
<div class="face one"></div>
<div class="face two">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face six"></div>
</div>
CSS:
#cube {
position: relative;
height: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 360px;
background-color:#ffffff;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
And JS:
$("#button").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(90deg)");
});
Here's a Fiddle link demonstrating my problem: http://jsfiddle.net/x66yn/
(Note that the demo will only work on webkit browsers.)
You need to give the elements a non-static position. This is because the elements are not currently positioned in their parent, with the parent being moved forward it covers the children
button {
position: relative; /* Or absolute, fixed */
}
Demo
Note: I added a cursor change on hover to show it works
The other option is to move the buttons forward in the Z direction greater than or equal to it's parent z-axis movement since you're doing so with the parent
button {
-webkit-transform: translateZ(200px); /* Equivalent or greater than parent's*/
transform: translateZ(200px);
}
Demo
In your case specifically, the back panel will not work just using the above, the angle of the right button also cannot be 90 (some some reason which I don't know for sure). It has to do with how the browser is rendering it. As a result, just use 89.999 which is indistinguishable to us but works fine
$("#buttonRight").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(89.999deg)");
});
I had similar problem, but for me help remove from cube(DIV) this ruls: backface-visibility : hidden; and rotate cube by 89.99 (just two "9" after dot)
With this cube work in Chrome, Firefox, Safari and IE11
I want to align the bars to the bottom here: http://jsfiddle.net/7vdLV/67/
I tried using the following trick:
.graph { position: relative; }
.weekbar { position: absolute; bottom: 0; left: 0; }
However it breaks the graph, can anyone tell me how I should do it please in this scenario?
Tweaked the HTML a bit as well as the CSS and got this: http://jsfiddle.net/7vdLV/74/
<div class="graph">
<div class="weekbar"><div style="height: 10%;"></div></div>
<div class="weekbar"><div style="height: 20%;"></div></div>
<div class="weekbar"><div style="height: 30%;"></div></div>
<div class="weekbar"><div style="height: 40%;"></div></div>
</div>
As TylerH pointed out inline styles are considered bad practice so you would be better replacing them with classes i.e.
<div class="graph">
<div class="weekbar"><div class="h10"></div></div>
<div class="weekbar"><div class="h20"></div></div>
<div class="weekbar"><div class="h30"></div></div>
<div class="weekbar"><div class="h40"></div></div>
</div>
.h10 {
height: 10%;
}
Try transform:
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
http://jsfiddle.net/L4A2h/1/
Just replace the .graph class with the following code
.graph {
width: 100%;
height: 200px;
background-color: #eaeaea;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Hope this Helps
Simplest solution:
apply
.weekbar{
position:relative;
display:inline-block;
top:50%; // height of biggest bar
}
Check this JSFiddle
Or if ancient browser support is not a big deal you can make use of the ::before element as follows:
.graph::before{
content:"";
display:block;
height:50%; // height of the biggest bar
}
.weekbar{
display:inline-block;
}
check this JSFiddle
Make these edits to your CSS:
.graph { position:relative; }
.weekbar { position: relative; top: 100%; left: 0; }
Is this what you were looking to do?
http://jsfiddle.net/4HEEk/
You can use position:relative; for the parent and position:relative; also for the child and calculate the top value by this jQuery code:
$(document).ready(function() {
var parentHeight = $('.graph').height();
$('.weekbar').each(function() {
var height = parentHeight - $(this).height();
$(this).css('top',height*100/parentHeight + '%');
});
});
Here is a working fiddle
I would change float for display:inline-block; then set an "invisible" resetter div at the start of your graph to make sure all the elements start from the bottom (rather from the bottom of the tallest line.
.weekbar {
width: 3.1%;
margin-left: -4px;
margin-right: 2%;
display:inline-block;
background-color: #aeaeae;
}
.resetter{
height:100%;
display:inline-block;
width:0;
margin-right:-4px;
}
Have a look at this JSFiddle.
Also on a note about inline style usage (dont do it!). If you know that you have a discrete number of heights (ie. in your example they are all multiples of 10) i would suggest creating classes for them.