I'm making an animation atm and wanted to animate a text once when I scroll there. Here is the code. The code works all fine I don't know why it won't work here. But I saw that the text fires every time I scroll there. How can I prevent this? So it only fires once?
var fadeUpNormal = anime.timeline({
loop: false,
autoplay: false,
}).add({
targets: '.fade-up-normal',
translateY: [100,0],
opacity: [0,1],
translateZ: 0,
easing: 'easeOutExpo',
duration: 1400,
delay: 1000;
});
$('.scroll-trigger').on('inview', function(event, isInView) {
if (isInView) {
fadeUpNormal.play();
} else {}
});
div {
background-color: #444;
height: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
#wwrp1 {
color: black;
font-size: 3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
<div>
<p class="fade-up-normal scroll-trigger" id="wwrp1">This is an example</p>
</div>
</div>
The solution is just to use .one('inview') for .on('inview'). That was my bad!
I use Xampp to try GrapesJS, I downloaded GrapesJS from github then copied the rources to my HTDOCS folder, grap my Browser then hit Localhost :) it works, something like Web Builder appear and works as well, but how can I save the Edited Website using PHP ?,
I use intact INDEX.HTML found from GrapesJs github, only change it name to INDEX.PHP to work with PHP, so this is the codes I've been using
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<script src="dist/grapes.min.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color:rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: { autoload: 0 },
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
},{
name: 'Flex',
open: false,
buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
}
],
},
});
editor.BlockManager.add('testBlock', {
label: 'Block',
attributes: { class:'gjs-fonts gjs-f-b1' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
</script>
</body>
</html>
thanks for your help
This way worked for me.
First added a Save button to grapesjs panel.
editor.Panels.addButton('options',
[{
id: 'save-db',
className: 'fas fa-save',
command: 'save-db',
attributes: {
title: 'Save Changes'
}
}]
);
Then added a command for save button.
editor.Commands.add('save-db', {
run: function(editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
//storing values to variables
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
$.post("save.php", {
//you can get value in post by calling this name
"htmldata": htmldata,
"cssdata": cssdata,
success: function(data) {
alert(data);
console.log("Success");
},
});
}
});
In save.php
$editor_html_content = $_POST['htmldata'];
$editor_css_content = $_POST['cssdata'];
editor.on('component:add', options => {
var html = editor.getHtml();
var css = editor.getCss();
function create () {
$.ajax({
url:base_url+"/savepagedata.php",
type: "post",
data: {html_data: html , css_data:css },
success:function(result){
console.log(result);
}
});
}
});
why is the opacity not returning to 0 in function resetImg() ?
it returns the position correctly when function is called.
I'm trying to do this without jquery at the moment...
i'm trying to get the animation part down before implementing into my full game.
Animation = https://codepen.io/hamisakim/pen/oNzyKeR
Full game = https://codepen.io/hamisakim/pen/ExgLrKV?editors=1011
HTML
<h1 id='Main Header'> Rock Paper Scissors </h1>
<h2> Choose below to test your luck </h2>
<div class='buttons'>
<button id='rock'> ROCK </button>
<button id='paper'>PAPER </button>
<button id='scissors'> SCISSORS</button>
</div>
<h1 id='result'> </h1>
<div id='choiceImages'>
<image id='playerImg' src='https://www.rock-paper-scissors-game.com/i/rock.png'>
<image id='computerImg' src='https://www.rock-paper-scissors-game.com/i/scissors.png'>
</div>
CSS
body{text-align: center;}
.buttons {
position:relative;
}
#computerImg{
max-width: 30%;
display: inline-block;
padding: 0px 0px 0px 35px;
position:relative;
z-index: -1;
}
#playerImg {
max-width: 30%;
display: inline-block;
padding: 0px 35px 0px 0px;
position:relative;
z-index: 1;
}
JAVASCRIPT
function playerWinAnimate() {
document.getElementById('playerImg').animate([
//keyframes
{transform : 'translateX(0px)'},
{transform : 'translateX(250px)'}
],
{
duration: 1000,
iterations: 1,
fill: 'forwards',
},)
document.getElementById('computerImg').animate([
{opacity:1},
{opacity:0}, ],
{duration:1000,
delay: 1000,
iterations: 1,
fill: 'forwards'
}, )
}
playerWinAnimate();
function resetImg(){
document.getElementById('computerImg').style.opacity = 'initial';
document.getElementById('playerImg').style.left = '-200px';
}
document.getElementById("rock").addEventListener("click", resetImg);
document.getElementById("paper").addEventListener("click", resetImg);
document.getElementById("scissors").addEventListener("click", resetImg);
I wanted to have close button for every tooltip how can I have that?
Note: I don't want to mess up with design , that is why did not try much , Best solution I'm looking here
Below is demo:
tippy('#t1,#t2,#t3,#t4',{
content: "Error Message",
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
trigger:'manual',
placement:'bottom',
hideOnClick:false,
});
var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"},
{id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];
settings.forEach(function(sett){
var tip = document.querySelector(sett.id);
tippy(tip);
tip._tippy.set({content:"click x",placement:sett.pos});
tip._tippy.show();
});
div.tippy-dummy{
position: relative;
width: 220px;
height: 30px;
background: #333;
color: #fff;
}
div.tippy-dummy span{
position: absolute;
display: inline-block;
background: #715a5a;
right: 0;
top: 0;
}
.tooltip{
display:flex;
justify-content:space-between;
width: 90%;
}
.btn{
width: 90px;
height: 30px;
border: 2px solid #ccc;
border-radius: 6px;
}
.btn:hover{
cursor: pointer;
background:#f05a27;
}
.tooltip{
margin-top:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<h4>Expected output:</h4>
<div class="tippy-dummy">
Please click X to hide
<span>X</span>
</div>
<hr/>
<div class="tooltip">
<button id="t1" class="btn tippy" title="">top</button>
<button id="t2" class="btn tippy" title="">bottom</button>
<button id="t3" class="btn tippy" title="">Left</button>
<button id="t4" class="btn tippy" title="">Right</button>
</div>
for better view here is codepen: https://codepen.io/anon/pen/aPXKZM
Please help me thanks in advance!!
It's actually even easier than Gifford N.'s answer...
<button data-tippy-content="<span class="closeme">×</span>There are many like it but this one is mine!!!!!">
This is my button
</button>
const tippyInstance = tippy('[data-tippy-content]', {
allowHTML: true,
interactive: true,
onShow(instance) {
instance.popper.querySelector('.closeme').addEventListener('click', () => {
instance.hide();
});
},
onHide(instance) {
instance.popper.querySelector('.closeme').removeEventListener('click', () => {
instance.hide();
});
},
});
The action you are looking for is .hide().
To use this action you have to make a couple adjustments to your code:
Add interactive: true to tippy settings.
tippy('#t1,#t2,#t3,#t4',{
...
interactive: true,
...
});`
Assign the .hide(); action to the popper property in your settings.forEach function:
settings.forEach(function(sett){
...
tip._tippy.popper.onclick = function() {
tip._tippy.hide();
}
});
~
PROTIP:
If you want to hide the popper when clicking a specific element within the popper (X, for example) it just takes a little more markup:
Add some markup to the desired element <button class=\"hide\">X</button>
Use the element in the onclick:
settings.forEach(function(sett){
...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
tip._tippy.hide();
}
Updated Codepen: https://codepen.io/gnowland/pen/wvBzjym?editors=0010
I am using http://roundsliderui.com/demos.html round slider library. I want to show the editable textbox always show not hide. Thank you
Understand, you should supply the code and can get help or suggestions from people here. I took the example you provided and made some changes.
Here is a Working Example: http://jsfiddle.net/Twisty/Lorej7up/
HTML
<div class="slider-wrapper">
<div id="slider">
</div>
<input type="text" id="myToolTip" class="rs-input rs-tooltip-text" style="height: 27px; width: 32px;" />
</div>
CSS
.slider-wrapper {
position: relative;
}
.slider-wrapper input.rs-input {
position: absolute;
top: 95px;
left: 93px;
z-index: 100;
}
jQuery
function updateToolTip() {
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
}
$(function() {
$("#slider").roundSlider({
sliderType: "min-range",
radius: 110,
width: 10,
startAngle: 90,
value: "82",
showTooltip: false,
editableTooltip: false,
drag: updateToolTip,
change: updateToolTip
});
$("#myToolTip").val($("#slider").roundSlider("option", "value"));
$("#myToolTip").change(function() {
$("#slider").roundSlider("option", "value", $(this).val());
});
});