Per the code below, I'm able to create a Link with parameters that will navigate to my desired target page:
<style>
.fancy-link{
color: #FFFFFF;
text-decoration: none;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
border-radius: 4px;
border: 1px solid black;
background: #0080FF;
padding-top: 0px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
width: 100px;
height: 10px;
font-size: 15px;
font-weight: bold;}
.fancy-link:hover{
color: #F44336;
padding-left: 10px;}
</style>
<html>
<a class="fancy-link" name="View" id="View"
href="'||'https://XXXXXX-sb1.app.website.com/app/common/custom/custrecordentry.nl?
rectype=142&id='||{internalid}||'"target="_blank">Check-In</a>
</html>
While this is useful, my intended goal is for this link to actually call the following button click event/element that lives # at the desired url (see href above), without actually navigating to that page. Is this possible? If so, some code examples would be very helpful.
.<input type="button" style="" class="rndbuttoninpt bntBgT"value="Check-In" id="custpageworkflow157" name="custpageworkflow157"onclick="try{
if (!!window) {
var origScriptIdForLogging = window.NLScriptIdForLogging;
var origDeploymentIdForLogging = window.NLDeploymentIdForLogging;
window.NLScriptIdForLogging ='CUSTOMSCRIPT_STICK_USER_PREFERENCE';
window.NLDeploymentIdForLogging= 'CUSTOMDEPLOY_STICK_USER_PREFERENCE';
}
try{
NS.Workflow.buttonClick('custpageworkflow157');
}
catch(e){
document.location = addParamToURL(addParamToURL(addParamToURL(document.location.href,'workflowbutton','157'),'workflowbuttoninstanceid','84083'),'workflowbuttonobsoletehandling','T');
}
}
finally{
if (!!window) {
window.NLScriptIdForLogging = origScriptIdForLogging;
window.NLDeploymentIdForLogging = origDeploymentIdForLogging;
}
}
;
return false;
"onmousedown="this.setAttribute('_mousedown','T');
setButtonDown(true, false, this);
" onmouseup="this.setAttribute('_mousedown','F');
setButtonDown(false, false, this);
" onmouseout="if(this.getAttribute('_mousedown')=='T') setButtonDown(false,false, this);
" onmouseover="if(this.getAttribute('_mousedown')=='T') setButtonDown(true, false, this);
" _mousedown="F">
You should be able to get away with this with a simple event listener in the button you are creating:
document.getElementById('custpageworkflow157).click();
So basically something like this:
document.getElementById("View").addEventListener("click", function(){
document.getElementById('custpageworkflow157).click();
});
Related
I'm new to coding so apologies, I'm trying to do this thing where a button displays a random fun fact when clicked, but I also wanted to add a feature that, if hovered for long enough, the button text changes up to 3 times (at 3s, 5s, and 8s) and then stays on the last hover (8s one) until clicked, where it comes back to the first non hovered button text. Here's what I was working with. also, if anyone knows of a way to disable antialiasing, that'd be amazing as well
edit: apparently im not the best at explaining. i was looking to change the button text, not the fun fact. fun facts would only appear when clicked, i want the button text (the "click me for a fun fact") to change into 3 other texts when hovered for long enough, so for example, text a would change into text b after 3 seconds, then text b would change into text c after 5 seconds have passed since the hovering started, and then into text d after 8 seconds of constant hovering (so it would only happen after a total of 8 hovering seconds, changing at 3s, 5s and 8s). after that it should stay as text d until clicked. once its clicked, it should return to text a ("click me for a fun fact") and display a random fun fact
<!DOCTYPE html>
<html>
<head>
<style>
button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}
</style>
</head>
<body>
<script>
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
</script>
<button onclick="newQuote()">click me for a fun fact</button>
<div id="quoteDisplay">
</div>
</body>
</html>
To count seconds, setInterval() is here to help, you can do something every x second(s).
In this case, we want to check if the user hovered for 3,5 and 8sec, so we change the timer every seconds, when it reaches what we want, we call newQuotes(), then stop recording time when our timer is over 8sec, or if the user is not hovering the button anymore.
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
]
var myButtonText = [
'a button text',
'another button text',
'one more button text'
]
var timer=0, timerIdle=false, interval, text=0;
function newQuote() {
document.getElementById("myButton").innerText = "click me for a fun fact";
text = 0;
timer = 0;
if(quotes.length > 0) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
//Remove item to avoid repetition
const index = quotes.indexOf(quotes[randomNumber]);
if(index > -1){
quotes.splice(index, 1);
}
}
}
function hoverMe() {
if(!timerIdle){
// Do something every 1 second
interval = setInterval(function(){
if(timer>8){
//if timer goes over 8sec, stop doing something on hover
timerIdle = true;
} else {
timer++;
// if timer == 3,5 or 8 call newQuote();
if([3,5,8].indexOf(timer) > -1 ) {
console.log(timer)
document.getElementById("myButton").innerText = myButtonText[text];
text++;
}
}
}, 1000);
}
}
// stop the interval if user is not hovering the button
function mouseLeave() {
clearInterval(interval)
}
button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}
<!DOCTYPE html>
<html>
<body>
<button id="myButton" onclick="newQuote()" onmouseover="hoverMe()" onmouseleave="mouseLeave()">click me for a fun fact</button>
<div id="quoteDisplay"></div>
</body>
</html>
You can try the below implementation with some explanation
var quotes = [
'fun fact 1',
'fun fact 2',
'fun fact 3',
'fun fact 4',
'fun fact 5'
];
var selectedQuote = ""
//shuffle to make it non-duplicated records
function shuffle(array) {
var i = array.length,
j = 0,
temp;
while (i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function newQuote() {
if (!selectedQuote) {
var randomNumber = Math.floor(Math.random() * (quotes.length));
selectedQuote = quotes[randomNumber]
}
document.getElementById('quoteDisplay').innerHTML = selectedQuote;
}
var timer = [3000, 5000, 8000]; //3s, 5s, 8s
var interval;
//generate quotes when a user hovers over the element
function mouseOver() {
var currentTimerIndex = 0;
var passedTime = 0;
var timeStack = 1000;
var shuffledQuotes = shuffle(quotes); //randomize quotes
interval = setInterval(function() {
passedTime += timeStack;
if (currentTimerIndex > timer.length - 1) {
clearInterval(interval);
interval = null;
return;
}
if (timer[currentTimerIndex] <= passedTime) {
document.getElementById('quoteButton').innerHTML = shuffledQuotes[currentTimerIndex];
selectedQuote = shuffledQuotes[currentTimerIndex];
currentTimerIndex++;
}
}, timeStack)
}
//stop quote generations
function mouseOut() {
if (interval) {
clearInterval(interval);
interval = null;
}
}
button {
display: inline-block;
background-color: #c0c0c0;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
text-align: center;
font-size: 15px;
font-family: yay;
padding: 5px;
width: 150px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.1s;
}
.button {
transition: 0.2s;
}
.button:hover {
transition-delay: 3s;
}
<button onclick="newQuote()" onmouseover="mouseOver()" onmouseout="mouseOut()" id="quoteButton">click me for a fun fact</button>
<div id="quoteDisplay">
</div>
I am attempting to make it to where the button in the paragraph is used to toggle the viewability of the javascript array on/off. I'm not quite sure how to do it though.
Here's my html:
<body>
<div class="flexbox-container">
<h1 class="underline-small">
Heading One
</h1>
</div>
<h3 class="paragraph">Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when <button type="button" onclick="unshow()" id="btnID" class="javabutton">this link</button> is clicked. If the operation has been completed already, notify the user that this has already been done.</h2>
<script>
function unshow() {
document.getElementById('image')
.style.display = "none";
}
</script>
</div>
<script type="text/javascript">
let array1 = ["Matt Johnson", "Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm"]
array2 = ["Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm", "Jordan Heigle", "Tyler Viles"]
let set = new Set([...array1, ...array2]);
let newArray = [...set];
for(i=0;i<newArray.length;i++) {
document.write(newArray[i] + "<br/>");
}
</script>
</div>
</body>
</html>
and here's my CSS for styling:
.paragraph {
font-weight: 400;
color: white;
align-self: center;
font-size: 17px;
margin: -30px 75px 0px 75px;
}
.javabutton {
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #DEBF79;
text-decoration: none;
background-color: #222222;
}
This question already has answers here:
Stop CSS transition from firing on page load
(9 answers)
Closed 3 months ago.
I have a popup element which is hidden by default and only shows up programmatically when the script assigns a specific class to its container and populates the popup text.
In css/stylesheet.css:
.error-message {
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.container.with-error .error-message {
opacity: 1;
visibility: visible;
}
In index.html:
<link rel="stylesheet" href="css/stylesheet.css">
<div class="container">
<div class="error-message">This text will be changed by a script.</div>
</div>
According to this simple style declaration, the .error-message element should always be invisible, unless it is preceded by a .container.with-error, in which case it becomes visible, and its appearance is always animated because of transition property.
However, the .error-message triggers its transition when the page is loaded, resulting in a flash which I believe it should not do.
Related behavior I have observed:
The flash does not appear if the style is declared in an inline <style> tag
The flash appears if every style but transition: all is declared in an inline <style> tag
The flash does not appear if the style is loaded from a Base-64 encoded Data URL like this: <link href="data:text/css;base64,...">
The flash does not appear if the style loaded from <link rel="stylesheet"> is retrieved from cache.
I've created a demo that reproduces this bug every time. To simulate requesting a remote stylesheet without cache, a blob:// Object URL is generated from the style instead. The inline demo is available at the end of this question, but for best results, use JSBin. Use F5 to see the bug in action.
I'm curious how to fix this and what causes this issue as this is clearly not intended behavior.
<!doctype html>
<html lang="en">
<head>
<script>
/* jshint browser: true, esversion: 6 */
window.onload = function() {
// Log all transition events
window.ontransitioncancel = appendToTransitionLog;
window.ontransitionstart = appendToTransitionLog;
window.ontransitionrun = appendToTransitionLog;
window.ontransitionend = appendToTransitionLog;
// Simulates loading a stylesheet from a remote location
// Works the same way as if #simulated-stylesheet's content
// was hosted and served from <link rel=stylesheet> without cache
//
// Keep in mind that this bug does not appear
// if the style is injected or loaded from cache!
createFakeStylesheet();
};
function createFakeStylesheet() {
var styleContent = document.getElementById("simulated-stylesheet").text;
var styleBlob = new Blob([styleContent], {type: "text/css"});
var styleURL = URL.createObjectURL(styleBlob);
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = styleURL;
document.head.appendChild(linkElement);
}
// Functions below handle transition events logging
// Template import helper
function importTemplateFromId(id) {
return document.importNode(document.getElementById(id).content, true);
}
// Returns a string like "div.class1.class2" to describe an element
function describeElement(element) {
var tagName = element.tagName.toLowerCase();
var classes = element.classList.toString().split(" ").filter(className => className != "").map(className => "." + className).join("");
return tagName + classes;
}
// Returns a matching log group wrapper.
// The wrapper is created if the group does not exists.
// Used for grouping transition events by element descriptor
function getLogWrapper(logContainer, elementText) {
var matchingWrapper = logContainer.querySelector(".wrapper[data-for-element=\"" + elementText + "\"] .logs");
if (matchingWrapper) {
return matchingWrapper;
}
var wrapperTemplate = importTemplateFromId("wrapper-template");
var wrapperName = wrapperTemplate.querySelector(".name");
var wrapperElement = wrapperTemplate.querySelector(".wrapper");
wrapperName.textContent = elementText;
wrapperElement.dataset.forElement = elementText;
return logContainer.appendChild(wrapperElement).querySelector(".logs");
}
// Logs a transition event.
// Logs are grouped by each event type (start, run, end)
// and target element's descriptor (see describeElement)
function appendToTransitionLog(transitionEvent) {
var eventType = transitionEvent.type;
var eventProperty = transitionEvent.propertyName;
var logContainer = document.getElementById("log-" + eventType);
var elementText = describeElement(transitionEvent.target);
var logWrapper = getLogWrapper(logContainer, elementText);
var logEntry = document.createElement("span");
logEntry.textContent = eventProperty;
logEntry.className = "entry";
logWrapper.appendChild(logEntry);
}
</script>
<style>
#edit-with-js-bin {
display: none!important;
}
.log {
font-size: 14px;
}
.log .wrapper {
padding-left: 16px;
}
.wrapper .name {
text-decoration: underline;
}
.wrapper .logs {
padding-left: 12px;
}
.wrapper .entry {
display: inline-block;
color: grey;
padding: 8px 4px;
}
.wrapper .entry:nth-child(2n) {
color: lightgrey;
}
body {
font-family: monospace;
font-size: 0;
}
.side {
display: inline-block;
font-size: 14px;
vertical-align: top;
width: 50%;
height: 100%;
}
</style>
<template id="wrapper-template">
<div class="wrapper" data-for>
<span class="name"></span>
<div class="logs"></div>
</div>
</template>
<script id="simulated-stylesheet" type="text/css">
.remote {
background: crimson;
color: white;
display: inline-block;
margin: 8px;
padding: 8px;
}
.remote.transparent {
opacity: 0;
visibility: hidden;
}
.remote.transition-some {
transition: opacity, visibility 1s ease;
}
.remote.transition-all {
transition: all 1s ease;
}
</script>
<style>
.transition-all-inline {
transition: all 1s ease;
}
.local {
background: green;
color: white;
display: inline-block;
margin: 8px;
padding: 8px;
}
.local.transparent {
opacity: 0;
visibility: hidden;
}
.local.transition-some {
transition: opacity, visibility 1s ease;
}
.local.transition-all {
transition: all 1s ease;
}
.mock {
background: orangered;
transition: all 1s ease;
}
.mock:hover {
background: orange;
}
</style>
</head>
<body>
<div class="side left">
<div>
<u>.remote</u> <div class="remote">I'm always styled.</div>
</div>
<div>
.remote<u>.transparent</u> <div class="remote transparent">I'm always transparent.</div>
</div>
<div>
.remote.transparent<u>.transition-some</u> <div class="remote transparent transition-some">I'm invisible!</div>
</div>
<div>
.remote.transparent<u>.transition-all</u> <div class="remote transparent transition-all">I will briefly flash when the page loads.</div>
</div>
<div>
.remote.transparent<u>.transition-all-inline</u> <div class="remote transparent transition-all-inline">I will briefly flash when the page loads.</div>
</div>
</div>
<div class="side right">
<div>
<u>.local</u> <div class="local">I'm always styled.</div>
</div>
<div>
.local<u>.transparent</u> <div class="local transparent">I'm always transparent.</div>
</div>
<div>
.local.transparent<u>.transition-some</u> <div class="local transparent transition-some">I'm invisible!</div>
</div>
<div>
.local.transparent<u>.transition-all</u> <div class="local transparent transition-all">I'm invisible!</div>
</div>
<div>
.local.transparent<u>.transition-all-inline</u> <div class="local transparent transition-all-inline">I'm invisible!</div>
</div>
<div>
.local.mock <div class="local mock">Use me to debug transition events!</div>
</div>
</div>
<div class="log">
<div>
<b>ontransitionstart</b>
<div id="log-transitionstart"></div>
</div>
<div>
<b>ontransitionrun</b>
<div id="log-transitionrun"></div>
</div>
<div>
<b>ontransitionend</b>
<div id="log-transitionend"></div>
</div>
<div>
<b>ontransitioncancel</b>
<div id="log-ontransitioncancel"></div>
</div>
</div>
</body>
</html>
EDIT: The flash appears regardless of what property is being transitioned.
This still creates the same effect:
.error-message {
transition: opacity 0.2s ease;
}
It's a normal behavior of transition (not a bug of any specific browser).
The issue in your case is that you already have elements (that flashes) in the DOM tree.
That also means the elements have an initial state and any new state performs a transition. If a new style applied and it has a transition property a browser will show you animation between the initial state and the new state with a transition property. (Note that the initial state of the element that flashes is not transparent).
The possible fix for that is to add hidden elements when new styles already exist. Or refactor your styles to have a transparent initial state.
I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:
Create a group box around certain controls on a web form using CSS
What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.
I would like to create a grey box similar to the ones found on this webpage:
https://img.labnol.org/di/trigger1.png
Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
function changeText()
{
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Here is the CSS (which is referred to in the html as test.css):
body{
background: rgba(0,0,0,0.0);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #0D0D0D;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 140px;
color: #0D0D0D;
font-family: Arial;
}
h2{
text-align: center;
}
form input[type="file"]{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form input[type="button"]{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover{
background: #149174;
color: #0C5645;
}
form input[type="button"]:active{
border:0;
}
form progressBar{
text-align: center;
}
Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.
I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.
Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.
The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.
Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.
Here's a snippet with the changes I just mentioned:
body {
background: rgba(0, 0, 0, 0.0);
}
fieldset {
width: 508px;
height: 270px;
/* fixed width and height*/
margin: 13vh auto;
}
#p1 {
border: 4px dashed #0D0D0D;
/* modified the actual text box instead of the entire form */
width: 508px;
height: 140px;
line-height: 140px;
margin-top: 0px;
}
form p {
text-align: center;
color: #0D0D0D;
font-family: Arial;
}
h2 {
text-align: center;
}
form input[type="file"] {
position: absolute;
margin: 0;
outline: none;
width: 508px;
height: 140px;
margin: 22px 4px;
opacity: 1;
background-color: orange;
/* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}
form input[type="button"] {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 100%;
/* width relative to parent fieldset */
height: 35px;
margin-top: -20px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover {
background: #149174;
color: #0C5645;
}
form input[type="button"]:active {
border: 0;
}
form progressBar {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function changeText() {
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<!-- changed progressBar style -->
<progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Hope it helps!
So I'm attempting to make an "over time" text changer which changes a word in a sentence each few seconds, that code runs fine thou when the text is actually changed, the width of the sentence changes instantly removing the smoothness from the website.
Structure:
<div id="big">
This is some <span id="change">text</span>
</div>
The word changing is #change. I've tried using CSS transitions for width as well as transition properties:
margin-top: 18%;
font-size: 70px;
font-family: 'Slabia 27px', 'Droid Serif', Arial;
>> text-align: center;
text-transform: uppercase;
>> -webkit-transition-property: width;
>> -webkit-transition-duration: 2s;
>> transition: width .8s ease;
Also my jQuery (calls APP.init()):
var APP = {
init: function() {
loopChangeWord = setInterval(function(){
var $change = $('#change');
var iteration = ['quick', 'efficiently', 'well', 'together'];
var current = $change.html();
for (var i = 0; i < iteration.length; i++) {
if (iteration[i] == current) {
if (i+1 > iteration.length-1) var nw = iteration[0];
else nw = iteration[i+1];
$change.fadeOut(500, function(){
$change.html(nw).fadeIn(500);
});
}
}
}, 4000);
}
};
In the end** I'm asking for a way for a smooth transition of the text being changed, I expected the width change would trigger the CSS animation thou was wrong!
I had to change the text value which is in your <span id="change">text</span> to match either one value of your var iteration = ['quick', 'efficiently', 'well', 'together']; array.
Here is the working demo: https://jsfiddle.net/5p36n34j/1/
Hope this helps!
Here's an example using transition: all .8s ease; on #change instead of transition: width .8s ease; on #big.
var fontSize = 10;
$('#big').click(function() {
fontSize = fontSize * 2.2;
$('#change').css('fontSize', fontSize + 'px');
})
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#big {
margin-top: 18%;
font-family: 'Slabia 27px', 'Droid Serif', Arial;
text-align: center;
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
border: solid black 1px;
padding: 20px;
}
#change {
transition: all .8s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="big">
Click on this <span id="change">text</span>
</div>