My CSS has to change using a transition ,and till now i used div:hover for that.
The transition needs to be activated when you click another div, not when you hover over the div that has to move/change .
How can I do that ?
Thanks
Evert
You cannot handle click events on dom elements with css, you will need to use javascript for this.
You can add a click event to the first div which is fired when you click it. Within the event you select the other div, and make the transition.
Working Demo
You can do this by adding a class with the css transition:
Html:
<div id="clickme">1</div>
<div id="changeMe">2</div>
Javascript:
var el = document.getElementById('clickme');
el.onclick = function() {
document.getElementById('changeMe').className = "transition";
};
CSS:
.transition{
/* transition css */
}
Related
I have a pretty complex ng-repeat. The number of displayed items can be controlled by two buttons. The first button removes a single element from the ng-repeat by using a filter. The second button removes a bunch of elements and displays a bunch of other elements (also by using a filter).
I currently have an animation on the ng-repeat like this:
<style>
.animation {
-webkit-transition: 1s;
}
.animation.ng-enter {
opacity: 0;
}
.animation.ng-enter.ng-enter-active {
opacity: 1;
}
/* Similar for ng-leave */
</style>
<div class="animation" data-ng-repeat="item in items"> ... </div>
When the user clicks the first button I want the elements to use the animation.
When the user clicks the second button I want to disable any animations.
I'm using AngularJS 1.2.16.
You could use ng-class directive to have animation class conditionally. Remove animation class when you don't want it, specifically saying on click of second button.
<div ng-class="{animation: expression }" data-ng-repeat="item in items"> ... </div>
In above snippet expression will be condition/scope variable which will set to false so that animation will get removed and animation will get disabled.
I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item.
<div id="main">
<div id="box"></div>
<div id="item"></div>
</div>
With my knowledge in CSS3 I could only make a transition for item to slide it out in hover. But I want it happen when #main is hover not #item.
Have a look at the them please.
http://jsfiddle.net/sL3Pw/
You are correct, there is no way currently to style a parent element of a child in pure CSS. You can use JavaScript as a way to achieve the desired effect.
(UPDATE)
You can achieve this in JavaScript by doing the following (DEMO: Fiddle)
JS
This should run onload or else it will not work.
// On Hover
document.getElementById('main').onmouseover = function () {
document.getElementById('item').classList.add("to-left"); // Add To Left Class
}
// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}
Please remember to change the IDs of the elements if needed.
CSS
Add this CSS class to your CSS
.to-left {
margin-left: 60px;
}
And your HTML stays the same. This should get what I believe your desired result is. Let me know if this works for you.
I have built a website that has lots of animations, using CSS3. The elements that are animated all have the position attribute set to absolute, and the container's position set to relative. Each element initially has a top and left value (set via the style attribute), but when the page loads, all the elements are initially animated to the position defined from top:0px;left:0px. Is there a way for the page to start off with the elements at there desired positions without them initially being animated?
Your CSS animations are ready before your javascript. I usually add a class to the body so I know it's ready for animations...
window.onload = function(){
document.body.className += " animated";
}
and then in your CSS
.box {
/* usual styles here*/
}
.animated .box {
-prefix-animation: animationName duration ease;
}
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.
Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser).
How come mobile safari triggers the active state of a link during scroll?
My test page is constructed of an unordered list with a link tag inside each list item that expands to 100% width. The issue is that during a normal scroll, the :active state is triggered, revealing the background that is intended for showing during :active state only (I'm obviously omitting unnecessary styles and content from the example):
html:
<ul id="foo"><li>Content</li></ul>
css:
#foo a {background:white; width:100%; height:100px;}
#foo a:active {background:red;}
You can tell if a click turns into a drag gesture or not by listening to touchstart and touchmove events and then evaluate if the touch turns into a scroll or not e.g. if you were coding in angular
let isTouchMove = false;
#HostListener('window:touchmove', ['$event'])
onTouchMove(event) {
isTouchMove = true;
}
#HostListener('window:touchstart', ['$event'])
onTouchStart(event) {
isTouchMove = false;
}
you can add a class, e.g. 'not-scrolling', based on the value of isTouchMove variable and use that in addition to your :active selector, like :active.not-scrolling { background:red; }.
You should use ontouchstart/ontouchend to add/remove a class with Javascript. Then use that class instead of :active.