<html>
<head>
<title>lorem ipsum</title>
<style type="text/css">
body{
background-color:#222222;
margin:0px;
padding:0px;
}
#typed{
color:red;
font-size:150%;
float:left;
}
.cursor{
height:24px;
width:2px;
background:lawngreen;
float:left;
opacity:0;
animation:blink 0.75s linear infinite alternate;
}
#keyframes blink{
50% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
</head>
<body>
<div id="typed"></div>
<div class="cursor"></div>
</body>
<script type="text/javascript">
var i;
var txt='lorem ipsum';
var speed=50;
for (i=0; i<txt.length;i++){
setInterval(addLetter("typed"),speed);
}
function addLetter(word){
document.getElementById(word).innerHTML += txt.charAt(i);
i++;
}
</script>
</html>
I cannot see why it thinks it's wrong, but perhaps I'm just missing something. Chrome tells me that the error is an uncaught syntax error in the for loop, the error, it says, is the ")". I've been trying to figure it out all day long.
EDIT: What I'm trying to do is get the text in the variable, "txt" to pop up on screen as if being typed out. I fixed it with the below suggestion
Change , by ; in for loop.
for (i=0; i<txt.length;i++){
Also, remove the } before </script>.
Related
I'm trying to get ElementById from a txt file and pass it into marquee class. Do I need a javascript function for this?
Also, I can't get the white-space: nowrap to work. Here is what I have put together so far. The javascript function credit goes to Sid function readTextFile
function readTextFile(file){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span> Test .</span></h1>
</body>
</html>
Any help is much appreciated. I'm brand new to html, javascript, and css but I'm excited to learn.
Thank you!
You need to get span element and replace its content (I've added id attribute to span element for simplicity: compare first two lines in snippet - commented one is shorter). white-space: nowrap should be applied for span element.
Remove that <a> element and call your readTextFile in js snippet. Replace alert(allText) with document.getElementsByClassName("marquee")[0].children[0].innerHTML = allText (or make it simpler)
Demo below shows how to replace strings:
//document.getElementById("mytext").innerHTML = "some test"
document.getElementsByClassName("marquee")[0].children[0].innerHTML = "some test"
setTimeout(function(){
document.getElementById("mytext").innerHTML = "bla bla bla"
}, 7000)
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
white-space: nowrap;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span id="mytext">Need Text File String Here</span></h1>
</body>
</html>
I am trying to make the divs flip whenever I click on them. I'm not sure why it doesn't work. Please help.
Here is the demo of this code. http://langbook.co/testicles-1-2-flashcards/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
<div id="back">Box - Back</div>
<div id="front">Box - Front </div>
</div>
</body>
</html>
First, I would move your JS to the end of the page.
It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so:
var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));
To flip back, you could just keep the object's state in an attribute to know which side it's on. Also note that flip(vlib) will be called immediately; to wait for the click event, you'll need to pass a reference to the function:
vlib.addEventListener('click', flip);
Seems to work: JSFiddle
http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/css/css3_3dtransforms.asp
Not sure if you have tried this but this my solve your problem. Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve).
Hope this helps.
ex:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility
easy one CSS line :
animation:mymove 3s infinite;
where mymove is:
#keyframes mymove
{
from {transform:rotateY(0deg);}
to {transform:rotateY(360deg);}
}
#-moz-keyframes mymove /* Firefox */
{
from {-moz-transform:rotateY(0deg);}
to {-moz-transform:rotateY(360deg);}
}
#-webkit-keyframes mymove /* Opera, Safari, Chrome */
{
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-ms-keyframes mymove /* Internet Explorer */
{
from {-ms-transform:rotateY(0deg);}
to {-ms-transform:rotateY(360deg);}
}
example:
div#myDIV
{
animation:mymove 3s infinite;/* <== HERE */
/* Firefox */
-moz-animation:mymove 3s infinite;
-moz-animation-timing-function:linear;
/* Opera, Safari, Chrome */
-webkit-animation:mymove 3s infinite;
-webkit-animation-timing-function:linear;
}
You had a few mistakes with syntax and declarations in the JS part.
Hope this is what you are looking for:
https://jsfiddle.net/xrtvhvgf/2/
function flip(){
if(vlib_front.style.transform){
el.children[1].style.transform = "";
el.children[0].style.transform = "";
} else {
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
}
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');
el.addEventListener('click', flip);
I have been trying to get a fading background image script to work, but I am pretty noob at JS. The problem is that the fade effect works nicely in chrome, but the picture just shifts without a fade in Firefox and IE.
Here is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body style="margin:0; padding:0;">
<style>
.bg_img_slider{
min-height:530px;
background-image:url("a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;}
</style>
<script>
var newBg = [
'b.jpg',
'c.jpg',
'd.jpg'
];
var i = 0;
var rotateBg = setInterval(function(){
i++;
if(i > 2)
i=0;
$('.bg_img_slider').css({backgroundImage : 'url(' + newBg[i] + ')'}).fadeIn('slow', 1);
}, 3000);
</script>
<div class="bg_img_slider"></div>
</body>
</html>
Instead of using the jquery method fadeIn() you can use CSS3 transitions.
JSFIDDLE DEMO
.bg_img_slider {
min-height:530px;
background-image:url("http://texy.dk/a.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
-webkit-transition: background-image .6s ease-in;
transition: background-image .6s ease-in;
}
I'm quite new to Angular, so I'm affraid you will need to point in me right direction.
I'm trying to execute a CSS animation using AngularJS.
If you look at the original code, a CSS animation can be executed quite easily, see this plunker:
http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
But, the problem is that this is working through the css class property: sample-show-hide
Let's see the following HTML:
<body ng-app="ngAnimate">
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin- right:10px;"> Is Visible...
</label>
<div class="check-element" ng-class="{'sample-show-hide': }" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
</body>
But now, I want the class for the animation to set through the ng-class directive, but unfortunately, the animation doesn't work anymore then.
Please have a look at this plunker: http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview
I invested some time and I think I atleast partially solved your problems:
First things first, your plnkr links both link to the same plnkr and the same version, this isn't very helpfull as I couldn't really see the difference.
Additionally the latest version in your plnkr had some mistakes (e.g. not injecting ngAnimate into your angular app).
The main reason why your animation didn't work was actually your CSS code.
You should read up on how it works here.
I took a working CSS from this stackoverflow answer and used it in your code.
My code is now looking like this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example3-production</title>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link href="animations.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controller.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
</head>
<body ng-app="OfficeUI" ng-controller="OfficeUIController as OficeUI">
<div>
<label>
<input type="checkbox" style="float:left; margin-right:10px;" ng-click="isActive()"/>
Is Visible...
</label>
<div class="sample-show-hide" ng-class="'reveal-animation'" ng-show="trigger" style="clear:both;">
Visible...
</div>
</div>
</body>
</html>
controller.js :
var OfficeUI = angular.module('OfficeUI', ['ngAnimate']);
// Defines the AngularJS 'OfficeUI' controller.
OfficeUI.controller('OfficeUIController', ['$scope', function($scope) {
$scope.isActive = function(){
$scope.trigger = !$scope.trigger;
console.log($scope.trigger);
};
$scope.trigger = false;
}]);
animation.css :
body { font-family: 'Segoe UI'; color: #444; }
.sample-show-hide{
padding:10px;
border:1px solid black;
background-color:white;
}
.reveal-animation.ng-hide.ng-hide-add-active {
display: block !important;
}
.reveal-animation.ng-hide-remove {
-webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
-webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}
#-webkit-keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#keyframes enter_sequence {
0% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
#keyframes leave_sequence {
0% { opacity:1; }
100% { opacity:0; }
}
I forked (twice by accident :D ) your plnkr here.
I'm trying to figure out how to make a div pop-up with CSS and a small amount of JavaScript. I've gotten as far as being able to click a link, have a box pop up, and while it's up the screen around it is grey, and if you click the grey the pop-up goes away. However, I can't get it to fade in rather than just appear instantly. Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "block"
pop.style.display = "block"
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "none"
pop.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity = 50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#popup {
display:none;
left:100px;
top:100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
}
#cover-link {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div>
<div id="popup">
Some Words
</div>
Show
</body>
</html>
The important parts are these:
From the JavaScript:
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
From the CSS:
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
Everything appears to be working except the -webkit-transform:scale(.5, .5); is being ignored when the pop.style.webkitTransform = "scale(1, 1)" is in the JavaScript, and the -webkit-transition:all .5s ease-in-out; just isn't doing anything. If you think you know something that may work you can copy the block of code above and alter it; it's already a complete HTML file.
The idea is to get it to fade something like this does:
<html>
<head>
<style type="text/css">
.message {
left:100px;
top: 100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform: scale(.95, .95);
-webkit-transition: all .5s ease-in-out;
}
.message p {
padding:80px 0;
border-radius:3px;
}
.info:hover + .message {
opacity: 1;
-webkit-transform: scale(1, 1);
}
</style>
</head>
<body>
<div class="info">
<p>Hover</p>
</div>
<div class="message">
<p>A Simple Popup</p>
</div>
</body>
</html>
The main issue that you have is that you're moving from display: none to display: block. The transition won't work like that. Since you already have opacity to hide the div, and you're also using position: absolute, I don't think there's a good reason to not leave the div at display: block.
I also think you would be best served by moving the properties that you want the div to have when it's shown into a CSS class and just adding and removing that class during the appropriate triggers. That makes it easier to modify them in the future, too.
I created a jsBin with the recommended changes.