I'm trying to give my ng-view an animation, I have exactly the same code as the example and I so no error or anything.
This is my html code:
<div ng-view class="slidedown">
<!--Insert templates-->
</div>
, css code:
.slidedown {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slidedown.ng-enter,
.slidedown.ng-leave {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.slidedown.ng-enter {
top: -100%;
}
.slidedown.ng-enter-active {
top: 0;
}
.slidedown.ng-leave {
top: 0;
}
.slidedown.ng-leave-active {
top: 100%;
}
and yes I have defined the source files:
<!-- CSS -->
<link href="assets/Css/ng-view.css" rel="stylesheet" type="text/css">
<!-- JS -->
<script src="componenten/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="componenten/bower_components/angular-route/angular-route.min.js"></script>
So I really don't get it why it isn't working.
Am I missing something?
In my case the problem was that I forgot to include module dependency ['ngAnimate'].
Related
I tried to resize a svg (which i did put into the div). I tried out:
document.getElementById('pload').setAttribute("height", "15%");
document.getElementById('pload').css("height", "15%");
document.getElementById('pload').attr("height", "15%");
document.getElementById('pload').style.height = "15%";
I always get "Cannot read property 'style/ css/ attr/ setAttribute' of null.". I can interact with document.getElementById('pload') but can't change any style properties. Everything should already be loaded (see JS: EventListener). Else there are just some timers in the function, nothing should interfere with the svg/div (i just change some style properties in the svg with jquery, no id's or var's are shared. Can interact with svg id's just fine, "EventListener" "load" also works fine). I have no idea anymore what this problem could be.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="pload">
//svg (#pagepreload) here
</div>
</body>
</html>
CSS:
#pagepreload *{
visibility: hidden;
}
#pagepreload #mappin, #pagepreload #ring {
visibility: visible;
}
#pagepreload{
position: absolute;
padding: 0;
border: 0;
margin: 0;
height: 100%;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
#pload{
padding: 0;
border: 0;
margin: 0;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 30%;
transition: top 1s ease-in-out, left 1s ease-in-out, height 1s ease-in-out, transform 1s ease-in-out;
}
JS:
window.addEventListener("load", afterload(), false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
Thanks for your time and effort in advance.
Your script loaded before dom parse.
Use defer to solve this problem.
<script src="script.js" defer></script>
Or use your script link before end of body tag.
You are calling the afterload method when you are attaching it to the load event.
Do this instead:
window.addEventListener("load", afterload, false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
I want a top banner to ease in as soon as the website is loaded. I use JQuery to do that task, but the show() function doesn't work as expected.
$(document).ready(function() {
$('#job').show(2000, function() {
$('#cross').click(function() {
$('#job').hide();
});
});
});
.job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
display: none;
}
.job-banner:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job" class="job-banner">
<p>...</p>
</div>
But that just shows up the div instantly without any animation and the code that should execute after the animation doesn't work as well. I tried to put an alert inside the code block that should execute after the .show() but nothing.
Is there another way of achieving that or did I do something wrong?
#Sergej Thanks, that did the trick. I just needed to also declare opacity and now I have a css transition instead which is called by JQuery.
So for the CSS:
job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.visible {
visibility: visible;
opacity: 1;
}
And JS:
$(document).ready(function() {
$('#job').addClass('visible');
});
I'm trying to display an image on the hover of an a tag which I have got complete and fully working, now I'm facing a problem...
I want the image to 'fade' in and out of the page when it is hovered rather than just appearing in order to give it a more satisfying finish.
My code at the minute is...
a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }
and to display the image I have seperate id's for each of the a tags so it's done like this..
a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }
HTML -
<a class="top-row" id="a1">A1</a>
Like this? (background fixed, animating opacity)
a.top-row {
position: relative;
}
a.top-row:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
top: 100%;
left: 100%;
z-index: 10;
width: 70px;
height: 50px;
opacity: 0;
content: ' ';
pointer-events: none;
}
#a1:after {
background: url(https://placehold.it/70x50);
}
#r8:after {
background: url(https://placehold.it/70x50/ff00ff);
}
a.top-row:hover:after {
opacity: 1;
}
<a class="top-row" id="a1">A1</a><br/>
<a class="top-row" id="r8">R8</a>
Having images fade-in using only CSS would only make it complicated. Instead you can use the jQuery fadeIn() and fadeOut() method to achieve the same.
HTML
<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>
jQuery
$('#showme').hover(
function() {
$('#btn').fadeIn('slow');
},function() {
$('#btn').fadeOut('slow');
});
CSS
div {
width:305px;
height:229px;
}
#btn {
display:none;
}
I have a div that is positioned absolute to my header-Tag. All is okay. With JavaScript I toggle the classes display_block and display_none, when I click on my button.
All works fine.
The div that gets display: none and display: block with the toggle, gets the position right: -100% when it's display:none, and right: 0 when its display: block.
Also works fine. But there is one problem.
The div got transition: all 1s ease-in-out but I don't get that flow-motion. It's only here or gone. But no effect. Why?
header {
position: relative;
}
#ware_cart {
position: absolute;
top: 80px;
width: 35%;
transition: all 1s ease-in-out;
}
.display_none {
display: none;
right: -100%;
}
.display_block {
display: block;
right: 0;
}
<header>
<div id="ware_cart" class="display_none">
<!-- stuff i like to show -->
</div>
</header>
As Paulie D said, you can not transition display.
Also, if the element starts at right: 100% there is no need to hide it.
Try this snippet:
$('#toggle').click( function() {
$('#ware_cart').toggleClass('move_right');
});
header {
position: relative;
}
#ware_cart {
position: absolute;
width: 35%;
top: 80px;
right: 100%;
transition: right 1s ease-in-out;
}
#ware_cart.move_right {
right: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="ware_cart">
stuff i like to show
</div>
<div id="toggle">
Toggle it!
</div>
</header>
hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js)
so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc
here is my code -
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too
I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.
In JavaScript all you need to do is add or remove a class.
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
http://jsfiddle.net/srTnE/1/