I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/
You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that
I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!
Related
I'm experimenting with a design pattern using .expands to toggle .hidden child classes for .expanded auto-sized flex box elements.
Something like:
const expandClick = e => {
e.currentTarget.querySelectorAll('.expanded').forEach(child => {
child.classList.toggle('hidden')
})
}
document.querySelectorAll('.expands').forEach(expandable => {
expandable.addEventListener('click', expandClick)
})
https://jsfiddle.net/vpc8khq8/
When my inner content loses the display: none attribute, I would like the height to ease out with a slight bounce, but I'm not quite sure how to pull that off with a vanilla CSS transition or a pinch of JS.
I came across this post: How can I transition height: 0; to height: auto; using CSS?
But many of the answers seem more like hacks with odd side effects and excess js / css than simple, lightweight solutions.
This does the trick with jQuery: https://jsfiddle.net/cm7a9jr7/
const expandClick = e => {
$(e.currentTarget).children('.expanded').each(function() {
$(this).slideToggle('slow', 'swing', function() {
$(this).toggleClass('hidden')
})
})
}
$(() => $('.expands').on('click', expandClick))
But, I'd like to use something leaner. Are the any recommended libraries or simple ways to pull this off in CSS?
I've updated your fiddle https://jsfiddle.net/vpc8khq8/2/
Instead of using display none you can get a transition effect by setting max-height to 0 on the hidden section then change the max-height to a fixed height (greater than the section will ever be) to reveal. This also requires you to set overflow hidden on the parent element:
.expands{overflow: hidden;}
section.hidden {
max-height: 0;
background: red;
}
section{
transition: 1s cubic-bezier(0.35, 1.17, 0.39, -0.61);
max-height: 400px;
background: blue;
}
I've created a semi-decent cubic-bezier to get the bounce effect, though with a bit of refinement you could probably get something better.
If you open chrome devtools and click on the transition icon you can select from a number of presets and also create your own by moving the curve points around. Devtools will show you a preview of the transition and you can test it out without reloading. Then just copy that cubic-bezier code back to your CSS.
To take it a step further you could achieve all of this without any JS, using hidden checkboxes and some CSS trickery along the lines of this example: https://codepen.io/mrosati84/pen/AgDry
Here's the jsfiddle that I've been trying to debug:
http://jsfiddle.net/Neoheurist/x57fkzng/
HTML
<div id="birthday">Surprise Party</div>
<p></p>
<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<script>
function blue()
{
element=document.getElementById("birthday");
element.innerHTML="Happy";
element.style.background="blue";
element.style.width="150px";
element.style.opacity="1.0";
element.style.transition="width 2s,background 15s,opacity 2s";
}
function red()
{
element=document.getElementById("birthday");
element.innerHTML="Birthday";
element.style.background="red";
element.style.width="300px";
element.style.opacity="0.0";
element.style.transition="width 2s,background 4s,opacity 6s";
}
</script>
CSS
div
{
width:100px;
height:50px;
background:blue;
transition:width 2s,opacity 2s,background 15s;
}
div:hover
{
width:200px;
background:green;
opacity:0.25;
transition-timing-function:linear;
transition:width 2s,background 4s,opacity 6s;
}
Questions:
Why does clicking a button disable div:hover?
How can I prevent this from happening?
It's because HTML style attributes override element selectors in a css file. Any property set directly in an HTML style attribute will automatically be used over any property set in any css selector declaration.
Style attributes are much more specific than tag selectors (that's why they aren't recommended for use in fact).
According to the inspector in webkit this also includes the :hover state, so any inline style will stop a hover state from working.
You could use important, tempting as it might be, but that's not a good idea, because it takes the current problem with specificity that you're having and amplifies it even further, leading to a specificity nightmare. The only way to over-ride !important is with more !important, further down the document, or by using more specific selectors (like IDs) or longer chains of selectors and !important and so on, you can see how this can be horrible to maintain. Also any js that adds style to the HTML directly won't work either.
The best solution is to use javascript to add and remove css classes to trigger your changes. This will solve your problem as all your classes will have manageable specificity.
#birthday.blue {
background: blue;
width: 150px;
opacity: 1.0;
transition: width 2s,background 15s,opacity 2s;
}
#birthday.red {
background: red;
width: 300px;
opacity: 0.0;
transition: width 2s,background 4s,opacity 6s;
}
Then make sure the hover state is defined for all the combinations, so any class will :hover. This is not possible with inline styles.
#birthday:hover,
#birthday.blue:hover,
#birthday.red:hover
{
width: 200px;
background: green;
opacity: 0.2;
transition-timing-function: linear;
transition: width 2s,background 4s,opacity 6s;
}
I've put together a jsfiddle that demos this. I've used JQuery, for the sake of getting a demo together quickly and their addClass() method is great. Good effort to use pure js, it's a good habit to get into; this question will elaborate on how to add and remove classes in javascript
Plus; as an added bonus, you'll also have all your style in your style file and all your functionality in your javascript, which is better separation of concerns and makes the site styling DRYer and easier to re-use elsewhere in the project (you don't have styles stuck is js that you can't easily add elsewhere, which you copy instead, then try to change in one place and not the other ... we all do it, or our colleagues do!).
[Seen as I've brought up the subject of specificity you might also be interested to know that IDs are also pretty bad for that and unnecessary in style files]
You could make the div:hover attributes all !important like so:
div:hover{
width:200px !important;
}
However I've heard you'd want to avoid !important if possible, but this does what you want...
You can also use
document.addEventListener('DOMContentLoaded', function () {
var storedStyles;
var elem = document.getElementById("birthday");
elem.addEventListener('mouseenter', function () {
if (elem.hasAttribute('style')) {
storedStyles = elem.attributes.style.value;
elem.removeAttribute('style');
}
});
elem.addEventListener('mouseleave', function () {
if (storedStyles) {
elem.setAttribute('style', storedStyles);
} else {
storedStyles = null;
}
});
});
and clear all styles on mouse enter restoring hover styles precendence and setting back your inline styles on mouse leave
I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much
Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview
I just want the bounce effect to be on the mousover of the #bounce1,2,3... images on the homepage, but it seems to be forcing images to the next line.
what gives?
http://jameshiggins.ca/nlms/
You can achieve the same effect without JavaScript and jQuery, using only CSS3. Use #keyframes to define the key frames and then use it in animation property.
Here is the JSFiddle demo regarding to your example.For more information about the animation property of CSS3 please check this URL.
You'll want to add this to your style sheet.
#fp_brands a .ui-effects-wrapper {
float: left !important;
width: 33% !important;
}
The ui-effect-wrapper div that jquery-ui uses in it's animations can sometimes mess up floated elements. This is because it's css rules include width: 100%; and float: none;
Using the element inspector, applying float:left; to each image made them animate as desired. I would apply it to the class attachment-medium if you don't use it anywhere else to save code
Try to add this css and remove width="33%" from img tag?
.attachment-medium {
position:relative;
width:235px;
height:100px;
}
I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.
I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);