anime.js : Simple text animation won't show (with grid layout) - javascript

I am trying to animate a text in a grid layout using anime.js library, but the animation won't show. It only uses one HTML file.
The javascript:
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
The html tags to be animated:
<div class = "container">
<div class = "decor1">
<p class = "HLF">
HLF
</p>
</div>
</div>
How to solve this problem? Thanks.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
</head>
<style>
.tweets {grid-area: tweets; background: rgb(240, 240, 240, 0.5); padding: 40px;
margin: 15px; font-family: arial}
.quotes {grid-area: quotes; background: turquoise; padding: 20px;
margin: 15px; font-family: helvetica; color: white; font-size: 20px}
.decor1 {grid-area: decor1; background: rgb(50, 50, 50, 0.5); padding: 5px;
margin: 15px; font-family: helvetica; text-align: center}
.HLF { color: white; font-size: 200px; margin:1px}
.distributor { color: white; font-size: 20px; margin:1px}
.visual {grid-area: visual; background: rgb(0, 50, 200, 0.6); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px;
border: none; border-radius: 10px; color: white}
.product {grid-area: product; background: rgb(35, 35, 35, 0.7); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px; border: none;
border-radius: 10px; color: white}
.container {
display: grid;
grid-template-areas:
'tweets quotes decor1'
'tweets visual product';
background-color: rgb(0, 100, 0, 0.8);
padding: 100px;
}
.quote-1,
.quote-2,
.quote-3 {
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.quote-1{
animation-name: quote-1;
}
.quote-2{
animation-name: quote-2;
}
.quote-3{
animation-name: quote-3;
}
</style>
<body style = "background: white">
<div class = "container">
<div class = "tweets">
<center>
<a class="twitter-timeline" data-width="250" data-height="350" data-dnt="true" data-theme="dark" href="https://twitter.com/Herbalife24?ref_src=twsrc%5Etfw">Tweets by Herbalife24</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</center>
</div>
<div class = "quotes">
<p class = "quote-1">
"Tubuh kita memuat 65% air."
</p>
<p class = "quote-2">
"Tubuh kita memuat 65% air."
</p>
<p class = "quote-3">
"Tubuh kita memuat 65% air."
</p>
</div>
<div class = "decor1">
<p class = "HLF">
HLF
</p>
<p class = "distributor">
Independent Distributor
</p>
</div>
<button class = "visual" onclick = "alert('Under Development')"> Visualization </button>
<button class = "product"> Product </button>
</div>
</body>
</html>

A couple things:
The comments below your post appear to be recommending changes to import, I'm in agreement with them. I had to modify your import statement to point at a local copy of anime.min.js:
<script src="js/anime.min.js"></script>
You cannot script components that haven't been loaded by the DOM yet, so I moved your anime script block to the bottom of the HTML page, you had it 5 or so lines from the top.
I updated the target to be class .HLF which you specify - but this should probably be an id instead in your html.
<script>
anime({
targets: '.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true,
});
</script>
And the animation worked!

Related

Aframe texture control over individual entities

I was wondering how to set a texture on an entity but only that entity and then be able to place more by selecting texture buttons I can't get my code to work properly but I wanted to make it function a little more like minecraft than the original minecraft aframe demo did. If anybody can get my code to work it would be a real help. All the script that is commented out was because I wanted to find a better way to do whatever I was trying. Essentially I want to pick a texture in the menu at the bottom and then use that texture on my entities.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-controller-cursor-component#0.2.x/dist/aframe-controller-cursor-component.min.js"></script>
<script>
/**
* Snap entity to the closest interval specified by `snap`.
* Offset entity by `offset`.
*/
AFRAME.registerComponent('snap', {
dependencies: ['position'],
schema: {
offset: {type: 'vec3'},
snap: {type: 'vec3'}
},
init: function () {
this.originalPos = this.el.getAttribute('position');
},
update: function () {
const data = this.data;
const pos = AFRAME.utils.clone(this.originalPos);
pos.x = Math.floor(pos.x / data.snap.x) * data.snap.x + data.offset.x;
pos.y = Math.floor(pos.y / data.snap.y) * data.snap.y + data.offset.y;
pos.z = Math.floor(pos.z / data.snap.z) * data.snap.z + data.offset.z;
this.el.setAttribute('position', pos);
}
});
</script>
<script>/**
* Spawn entity at the intersection point on click, given the properties passed.
*
* `<a-entity intersection-spawn="mixin: box; material.color: red">` will spawn
* `<a-entity mixin="box" material="color: red">` at intersection point.
*/
AFRAME.registerComponent('intersection-spawn', {
schema: {
default: '',
parse: AFRAME.utils.styleParser.parse
},
init: function () {
const data = this.data;
const el = this.el;
el.addEventListener(data.event, evt => {
// Create element. (element create below v
const spawnEl = document.createElement('a-entity');
// Snap intersection point to grid and offset from center. (position)
spawnEl.setAttribute('position', evt.detail.intersection.point);
// Set components and properties.
Object.keys(data).forEach(name => {
if (name === 'event') { return; }
AFRAME.utils.entity.setComponentProperty(spawnEl, name, data[name]);
});
// Append to scene.
el.sceneEl.appendChild(spawnEl);
});
}
});</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 10,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<style>
.transparentBox {
width: 200px;
background-color: #6969697a;
margin-right: 600px;
border-radius: 10px;
border: 2px solid black;
}
html {
width: 800px;
height: 600px;
cursor: crosshair;
}
a-scene {
cursor: crosshair;
width: 800px;
height: 600px;
}
body {
cursor: crosshair;
width: 800px;
height: 600px;
}
.Container {
margin-right: 8px;
}
</style>
</head>
<body>
<!-- aframe overlay -->
<div class="Container" style="position:relative;">
<!-- <a-scene id="updateMe" inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector#master/dist/aframe-inspector.min.js"> -->
<a-scene embedded>
<a-assets>
<img id="groundTexture" src="floor.jpg">
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
<a-mixin id="voxel1"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Box.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel2"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Brick.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel3"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Steel.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel4"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Pcb.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel5"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Grass.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel6"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Ice.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
<a-mixin id="voxel7"
geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
material="id: theImage; src: Fabric.jpg; color: #696969; roughness: 1; metalness: 0"
snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
></a-mixin>
</a-assets>
<a-obj-model rotation="-90 45 0" position="0 2 0" src="tinker.obj" mtl="obj.mtl"></a-obj-model>
<a-cylinder id="ground" src="#groundTexture" radius="30" height="0.1"></a-cylinder>
<a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>
<!-- Camera. -->
<a-camera fly="true" position="0 0.75 15" wasd-controls="acceleration: 20" wasd-controls-enabled="true" fov="90" reverse-mouse-drag="false">
<a-cursor id="Save1" intersection-spawn="event: click; mixin: voxel1"></a-cursor>
<a-cursor id="Save2" intersection-spawn="event: click; mixin: voxel2"></a-cursor>
<a-cursor id="Save3" intersection-spawn="event: click; mixin: voxel3"></a-cursor>
<a-cursor id="Save4" intersection-spawn="event: click; mixin: voxel4"></a-cursor>
<a-cursor id="Save5" intersection-spawn="event: click; mixin: voxel5"></a-cursor>
<a-cursor id="Save6" intersection-spawn="event: click; mixin: voxel6"></a-cursor>
<a-cursor id="Save7" intersection-spawn="event: click; mixin: voxel7"></a-cursor>
</a-camera>
</a-scene>
<!-- /aframe overlay -->
<center>
<div style="position:absolute; margin-right:8px; top:0px; width:205px; height:180px; left:0px; z-index:1000;">
<div class="transparentBox">
<b><h1 color="#FFFFFF" id="time">10:00</h1></b>
<p style="font-size:20px;font-family:monospace;margin-top:-20px;">Camera Height:</p>
<h1><b><a>↑</a>~~<a>↓</a></b></h1>
<iframe src="250-milliseconds-of-silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay loop id="track">
<source src="Magic_Scout_-_Cottages.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><center>
<button class="button" id="myBtn">Menu</button>
</center>
</div>
<div id="myModal" class="modal">
<center>
<!-- Modal content -->
<div class="modal-content">
<span id="clickMe" type="button" value="clickme" onclick="startTimer()" class="close">×</span>
<center>
<p class="beginMenuText"><b>Welcome to SandBox!</b></p>
<p class="Text">WASD to move, Space place blocks.</p>
<p class="Text2">You have 10 min. before the game restarts and all is lost.</p>
<p class="Text2point5">Have fun...</p>
</center>
<p class="Text3"><b><u>Credits:</u></b></p>
<p class="Text4">All music by <b>Kevin MacLeod</b></p>
<p class="Text5"><b>Aframe</b> by the Aframe authors.</p>
<p class="Text6">(Licenced under the <b>MIT Licence</b>)</p>
<p class="Text7">Inspiration from other <b>WebVR Projects.</b></p>
<p class="Text8">Voxel textures can be changed using the menu at the <b>bottom</b>.</p>
<p class="Text9"><b>Enjoy!</b></p>
<div class="unmute" onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>
</div>
</center>
</div>
<div class="textureMenu">
<div class="textureBox" id="Kill1" ><img src="Box.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill2"><img src="Brick.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill3"><img src="Steel.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill4"><img src="Pcb.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill5"><img src="Grass.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill6"><img src="Ice.jpg" height="45" width="45"></div>
<p class="spacer">~</p>
<div class="textureBox" id="Kill7"><img src="Fabric.jpg" height="45" width="45"></div>
</div>
</div>
</center>
</div>
</body>
<head>
<!--<script>
document.getElementById('Kill1').addEventListener('click', function () {
var mixinEl = document.getElementById('Save1');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel1');
}
};
</script>
<script>
document.getElementById('Kill2').addEventListener('click', function () {
var mixinEl = document.getElementById('Save2');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel2');
}
};
</script>
<script>
document.getElementById('Kill3').addEventListener('click', function () {
var mixinEl = document.getElementById('Save3');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel3');
}
};
</script>
<script>
document.getElementById('Kill4').addEventListener('click', function () {
var mixinEl = document.getElementById('Save4');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel4');
}
};
</script>
<script>
document.getElementById('Kill5').addEventListener('click', function () {
var mixinEl = document.getElementById('Save5');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel5');
}
};
</script>
<script>
document.getElementById('Kill6').addEventListener('click', function () {
var mixinEl = document.getElementById('Save6');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel6');
}
};
</script>
<script>
document.getElementById('Kill7').addEventListener('click', function () {
var mixinEl = document.getElementById('Save7');
if (mixinEl.getAttribute('mixin') === 'voxel') {
mixinEl.setAttribute('mixin',: 'voxel7');
}
};
</script>-->
<style>
.spacer {
float: left;
}
.textureBox {
width: 47px;
height: 47px;
border: 2px solid black;
float: left;
}
.textureMenu {
height: 50px;
width: 412px;
padding: 10px;
background-color: #6969697a;
border: 2px solid black;
border-radius: 10px;
display:inline-block;
position: absolute;
left: 200%;
top: 313%;
transform: translate(-50%, -50%);
}
.Text9 {
font-size: 25px;
font-family: monospace;
margin-top: -13px;
border-bottom: 2px dashed black;
}
.Text8 {
font-size: 25px;
font-family: monospace;
margin-top: -13px;
}
.Text7 {
font-size: 18px;
font-family: monospace;
margin-top: -13px;
border-bottom: 2px dashed black;
}
.Text6 {
font-size: 10px;
font-family: monospace;
margin-top: -20px;
line-height: 1.3;
}
.Text5 {
font-size: 15px;
font-family: monospace;
margin-top: -22px;
line-height: 1.3;
}
.Text4 {
font-size: 15px;
font-family: monospace;
margin-top: -27px;
line-height: 1.3;
}
.Text3 {
font-size: 20px;
font-family: monospace;
margin-top: -30px;
line-height: 1.3;
}
.Text2point5 {
font-size: 25px;
font-family: monospace;
margin-top: -30px;
line-height: 1;
}
.Text2 {
font-size: 25px;
font-family: monospace;
margin-top: -30px;
line-height: 1;
}
.Text {
font-size: 25px;
font-family: monospace;
margin-top: -40px;
}
.beginMenuText {
font-size: 45px;
font-family: monospace;
margin-top: auto;
border-bottom: 3px dashed black;
}
.unmute {
background-image: url(http://franriavilla.in/images/unmute.png);
background-size: cover;
width: 35px;
height: 30px;
cursor: pointer;
}
.mute {
background-image: url(http://franriavilla.in/images/mute.png);
}
/* The Modal (background) */
.modal {
display: initial; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
width: 800px;
margin-right: 8px;
margin-top: 8px;
}
/* Modal Content/Box */
.modal-content {
background-color: #94989e;
margin-top: 8px; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 500px; /* Could be more or less, depending on screen size */
border-radius: 20px;
z-index: 20000;
}
/* The Close Button */
.close {
color: #FFF;
float: right;
margin-top: -15px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.button {
border-radius: 25px;
font-size: 20px;
color: white;
background-color: #6969697a;
border-color: white;
}
</style>
</head>
</html>
Switching textures can be done in a couple of ways
aframe primitives, like <a-box>, or <a-sphere> entities are an easy case. Just change the material.src attribute
el.setAttribute('material', 'src', newTexture)
models can be quite harder to deal, as you need to switch the mesh.map.texture property (possibly on all childs, not only one mesh).
var mesh = this.el.getObject3D('mesh')
var loader = new THREE.TextureLoader();
loader.load( url, (texture) => {
// onLoad callback
mesh.material.map = texture
mesh.material.needsUpdate = true
this.switch = !this.switch
}
)
The Selection might be done in a milion ways.
At first i wanted to store the information about the texture, and access it when a <a-box> is clicked, but a simple way would be to have a couple of images
<img class=".images" ....>
<img class=".images" ....>
and a component on each aframe primitive which would be:
detecting clicks on those images -> storing the information -> using it when we are clicked:
detecting clicks on images:
var els = document.getElementsByClassName("images");
Array.from(els).forEach((el) => {
el.addEventListener('click', (e)=>{
this.selectedTexture = e.target.src
})
});
applying texture when clicked:
this.el.addEventListener('click', (e) => {
if (!this.selectedTexture) {
return
}
this.el.setAttribute("material", "src", this.selectedTexture)
})
This fiddle contains all the above. Two boxes are switching textures by themselves, and the rest will apply the selected image as texture.

Aligning items in a table

I made a "To-List" with two icons that animate on the side. the icon on the right is not in the table. So when animating you can see it moving beyond the table. I can't understand why? any help please?
Thank you!
Hi, here is the fiddle:
https://jsfiddle.net/rggo2tmv/
As you can see, the garbage-bin icon disappears inside the table while the other icon (on the right) continues outside the table.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Project</title>
<!-- local css file sheet-->
<link rel="stylesheet" type="text/css" href="assets\css\todo.css">
<!-- Local JQuery js file-->
<script type ="text/javascript" src="assets/js/lib/jquery-3.1.0.min.js"></script>
<!-- googel fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!-- howel sounds -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>
<!-- Paper -->
<script type="text/javascript" src="papaer\dist\paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
<!-- two numbers are placing, last number is a radious-->
var circles = [];
var colors = ['blue', 'red', 'orange', 'purple'];
<!-- //DEFINING AN OBJECT -->
var keyData = {
a: {
color: 'purple',
},
b: {
color: 'green',
},
c: {
color: 'yellow',
},
d: {
color: 'orange',
},
e: {
color: 'NavajoWhite',
},
f: {
color: 'yellow',
},
g: {
color: 'orange',
},
h: {
color: 'grey',
},
i: {
color: 'SpringGreen',
},
j: {
color: 'black',
},
k: {
color: 'white',
},
l: {
color: 'darkgrey',
},
m: {
color: 'darkblue',
},
n: {
color: 'darkblue',
},
o: {
color: 'yellow',
},
p: {
color: 'cyan',
},
q: {
color: 'Maroon',
},
r: {
color: 'Red',
},
s: {
color: 'pink',
},
t: {
color: 'Salmon',
},
u: {
color: 'cyan',
},
v: {
color: 'FireBrick',
},
w: {
color: 'Tan',
},
x: {
color: 'Brown',
},
y: {
color: 'Olive',
},
z: {
color: 'YellowGreen',
},
};//closes keyData
function onKeyDown(event) {
if(keyData[event.key]){ //if key is defined
keyData[event.key].color;
<!-- will calc the max size of visible canvas-->
var maxPoint = new Point(view.size.width, view.size.height);
<!-- random is between 0 and 0.99 -->
var randomPoint = Point.random();
<!-- so multiplying max and a random decimal nmber will give us random locaiton inside the canvas -->
var point = maxPoint * randomPoint;
var newCircle = new Path.Circle(point, 200);
newCircle.fillColor = keyData[event.key].color;
<!-- adds the circle to the array -->
circles.push(newCircle);
}//if
};
function onFrame(event) {
<!-- // Each frame, change the fill color of the path slightly by
// adding 1 to its hue: -->
for(var i = 0; i<circles.length; i++){
circles[i].fillColor.hue += 1;
circles[i].scale(.955);
};
};
</script>
</head>
<body>
<div id="container">
<h1>To-Do List <button <i class="fa fa-plus" aria-hidden="true"></i> </button></h1>
<input type="text" placeholder="Add New To-Do">
<!-- span is the button and its inside the li which contains the text -->
<!-- added table to each so they won't all aniamte toghther -->
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
</div>
<canvas id="myCanvas" resize></canvas>
<!-- Javascript -->
<!-- //icons -->
<script src="https://use.fontawesome.com/9430f1a1cb.js"></script>
<!-- local javascript -->
<script type="text/javascript" src="assets/js/todo.js"></script>
</body>
</html>
Javascript:
///// check-off and remove spicific to-do by clicking or restore it to not-done-yet
//will add/remove class "completed" - grey and line-through
$("div").on("click", "span.spanRight", function(){
$(this).parent().parent().toggleClass("completed"); //if class exists will remove and the opposite according to aprent from span.spanRight
});
var sound = new Howl({
src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
});
//click on delete button to remove to-do
$("div").on("click", "span.spanLeft", function(){
//will remove the to-do, which its li is the parent element of the span
$(this).parent().parent().fadeOut(500, function() //this here refers to the span, but now because of parent()
//fadeOut will not remove only hide element, so we add remove()
{$(this).remove();}); //this refers to the parent
event.stopPropagation(); //will stop the toggle to "completed" class
});
/////creation of new to-do
//event on key press. When we click "enter" it will add the new to-do (input)
$("input[type='text'").keypress(function(){ //only if input is 'text' it will select the input
if (event.which === 13){//if "enter" is clicked in input field
//grabbing text from input
var todoText = $(this).val(); //takes value that inside input
//create a new li and add to ul
if( todoText!== ''){
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + todoText + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
}
}
});
/////Add button
// selecting the icon
$(".fa-plus").on("click", function() {
if ( $("input").val() === "") {
// empty
$("input").focus();
} else { //make it do enter key /simulate an enter key, sends the input value and clears the input field (and value)
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 13;
$("input").trigger(press);
//wil ladd input value to feild
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + $("input").val() + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
} //else
$("input").val('');
});
CSS:
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*layer index*/
z-index: -5;
}
body{
height: 100%;
margin: 0px;
background: linear-gradient(to left, #16BFFD , #CB3066);
}
#container {
width: 360px;
/*to center:*/
margin: 200px auto 200px auto;
/*slight black shadow around*/
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
background: #e6f3ff;
/**/
}
tbody, table {
/*removes bulletpoints*/
padding: 0;
border: none;
margin: 0;
width: 100%;
height: 100%;
/*removes annoying border from table that broswer creates*/
border-collapse:collapse;
background-color: white;
}
tr {
color: #666;
height: 40px;
/*centers the text*/
line-height: 40px;
width: 100%;
}
/*every second li will get this background color IMPORTANT*/
tr:nth-child(2n){
background: #f7f7f7;
}
td {
padding: 0;
margin: 0;
height: 100%;
border: none;
width: 20px;
}
/*mae the delete button appear. animated at span*/
tr:hover span{
/*40px so we'll see the icons which were set to 0 at start*/
width: 40px;
opacity: 1.0;
border: rgb(0, 0, 0, 0,);
}
span {
width: 0%;
padding: 0;
margin: 0;
}
.spanLeft {
background: #e74c3c;
height: 40px;
margin-right: 20px;
margin-left: 0px;
float: left;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 1;
}
.spanRight {
background: blue;
height: 40px;
margin-right:0px;
margin-left: 20px;
float: right;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 0;
}
input {
padding: 13px 13px 13px 20px;
font-size: 16px;
background-color: #f7f7f7;
width: 100%;
/*box sizing includes the padd, margin etc*/
box-sizing: border-box;
/*takes a way the small gaps around input*/
border: 3px solid rgba(0,0,0,0);
}
/*pnly when focued on an input*/
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
.completed {
color: grey;
text-decoration: line-through;
}
/*the plus sign*/
.fa-plus{
background: none;
border: none;
float: right;
}
h1 {
color: white;
text-transform: uppercase;
background: #2980b9;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
/*a google font*/
font-family: 'Roboto', sans-serif;
}
The icon inside the span element that you animate, doesn't "shrink" with the span as you might expect. It is shown to the right of the 0 width span instead (i.e. it overflows). You have the same effect both on the left and right side which is visible if you change the color of the icons.
Span is an inline element so it normally doesn't have the overflow property but you can use display: inline-block to display it with a given width and height. Use overflow: hidden to hide the icon when squeezing the width of the span element.

How to made refresh-able counter?

I'm beginner in JS. I have animated numbers. Works good, but i want my counters refresh every time, when scrolling page down.
So fiddle:
if ($('#animated-counter').length) {
$('#animated-counter .count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
.count {
color: #fff;
font-size: 63px;
font-weight: bold;
line-height: 1.2;
display: block;
margin-bottom: 10px;
}
.animated-number-caption {
color: #ffffff;
font-size: 23px;
}
.animated-number {
background-color: rgba(25, 29, 32, .3);
padding: 50px 0;
text-align: center;
}
.animated-numbers-wrap {
background: linear-gradient(to bottom, rgba(52, 168, 23, 1) 0%, rgba(46, 133, 33, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="match" style="height:500px;"></div>
<div id="animated-counter" class="animated-numbers-wrap">
<div class="animated-numbers">
<div class="animated-number"><span class="count">200</span>
<h6><span class="animated-number-caption">Projects</span></h6>
</div>
<div class="animated-number"><span class="count">150</span>
<h6><span class="animated-number-caption">Projects</span></h6>
</div>
</div>
</div>
So i think, that it possible to make any refresh and waypoint(function(direction) and if (direction == 'down')...but i don't have any ideas. Help me please!

Using a Javascript font select inside a form

I'm currently using this script to select a font style, how would I include name="font_style" and id="font_style" to allow the selected font to be passed into a form and then submitted to the database.
Here is the script:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
Copyright (c) 2015 by VISIONCAN (http://codepen.io/visioncan/pen/xLijC)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<title>CodePen - font-select dropdown</title>
<style>
body {
background: #eee;
}
.font-dropdown {
width: 220px;
border-radius: 5px;
position: relative;
margin: 10px auto 0;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
outline: none;
}
.font-dropdown .label {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
font-size: 1.2em;
position: relative;
display: block;
padding: 0 10px;
height: 36px;
line-height: 36px;
z-index: 2;
white-space: nowrap;
overflow: hidden;
}
.font-dropdown .label:after {
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
position: absolute;
width: 0;
height: 0;
content: "";
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #ccc;
left: auto;
right: 11px;
bottom: 13px;
}
.font-dropdown .dropdown-list {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
border-radius: 5px;
max-height: 66.66667px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
position: absolute;
z-index: 1;
left: 0;
top: 0;
border: 1px solid #ccc;
background-color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
visibility: hidden;
}
.font-dropdown.active .dropdown-list {
max-height: 200px;
top: 37px;
opacity: 1;
visibility: visible;
}
.font-dropdown.active .label:after {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.font-dropdown li {
padding: 0 10px;
font-size: 1.4em;
line-height: 1.5em;
white-space: nowrap;
overflow: hidden;
}
.font-dropdown li:hover {
color: #fff;
background-color: #2689d6;
}
.font-dropdown .sel {
background-color: #f0f0f0;
color: #2689d6;
}
</style>
<script>
window.console = window.console || function(t) {};
window.open = function(){ console.log('window.open is disabled.'); };
window.print = function(){ console.log('window.print is disabled.'); };
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
</head>
<body>
<div ng-app="fdApp">
<div class="font-dropdown" tabindex="1" fd-font-dropdown>
<span class="label" ng-style="{{'fontslist[selectedIdx].style'}}">{{fontslist[selectedIdx].name}}</span>
<ul class="dropdown-list">
<li ng-repeat="font in fontslist" ng-click="changeFont($index)" ng-class="{'sel': $index == selectedIdx}" ng-style="{{font.style}}">
{{font.name}}
</li>
</ul>
</div>
</div>
<script src='http://code.angularjs.org/1.2.0-rc.3/angular.min.js'></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage('resize', "*");
}
</script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>
<script>
(function () {
var app;
window.WebFontConfig = { google: { families: [] } };
app = angular.module('fdApp', []);
app.controller('FontDropdownCtrl', function ($scope) {
var WEBFONTAPI;
WEBFONTAPI = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
this.FONTSLIST = [
{
name: 'Source Sans Pro',
face: 'Source+Sans+Pro:900italic',
style: {
fontFamily: 'Source Sans Pro',
fontWeight: 900,
fontStyle: 'italic'
}
},
{
name: 'Quattrocento Sans',
face: 'Quattrocento+Sans',
style: { fontFamily: 'Quattrocento Sans' }
},
{
name: 'Ubuntu',
face: 'Ubuntu:700',
style: { fontFamily: 'Ubuntu' }
},
{
name: 'Arizonia',
face: 'Arizonia',
style: { fontFamily: 'Arizonia' }
},
{
name: 'Lora',
face: 'Lora:700',
style: {
fontFamily: 'Lora',
fontWeight: 700
}
},
{
name: 'Sansita One',
face: 'Sansita+One',
style: { fontFamily: 'Sansita One' }
},
{
name: 'Armata',
face: 'Armata',
style: { fontFamily: 'Armata' }
},
{
name: 'Black Ops One',
face: 'Black+Ops+One',
style: { fontFamily: 'Black Ops One' }
},
{
name: 'Russo One',
face: 'Russo+One',
style: { fontFamily: 'Russo One' }
}
];
return this.loadFonts = function () {
var font, s, wf, _i, _len, _ref;
_ref = this.FONTSLIST;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
font = _ref[_i];
WebFontConfig.google.families.push(font.face);
}
wf = document.createElement('script');
wf.src = ('https:' === document.location.protocol ? 'https:' : 'http:') + WEBFONTAPI;
wf.type = 'text/javascript';
wf.async = 'true';
s = document.getElementsByTagName('script')[0];
return s.parentNode.insertBefore(wf, s);
};
});
app.directive('fdFontDropdown', function () {
return {
restrict: 'A',
controller: 'FontDropdownCtrl',
link: function (scope, element, attr, Ctrl) {
Ctrl.loadFonts();
scope.fontslist = Ctrl.FONTSLIST;
scope.selectedIdx = Math.floor(Math.random() * scope.fontslist.length);
scope.changeFont = function (idx) {
scope.selectedIdx = idx;
return console.log(idx);
};
return element.bind('click', function () {
return element.toggleClass('active');
});
}
};
});
}.call(this));
//# sourceURL=pen.js
</script>
</body>
</html>
Could you please tell me if I'm doing something wrong or what I should add?
Many thanks
In the fd-font-dropdown-div, you should include an <input />-element that will hold the selected font in the value attribute.
In the changeFont-function you're already setting the selectedIdx value, so this should do the trick:
<input type="hidden" name="font" value="{{selectedIdx}}" />
If you then place the entire fd-font-dropdown-dev in a form, the value of the font-input will be sent with it.
So, it would look something like this:
<form action="..." method="...">
<div ng-app="fdApp">
<div class="font-dropdown" tabindex="1" fd-font-dropdown>
<input type="hidden" name="font" value="{{selectedIdx}}" />
<span class="label" ng-style="{{'fontslist[selectedIdx].style'}}">{{fontslist[selectedIdx].name}}</span>
<ul class="dropdown-list">
<li ng-repeat="font in fontslist" ng-click="changeFont($index)" ng-class="{'sel': $index == selectedIdx}" ng-style="{{font.style}}">
{{font.name}}
</li>
</ul>
</div>
</div>
<input type="submit" value="Submit the form" />
</form>

.stop on .mouseover or .hover

I can't figure out how to stop and resume the slide on a mouseover or hover occurrence. I basically want to stop all the scripts when .mouseover or .hover is triggered. Can anyone help me on this?
Edit: Code should work if you simply copy paste it, it is all hosted externally
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can trigger a custom event named "stop" on carouFredSel component If you want to stop the slider.
$('#slider').trigger("stop");
And trigger a custom event named "play" with a extra parameter true to resume the slider
$("#slider").trigger("play",true);
For example:
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>
Hope this is helpful for you.

Categories

Resources