Develop Reference

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.

Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

Transition not applying

So I'm using jQuery to change icons, and using CSS to apply a transition. For some reason its not working Here's my code
CSS
.fa-heart{
transition: 1s;
}
.fa-heart-o{
transition: 1s;
}
JS
$('.fa-heart-o').hover(function() {
$(this).toggleClass('fa-heart-o fa-heart');
}, function() {
$(this).toggleClass('fa-heart-o fa-heart');
});
A demo http://jsfiddle.net/cLVBg/1/ Any ideas?

content is not an animatable property, thus transition does not apply. However if you just want to fill in the heart with a transition in opacity, try working with a SVG- or CSS-created heart, or just place one on top of another and change their opacity value.
Example: http://jsfiddle.net/cLVBg/5/

What you are doing now is replacing the content on hover. If you want a slow transition, you can use CSS properties to achieve that, like so:
JSFiddle Example
HTML:
<div id="transition"></div>
CSS:
#transition {
width: 50px;
height: 50px;
background-color: blue;
}
#transition:hover {
transition: background-color 1s ease;
background-color: red;
}
The transition property requires that you declare another property to apply the transition to. You can select a duration, a transition timing function (ease, in this case), and a delay if you want.

Angular JS 1.2 - animating child elements with ng-show

Dearest stackoverflowers,
I'm new to Angular JS and have read some stuff on how to animate the Angular way, still I'm very much confused on how to correctly implement it and what classes get added when and where. I feel like I had much more control over my animations with traditional jQuery (adding and removing classes). But maybe this is just because I'm used to it that way.
On pageload I want certain elements to animate in. So in my controller, on pageload, a variable (pageLoaded) gets set to true. And my surrounding content-wrapping div will have ng-show="pageLoaded".
This way I have successfully added an animation on the entire page using following CSS transitions/animations:
.page.ng-hide-add, .page.ng-hide-remove {
display:block!important;
}
.popup.ng-hide-add {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
But once I try to address child elements, the animations fail.
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove .child {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
Is this not supported by Angular? Or am I doing something wrong?
And if I understand correctly, no matter if you're using ng-hide, or ng-show..
the ng-hide classes should be used? Where they follow following logic:
ng-hide-remove/ng-hide-remove-active show the element
ng-hide-add/ng-hide-add-active hide the element
Can someone explain the difference between the regular and the active classes? How should they be used?

It seems that Angular scans the document for things to animate, I have found that when wanting to animate a child element. You have to set a transition on the parent for as long as you want the children to transition.
For example.
.page.ng-hide-add, .page.ng-hide-remove {
-webkit-transition: 1000ms;
}
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child h1 {
-webkit-animation: 450ms bounceInRight;
}
.popup.ng-hide-add .child h2 {
-webkit-animation: 750ms bounceInRight 250ms;
}
Angular will only add the 'animation' classes, if the HTML element with the NG-IF/NG-SHOW or ng-whatever element has a transition in the CSS specified for it.

Hide div when "animate-delay: 1s;" still ongoing and display after the delay

I am using the following CSS file in order to add some animations to my website that I'm building:
http://www.justinaguilar.com/animations/scrolling.html
Its concept is pretty simple - You add class names to your div to have it animated when you get to it when you scroll the page up/down.
I want to add a tweak there, which will add a slight delay between each animation. That way, all the animations in the same line, would appear one by one, and not all by together at the same time.
My idea was to add a class name, for instance: delay-1, and it will add animate-delay: 1s; to it.
Here's a live example of what I want to do. Scroll down and see how "Our Progress" displays each animation with a delay:
http://demo.qodeinteractive.com/river/home-anchors/#home_presentation
Is this something I can do with CSS3 only? whether the answer is yes or no I would be much appreciate any help.

Yes, CSS3 transition will do the trick , i have a demo page set up long time ago. You can refer to it..
As you can see, the first item has a 2s delay and the second item has no delay. Good Luck
#demo:hover {
width: 300px;
transition-delay: 2s
}
#demo1:hover {
width: 300px;
transition-delay: 0s
}
http://jsfiddle.net/zFbkL/

try to define class like this:
.delay-1 {
animation-delay:1s !important;
-webkit-animation-delay:1s !important;
}
no idea if it will work ...but worth trying
..yes ...it will do the job - it worked for me

You would still need to add a class to the section when you scroll to it via Javascript but you can use nth-child() to target each one.
Let's say there's 4 steps you could do:
.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }
Though, with an unknown number of steps you're better off scripting this out I think.
$('.steps .step').each(function(i){
$(this).css('animation-delay', i + 's');
});
Then, set off the animations by adding a class to .steps.
.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }
Hopefully this is what you were aiming for.

How to use CSS3 transitions

I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?

The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space

There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.