I couldnt find any answers on stack overflow to this specific question. I am trying to use pure javascript ONLY, so please no jquery answers.
So I posted all of my code as a general reference but my problem I believe lies in the javascript section. My question is, how can I make it so that my div "signup" is unclickable right AFTER it is clicked ONCE?
I tried putting a disable statement before frame and fadeOut are called inside the HideLogin() function. I also tried with css pointer-events. Nothing works and everytime I click SignUp, the animations repeat. Thank you in advance for the help.
function HideLogin() {
var login = document.getElementById("login");
var SignUpSheet = document.getElementById("SignUpSheet");
var titlecard = document.getElementById("titlecard");
var signup = document.getElementById("signup");
SignUpSheet.style.display = "block";
titlecard.style.display = "block";
frame(signup);
fadeOut(login);
/*fadeIn(document.getElementById("SignUpSheet"));
fadeIn(document.getElementById("titlecard")); */
}
function frame(signup) {
var pos = 125;
var id = setInterval(function() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
signup.style.top = pos + 'px';
}
}, 1);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 20);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.display = "block";
op += 0.1;
}, 20);
}
body,
html {
min-height: 100%;
}
body
/* Background handeling*/
{
color: white;
background: url(images/Hunter.jpg) center no-repeat;
background-size: cover;
background-color: #444;
}
/*------------------------------------------------------------- */
#logBox
/*Div that holds two links */
{
position: relative;
//border: 2px solid white;
height: 300px;
width: 300px;
margin-left: 70px;
margin-top: 50px;
}
#login
/* login link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#login:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
#signup
/* sign up link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: 125px;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#signup:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
/*--------------------------------------------------------------- */
/* Div that holds two sheets */
#LogInSheet {
display: none;
}
#LoginTitle {}
#SignUpSheet {
display: none;
}
#SignUpTitle {}
/*--------------------------------------------------------------- */
#titlecard
/*title display */
{
position: absolute;
display: none;
bottom: 0px;
right: 50px;
//border: 2px solid white;
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 45px;
color: gray;
text-align: center;
font-family: papyrus;
text-shadow: 2px 2px black;
}
<!doctype html>
<html>
<head>
<title>The Prime Legion</title>
<link rel="stylesheet" type="text/css" href="page1.css">
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<div id="logBox">
<div id="login" onclick="HideSignin()">
Log In
</div>
<div id="signup" onclick="HideLogin()">
Sign Up
</div>
</div>
<div id="LogInSheet">
<div id="LoginTitle">
<p>
<h4>Hello</h4>
</p>
</div>
</div>
<div id="SignUpSheet">
<div id="SignupTitle">
<p>
<h4>Welcome</h4>
</p>
</div>
</div>
<div id="titlecard">
<p>
<h1>The Prime Legion</h1>
</p>
</div>
</body>
</html>
Unless you have a particular need to use <div>s for your buttons, you could change the HTML to use <button> elements instead. That way you could disable it using the disabled attribute and it should prevent any further clicks without having to store and track any additional JavaScript variables.
<button id="signup" onclick="HideLogin()">Sign Up</button>
function HideLogin() {
document.getElementById("signup").disabled = true;
...
}
I would suggest the following:
define a global variable loginCliked=false
then in your HideLogin function:
HideLogin = function(){
if(!loginClicked){
loginClicked=true;
// Do everything else
}
}
So that with the first click it will set loginClicked to true. If you click the button for the second time it does nothing
Related
I am developing a project, and I made a custom input element. The problem is that whenever I try to add text, it shifts to the next line, so I was making it stop and shifting the position whenever input is added. I am making it go to the right whenever input is added(in my project, you can only add 1 text at a time). For the first few times, it works, but after 4 inputs, the space between the cursor(made by me/custom) and the closest text becomes more than it should be, for now, for a new input, the code adds 5px to the current margin, and the problem occurs, if I add 4px, the text moves too far. Is there any way that I can make my custom cursor move just as needed for it to look good.
Code(Note: I have code that is not used/is not needed, but I am scared that if I remove anything, something will go wrong, also you need to have a full page to see the cursor, else you can't see it, and the problem with it going below is something I have to solve once this problem is solved):
<!DOCTYPE html>
<html style="background-color:black; margin:0;padding:0;" lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"/>
<link rel="icon" href="icon.png"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="Description"/>
<title>MyTitle</title>
<style>
a{
color: inherit;
text-decoration: none;
}
*{
margin:0;
padding:0;
}
#heading{
color: white;
text-align: center;
font-size: 24px;
font-weight: 420 bold;
font-family: sans-serif;
text-shadow: 2px 2px red;
margin-right: 10px;
margin-top: 20px;
}
#description{
color: green;
text-align: center;
font-size: 19px;
font-weight: 69 bold;
font-family: serif;
text-shadow: 1px 1px white;
margin-right: 10px;
margin-top: 20px;
}
#cursor{
text-align: initial;
position: absolute;
left: 0;
font-weight: 35;
font-size: 25px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#field{
color: white;
text-align: center;
font-size: 20px;
}
#fieldDiv{
background-color: #968786;
text-align: center;
width: 100%;
height: 28px;}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#cursorContainer{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#bton{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<h1 id="heading">
Heading
</h1>
<p id="description">Description</p>
<div id="fieldDiv">
<p id="field"></p><p id="cursorContainer" onclick="hideCursor()"><span id="cursor">|</span></p>
</div>
<br/>
<button id="bton" onclick="change();">
<!--Always add the script on the bottom of the BODY tag since it contains the script-->
<script type="text/javascript">
var marginNum = screen.width/2;
const screenWidth = screen.width;
function checkCtrlA(){
var ctrlPressed = false;
window.addEventListener("keydown", function(e){
if(e.keyCode == 17){
ctrlPressed = true;
}
});
if(ctrlPressed){
window.addEventListener("keydown", function(e){
if(e.keyCode == 65){
hideCursor();
}
})
}
}
window.onload = function(){
const cursor = document.getElementById("cursor");
const widthNeeded = innerWidth/2;
cursor.style.marginLeft = widthNeeded.toString() + "px";
cursor.style.cursor = "default";
};
const divToHide = document.getElementById("fieldDiv");
divToHide.onclick = hideCursor;
function printf(val){
console.log(val);
}
document.getElementById("fieldDiv").addEventListener('click', function(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
});
document.getElementById("fieldDiv").addEventListener("mouseover", function(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
});
document.getElementById("fieldDiv").addEventListener("mouseout", function(){
const element = document.getElementById("cursor");
element.style.visibility = "visible";
});
var currentText = document.getElementById("field").textContent;
function change(){
movePosCursor();
currentText = document.getElementById("field").textContent += "a";
document.getElementById("cursor").style.visibility = "visible";
}
function movePosCursor(){
const element = document.getElementById("cursor");
marginNum += 5;
var widthInPx = marginNum.toString() + "px";
element.style.marginLeft = widthInPx;
}
function hideCursor(){
const element = document.getElementById("cursor");
element.style.visibility = "hidden";
}
checkCtrlA();
</script>
</body>
</html>
Looking at this codepen, most of it I grok. But a couple of things I don't understand:
How does the <code> element stay perfectly on top of the <textarea>? I would expect it to be below the textarea looking at the HTML code.
How is the cursor staying so well-aligned with the text such that it functions like the type of cursor in a word document? The cursor even aligns well with the text when I copy and paste the text. Is it the emmet dependency that's helping?
Here is the code:
HTML
<div class="editor-holder">
<ul class="toolbar">
<li><i class="fa fa-indent"></i></li>
<li><i class="fa fa-expand"></i></li>
</ul>
<div class="scroller">
<textarea class="editor allow-tabs"><div class="Editable Textarea">
<h1>This is a fully editable textarea which auto highlights syntax.</h1>
<p>Type or paste any code in here...</p>
<div>
<?php
var simple = "coding";
?>
<script>
with = "Tab or double space functionality";
</script></textarea>
<pre><code class="syntax-highight html"></code></pre>
</div>
</div>
(S)CSS
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: relative;
background: rgb(114, 195, 195);
}
.editor-holder{
width: 800px;
height: 500px;
margin-top: 50px;
border-radius: 3px;
position: relative;
top: 0;
margin-left: -400px;
left: 50%;
background: #1f1f1f !important;
overflow: auto;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-in-out;
&.fullscreen{
width: 100%;
height: 100%;
margin: 0;
left: 0;
}
.toolbar{
width: 100%;
list-style: none;
position: absolute;
top: -2px;
margin: 0;
left: 0;
z-index: 3;
padding: 8px;
background: #afafaf;
li{
display: inline-block;
}
a{
line-height: 20px;
background: rgba(144, 144, 144, 0.6);
color: grey;
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.28);
display: block;
border-radius: 3px;
cursor: pointer;
&:hover{
background: rgba(144, 144, 144, 0.8);
}
&.active{
background: rgba(144, 144, 144, 0.8);
box-shadow: none;
}
}
i{
color: #565656;
padding: 8px;
}
}
textarea, code{
width: 100%;
height: auto;
min-height: 450px;
font-size: 14px;
border: 0;
margin: 0;
top: 46px;
left: 0;
padding: 20px !important;
line-height: 21px;
position: absolute;
font-family: Consolas,Liberation Mono,Courier,monospace;
overflow: visible;
transition: all 0.5s ease-in-out;
}
textarea{
background: transparent !important;
z-index: 2;
height: auto;
resize: none;
color: #fff;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
&::-webkit-input-placeholder{
color: rgba(255, 255, 255, 1);
}
&:focus{
outline: 0;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
code{
z-index: 1;
}
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
code{
background: #1f1f1f !important;
color: #adadad;
.hljs {
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
padding: 0.5em
}
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #6897BB
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #cc7832
}
.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #629755
}
.hljs-comment,
.hljs-quote {
color: #808080
}
.hljs-meta {
color: #bbb529
}
.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #6A8759
}
.hljs-section,
.hljs-title,
.hljs-type {
color: #ffc66d
}
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e8bf6a
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}
}
}
JavaScript
var tabCharacter = " ";
var tabOffset = 2;
$(document).on('click', '#indent', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
if(self.hasClass('active'))
{
tabCharacter = "\t";
tabOffset = 1;
}
else
{
tabCharacter = " ";
tabOffset = 2;
}
})
$(document).on('click', '#fullscreen', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
self.parents('.editor-holder').toggleClass('fullscreen');
});
/*------------------------------------------
Render existing code
------------------------------------------*/
$(document).on('ready', function(){
hightlightSyntax();
emmet.require('textarea').setup({
pretty_break: true,
use_tab: true
});
});
/*------------------------------------------
Capture text updates
------------------------------------------*/
$(document).on('ready load keyup keydown change', '.editor', function(){
correctTextareaHight(this);
hightlightSyntax();
});
/*------------------------------------------
Resize textarea based on content
------------------------------------------*/
function correctTextareaHight(element)
{
var self = $(element),
outerHeight = self.outerHeight(),
innerHeight = self.prop('scrollHeight'),
borderTop = parseFloat(self.css("borderTopWidth")),
borderBottom = parseFloat(self.css("borderBottomWidth")),
combinedScrollHeight = innerHeight + borderTop + borderBottom;
if(outerHeight < combinedScrollHeight )
{
self.height(combinedScrollHeight);
}
}
// function correctTextareaHight(element){
// while($(element).outerHeight() < element.scrollHeight + parseFloat($(element).css("borderTopWidth")) + parseFloat($(element).css("borderBottomWidth"))) {
// $(element).height($(element).height()+1);
// };
// }
/*------------------------------------------
Run syntax hightlighter
------------------------------------------*/
function hightlightSyntax(){
var me = $('.editor');
var content = me.val();
var codeHolder = $('code');
var escaped = escapeHtml(content);
codeHolder.html(escaped);
$('.syntax-highight').each(function(i, block) {
hljs.highlightBlock(block);
});
}
/*------------------------------------------
String html characters
------------------------------------------*/
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/*------------------------------------------
Enable tabs in textarea
------------------------------------------*/
$(document).delegate('.allow-tabs', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ tabCharacter
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + tabOffset;
}
});
How does code and textarea elements stay aligned?
They are aligned because in the CSS they both use the same style which outlines the positioning of both elements. They both use position: absolute and the same top and left properties so stay in the same position.
See here https://www.w3schools.com/css/css_positioning.asp
In terms of the z-axis you can see that code has a z-index of 1 while textarea has 2 so text area stays on top.
How is the cursor staying aligned with the text?
There is no javascript acting on the cursor here. If you were to have any textarea in html the cursor would align with the text.
I'm working on transitions by using javascript. But i want to display element to none when the transition is end. I'm using addEventListener on element but function doesn't execute.
var fun;
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
(function(){
var i=0,
containterget = document.querySelector('.container');
elementGet = document.querySelector('.Number');
fun = function(){
i++;
elementGet.innerHTML = i;
elementGet.style.transform = 'translateX('+(containterget.offsetWidth - 40 -35)+'px)';
elementGet.addEventListener(transitions,function(event){
console.log("Transition End Execute");
elementGet.style.display='none';
} );
};
})();
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
border:1px solid green;
max-width:85%;
margin: 2em auto 0;
}
button{
background-color:transparent;
padding: 15px;
margin:0;
color:#000;
border:2px solid #F44336;
text-align: center;
outline: 0;
transition: opacity 0.3s;
}
button:hover{
background-color:#F44336;
color: white;
opacity :.75;
}
button:hover{
cursor: pointer;
transition: opacity .4s;
}
span{
display: inline-block;
transition: transform 1.5s ease;
}
.Number{
font-size: 4em;
border:1px solid black;
/*transform: translateX(0);*/
}
.EndBoundry{
float: right;
font-size: 4em;
border:1px solid black;
}
.contain:after{
content: "";
display: table;
clear: both;
}
.btn{
text-align: center;
margin: 2em 0;
}
<div class="container contain">
<span class="Number">1</span>
<span class="EndBoundry">E</span>
</div>
<div class="btn">
<button onclick="fun()">Number Transition Click</button>
</div>
The following Snippet demonstrates the transitionend event. All details are commented in Snippet.
SNIPPET
// Reference the section#area and input#gone
var area = document.getElementById('area');
var chx = document.getElementById('gone');
// Register click event on #area call offON()
area.addEventListener('click', offON, false);
function offON(e) {
// Determine the clicked button
if (e.target !== e.currentTarget) {
var tgt = e.target;
// Switch clicked button classes .on and .off
tgt.classList.toggle('on');
tgt.classList.toggle('off');
}
// If the checkbox is checked call transEND()
if (chx.checked) {
transEND()
}
}
function transEND() {
// Register the transitionend event on #area
area.addEventListener("transitionend", function(e) {
// Determine which button was clicked
if (e.target !== e.currentTarget) {
var tgt = e.target;
// Clicked button will disappear after transition
tgt.style.display = 'none';
}
}, false);
}
/* All buttons will have the same
|| transition. This transition is
|| dependent upon another animatable
|| style to exist.
*/
/* This particular transition says:
|| ALL animatable styles have a
|| duration of 3 seconds,
|| with a timing function: ease,
|| and a delay of 300msec
*/
button {
width: 120px;
height: 40px;
transition: all 3s ease .3s
}
/* Classes .on and .off are "states"
|| to each #id the "states" have a
|| different meaning
*/
#fade.off {
opacity: 1;
}
#fade.on {
opacity: 0;
}
#move.off {
transform: translateY(0);
}
#move.on {
transform: translateY(200px);
}
#shrink.off {
transform: scale(1);
}
#shrink.on {
transform: scale(.3);
}
#gone {
width: 18px;
height: 18px;
}
p {
font-size: 12px;
}
<p>Click each button. Then click them again (the "FADER" is still there and clickable)</p>
<p>Now click the checkbox and push the buttons again. If you can't click the buttons back to original "state", then the event handler on transitionend was successful.</p>
<label for='gone'>Enable "transitionEND" </label>
<input id='gone' type='checkbox'>
<section id='area'>
<button id='fade' class='off'>FADER</button>
<button id='move' class='off'>MOVER</button>
<button id='shrink' class='off'>SHRINKER</button>
</section>
Use "transitionend" without prefixes
elementGet.addEventListener("transitionend", function(){});
You can listen to transitionend event on supported browsers.
I did some reshuffling of your codes and add an id tag to your button.
See snippet below
var fun;
var i = 0,
containterget = document.querySelector('.container');
elementGet = document.querySelector('.Number');
console.log(elementGet)
function execute(event) {
console.log("Transition End Execute");
alert("Transition End Execute");
elementGet.style.display = 'none';
}
fun = function() {
i++;
elementGet.innerHTML = i;
elementGet.style.transform = 'translateX(' + (containterget.offsetWidth - 40 - 35) + 'px)';
elementGet.addEventListener('transitionend', execute);
elementGet.addEventListener('webkitTransitionEnd', execute);
elementGet.addEventListener('mozTransitionEnd', execute);
elementGet.addEventListener('oTransitionEnd', execute);
};
document.getElementById("target").addEventListener("click", fun)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid green;
max-width: 85%;
margin: 2em auto 0;
}
button {
background-color: transparent;
padding: 15px;
margin: 0;
color: #000;
border: 2px solid #F44336;
text-align: center;
outline: 0;
transition: opacity 0.3s;
}
button:hover {
background-color: #F44336;
color: white;
opacity: .75;
}
button:hover {
cursor: pointer;
transition: opacity .4s;
}
span {
display: inline-block;
transition: transform 1.5s ease;
}
.Number {
font-size: 4em;
border: 1px solid black;
/*transform: translateX(0);*/
}
.EndBoundry {
float: right;
font-size: 4em;
border: 1px solid black;
}
.contain:after {
content: "";
display: table;
clear: both;
}
.btn {
text-align: center;
margin: 2em 0;
}
<div class="container contain">
<span class="Number">1</span>
<span class="EndBoundry">E</span>
</div>
<div class="btn">
<script></script>
<button id="target">Number Transition Click</button>
</div>
I'm trying to animate a button with two states: saved and unsave. When it goes from save -> unsave, it should slowly expand and add the next text. It should do the reverse when going from unsave to save. I have the following fiddle:
https://jsfiddle.net/4x0svuLd/2/
My problem right now is that even though I have designated a width transition, it seems to ignoring it. My issue is this button could have arbitrary text, thats just boolean in nature, so I can't know the exact width beforehand. I just need to it animate to the proper text width, whatever that text is.
HTML:
<div class="button" >
<text class="text"> Save </text>
</div>
CSS:
.button {
background-color: transparent;
border: 1px solid;
border-color: black;
border-radius: 6px;
color: black;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-top: 8px;
outline-style: none;
padding: 6px 10px;
text-align: center;
transition: width 2s cubic-bezier(0.23, 1, 0.32, 1);
width: auto;
}
.button-depressed {
color: white;
background-color: #ADD8E6;
border-color: transparent;
}
JS:
var isSaved = false
function doSaveAnimation() {
var button = document.getElementsByClassName("button")[0];
button.classList.add("button-depressed");
setTimeout(function() {
button.innerHTML = "Unsave";
}, 80);
}
function doUnsaveAnimation() {
var button = document.getElementsByClassName("button")[0];
button.classList.remove("button-depressed");
setTimeout(function() {
button.innerHTML = "Save";
}, 80);
}
function animate(){
if (isSaved) {
doUnsaveAnimation();
} else {
doSaveAnimation();
}
isSaved = !isSaved;
}
document.getElementsByClassName("button")[0].addEventListener("click", animate);
You could calculate the width of the text that you are setting to the button, and set calculated width to the button accordingly;
Once right away, and then each click.
you could also set the transition to everything, not just the width of the button - for smoother animation.
In this post you have several examples of how to determine width of text, i have adapted one of those to the solution below:
var isSaved = false;
var button = document.getElementsByClassName("button")[0];
button.style.width = getWidthOfText("Save", "14","sans-serif") +20+ "px";
function getWidthOfText(txt, fontsize) {
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
ctx.font = fontsize + 'px' ;
var length = ctx.measureText(txt).width;
return length;
}
function doSaveAnimation() {
button.classList.add("button-depressed");
setTimeout(function() {
button.innerHTML = "Unsave";
console.log(button.offsetWidth);
}, 120);
button.style.width = getWidthOfText("Unsave", "14") +20+ "px";
}
function doUnsaveAnimation() {
button.classList.remove("button-depressed");
setTimeout(function() {
button.innerHTML = "Save";
console.log(button.offsetWidth);
}, 120);
button.style.width = getWidthOfText("Save", "14") +20+ "px";
}
function animate() {
if (isSaved) {
doUnsaveAnimation();
} else {
doSaveAnimation();
}
isSaved = !isSaved;
}
document.getElementsByClassName("button")[0].addEventListener("click", animate);
.button {
background-color: transparent;
border: 1px solid;
border-color: black;
border-radius: 6px;
color: black;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-top: 8px;
outline-style: none;
padding: 6px 10px;
text-align: center;
transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
text-align:center;
}
.button-depressed {
color: white;
background-color: #ADD8E6;
border-color: transparent;
transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
}
<div class="button">
<text class="text">Save</text>
</div>
One way to do this without javascript is to use max-width instead of width.
https://jsfiddle.net/LjchoLqt/
.button {
transition: max-width 2s cubic-bezier(0.23, 1, 0.32, 1);
width: auto;
max-width: 2em;
}
.button-depressed {
max-width:4em;
}
You'll need to pay around with the values to make sure it doesn't cut off. This isnt an ideal solution though, especially if you don't control the content (eg it's populated by a CMS)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Click this link:
The first prt scr you can see play and mute buttons.
Click this link:
The second prt scr I can't see background image, but still javascript working!
Where is it gone my background image? How can I remove "element" property?
element {
background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}
button#mutebtn {
background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}
This is how you can remove an attribute by JQuery:
element.removeAttribute(attributename)
check this link for more info.
If you add inline style to #mutebtn in the HTML, it will appear as element{} in the inspector.
Check your HTML, and if you need to use the inline style like this:
<button id="mutebtn" style="background...."></button>
Be careful with the URL of the background attribute, which appears to be fine from the CSS file, but from the HTML file I suppose it should be a different path, usually without the initial "../".
In other words, remove the inline style in your HTML, or change the path there to: "images/unmute.png"
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
vid.addEventListener("timeupdate",seektimeupdate,false);
playbtn.addEventListener("click",playPause,false);
mutebtn.addEventListener("click",vidmute,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
volumeslider.addEventListener("change",setvolume,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(../images/pause.png)";
} else {
vid.pause();
playbtn.style.background = "url(../images/play.png)";
}
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(../images/mute.png)";
} else {
vid.muted = true;
mutebtn.style.background = "url(../images/unmute.png)";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
playbtn.style.background = "url(../images/pause.png)";
playbtn.style.background = "url(../images/play.png)";
div#video_player_box {
width: 100%;
background: #000;
}
div#video_controls_bar {
padding: 10px;
color: #CCC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
button#playpausebtn {
background: url(../images/pause.png);
width: 30px;
height: 30px;
display: inline-block;
border: 0px none;
cursor: pointer;
opacity: 0.5;
}
button#playpausebtn:hover {
opacity: 1;
}
input#seekslider {
display: inline-block;
width: 100%;
padding: 2px;
}
input#volumeslider {
display: inline-block;
width: 80px;
padding: 2px;
}
button#mutebtn {
background:url(../images/unmute.png);
width: 30px;
height: 30px;
border: 0px none;
cursor: pointer;
opacity: 0.5;
/*--style text button
font-weight: bold;
padding: 0.5em;
border-radius: 15px;
border: 1px solid #A7A7A7;
background-color: #068EA2;
background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#mutebtn:hover {
opacity: 1;
}
button#fullscreenbtn {
background: url(../images/fullscreen.png);
width: 30px;
height: 30px;
border: 0px none;
cursor: pointer;
opacity: 0.5;
float:right;
/*--style text button
font-weight: bold;
padding: 0.5em;
border-radius: 15px;
border: 1px solid #A7A7A7;
background-color: #068EA2;
background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#fullscreenbtn {
opacity: 1;
}
input[type='range'] {
-webkit-appearance: none !important;
background: #000;
border: #666 1px solid;
height: 2px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #FFF;
height:10px;
width:10px;
border-radius:100%;
cursor:pointer;
}
<div id="video_player_box">
<video id="my_video" autoplay>
<source src="media/echo-hereweare.mp4">
</video>
<div id="video_controls_bar">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="50" step="1">
<span id="curtimetext"></span> / <span id="durtimetext">
</span><button id="fullscreenbtn">[ ]</button>
</div>
<!--end video_controls_bar -->
</div>
<!--end video_player_box -->
You have 2 options:
Make use of the !important in you css file:
button#mutebtn {
background: transparent url("../images/unmute.png") repeat scroll 0% 0% !important;
}
(It's considered best practice to avoid !important as much as possible.)
Or go to your html page, find the correct line and remove the css background there.
Note: you can't reach element in your stylesheet. This is css that is direct/inline implemented in your html file.
I made a example for you, check this fiddle!