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/
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 have a JQuery function to toggle a Div with ( toggle(200) ) so there is a small sliding animation.
However I have another function that will add a class to this div, which change the height of the div with a 0.3s transition.
#navbar {
height: 270px;
transition: height 0.3s ease-out;
}
#navbar.change-size {
height: 430px !important;
}
My problem is that the transition isn't just applying to the height (which was the intended purpose) but it also applies to the first JQuery function toggling when the div slides in.
My question is how can I set up my css so the height transition effect only applies to .change-size height ?
PS: I didn't add my JQuery toggle code as I believe it is not relevant. The JQuery sliding animation is probably tweaking the div's height/width to create the sliding effect, therefore being influenced by the transition I set up.
Please let me know if I'm unclear. Thank you !
Hope this helps
little fiddle
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
height: 270px;
-ms-transition: all .3s ease-out; /*IE*/
-moz-transition: all .3s ease-out; /*firefox*/
-webkit-transition: all .3s ease-out;/*safari and chrome*/
-o-transition: all .3s ease-out; /*opera*/
background-color: #999;
}
#navbar.change-size {
height: 430px;
}
</style>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="navbar">
Hello
</div>
<button id="toggle">.change-size</button>
<script>
$(function(){
$("#toggle").on("click", function(){
$("#navbar").addClass("change-size");
})
})
</script>
</body>
</html>
I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>
//Dynamically getting the windows width
var windowwidth = $(window).width() - 50;
//dynamically assigning the windowwidth value to the class(dynamically)
$(window).load(function () {
$('.cntnt').css('width', windowwidth + 'px');
})
$("#menu-toggle").click(function(e) {
e.preventDefault();
$('.wrapper-content').toggleClass('cntnt');
});
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #4a4f55;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="wrapper-content">
<div class="container-fluid">
<a href="#menu-toggle" class="btn pull-left" id="menu-toggle" >
toggle menu
</a>
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
Hi, Im trying to Create a css class in jQuery & assigning it to another id in jQuery.
The main agenda is, I want to toggleClass a class in jQuery, which has a width of the $(window), on click on a function that class should be toggled to an id,
here's the code which I implemented, I've got no errors, but not output too.
Help me out please.
$(window).load(function () {
$('.cntnt').css('width', + windowwidth + 'px');
})
This is not class assignation, you just find elements with this class and set them style.
If you want to dynamically set class you should create new style element, something like:
$(window).load(function () {
$('body').prepend('<style>.cntnt { width:' + windowwidth + 'px }</style>')
})
In order to dynamically create a css class you can create a <style> element and append it to <head>.
$("<style>")
.prop("type", "text/css")
.html(".cntnt { width: " + windowwidth + "px; }")
.appendTo("head");
Or, if you only need the windowidth, you can simply create a class in static css with vw and calc. Which 100vw is equal to $(window).width() and calc calculate the value between different units. In this way you get the advantage of dynamically re-calculate the width whenever user resize the window. With javascript, you need to put your code inside $(window).resize event to do so.
.cntnt {
width: calc(100vw - 50px);
}
I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?
Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle
here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO
using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/
Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.