What is this called, and how can I do it? (Changing text) - javascript

So as you can see on https://www.sketchapp.com/ they got something cool midway through the page, as you can see it changes the text automatically (Sketch is made for Chaning text here like you) after some time; and I was wondering how they did that and how it's called.
I'm trying to recreate something similar, Thanks

That you need is either a setInterval if you want the text to change on approximately the same time for an indefinite period or you setTimeout if you want to change the text only once. Below it is a snippet that uses the setTimeout as an example:
document.addEventListener('DOMContentLoaded', function(){
setTimeout(function(){
var div = document.getElementById('js-text');
div.innerHTML = "Replaced <span class='redText'>Text</span>";
}, 1000);
});
.redText{
color: red;
}
<div id="js-text">Initial Text</div>

Related

Change image and Text on Scroll (Javascript)

I dont have much experience in javascript but trying to achieve a slideshow like in https://district2.studio/ where the text and image changes as you scroll. In the example no matter the amount you scroll at a time or inbetween the image changing animation, the image will change only once at a time. I'm trying to achieve this using javascript only and no additional plugin or libraries. Hope someone can help me.
You have some errors.
First of all, you have to wait the DOM is ready. You could movet he entire before de body tag closes to ensure that or use window.onload
class prop elements it's an array.
window.onload = function() {
document.getElementById("image1").onscroll = function() {
if(document.getElementById("image2").classList.contains("scroll")){
document.getElementById("image2").classList.remove("scroll");
} else {
document.getElementById("image2").classList.add("scroll");
}
};
}
Something like this should work

How to highlight my text

I have some text and a button. Once user clicks a button I want the text's background to change color to green and back. But nothing happens if I click the button...
Here's the JS script:
<script>
function bright(){
kontakt = document.getElementById('kontakt');
kontakt.bgcolor = '#A5DF00';
}
function dark(){
kontakt = document.getElementById('kontakt');
kontakt.bgcolor = '#000000';
}
function highlight(){
setTimeout(bright() , 1000);
setTimeout(dark() , 1000);
}
</script>
I call the highlight() from the button's onclick attribute like this: onclick='highlight()'.
The text with id kontakt is always on the page.
Any clue?
The css property are accessible through the style property:
var kontakt = document.getElementById('kontakt');
function bright(){
kontakt.style.backgroundColor = '#A5DF00';
}
function dark(){
kontakt.style.backgroundColor = '#000000';
}
All CSS properties can be accessed the same way. if the property has a dash in it z-index just use the camel case notation.
Ex: kontakt.style.zIndex
you also need to update your setTimeout like so:
function highlight(){
setTimeout(bright , 1000);
setTimeout(dark , 2000);
}
In your case you were calling the functions and passing whatever they return to setTimeout. You also want to change the timer for the first function to happen after a second, and the next follows one second after.
According to your code, when highlight() is called it will wait for one second and then turn the background from whatever it was to green and immediately to black, as fast as it possibly can. I'm guessing that you don't see it flash green because that's faster than the browser renders or your eye can detect.
Try changing setTimeout(dark , 1000); to setTimeout(dark , 1500);.
jsfiddle example here modified based on this SO answer.
<span id='kontakt' onClick="highlight(this);">Click me to see me change color and back</span>
function highlight(obj){
var orig = obj.style.color;
obj.style.color = '#f00';
setTimeout(function(){
obj.style.color = orig;
}, 5000);
}
I would recommend using jquery for this problem. You can download it here. And use it by updating your head-section in your html-document with
<head>
other code...
<script src="directory/where/you/installed/jquery"></script>
</head>
now you can highlight the text with the id 'kontakt' by using following functions:
<script>
$(document).ready(function(){ //this ensures that all elements have been loaded before you are executing any js
function highlight(){
$("#kontakt").css("background-color", "#A5DF00");
setTimeout(function(){
$("#kontakt").css("background-color", "#000000");
}, 1000);
};
// now to execute highlight() by clicking on the button you use
$("#id-of-the-button").click(highlight();
// there is no further need of the onclick attribute for your button
}
</script>
For more information on how to use jquery you can visit w3schools. They have a lot of very nice tutorials for exactly those tasks.

Run multiple settimeout or showit functions on different page elements

Note: I am not a developer. More of a hobbyist (read n00b).
I have tried searching for an answer to this but so far have not found anything that provides an answer to this specific scenario.
I know this is relatively basic but, I am trying to create a page with three hidden elements that are revealed either after a time delay or a mouse click. What I am struggling with is getting all three elements to run on the same page.
Required:
Element 1: Hidden image to be revealed 10 seconds after page load
Element 2: Hidden div to be revealed 10 minutes after page load
Element 3: Button image inside element 2, when clicked reveals another hidden div
I am using the following setTimeout function to reveal element 1, but I can't get a second setTimeout command to run after this.
<script language="javascript" type="text/javascript">
var pop=10;
function showIt() {
document.getElementById("hid").style.display = "block";
}
setTimeout(showIt, 10000);
</script>
I tried repeating this code for the second element changing the Element ID to "hid2" but it will not run. Do I need to use a cleartimeout function to end the first settimeout?
I then need some code for element 3 to run on a mouse click after element 2.
Getting all three bits of JS to play nicely together seems to be beyond me.
Your help would be much appreciated!
I believe this is what you're asking for.
<img id="hid" src="img/darkred.jpg" style="width: 20px; display: none;"/>
<div id="hid2" style="display: none;">div 2
<input type="button" value="show div3"/>
</div>
<div id="hid3" style="display: none;">div 3</div>
function showIt(hid) {
document.getElementById(hid).style.display = "block";
}
function revealEl(id, delay){
setTimeout(function(){
showIt(id);
}, delay);
}
revealEl("hid", 4000);
revealEl("hid2", 6000);
$("#hid2 input"").on("click", function(){
showIt("hid3");
});

force DOM redraw with javascript on demand

The title of the question expresses what I think is the ultimate question behind my particular case.
My case:
Inside a click handler, I want to make an image visible (a 'loading' animation) right before a busy function starts. Then I want to make it invisible again after the function has completed.
Instead of what I expected I realize that the image never becomes visible. I guess that this is due to the browser waiting for the handler to end, before it can do any redrawing (I am sure there are good performance reasons for that).
The code (also in this fiddle: http://jsfiddle.net/JLmh4/2/)
html:
<img id="kitty" src="http://placekitten.com/50/50" style="display:none">
<div>click to see the cat </div>
js:
$(document).ready(function(){
$('#enlace').click(function(){
var kitty = $('#kitty');
kitty.css('display','block');
// see: http://unixpapa.com/js/sleep.html
function sleepStupidly(usec)
{
var endtime= new Date().getTime() + usec;
while (new Date().getTime() < endtime)
;
}
// simulates bussy proccess, calling some function...
sleepStupidly(4000);
// when this triggers the img style do refresh!
// but not before
alert('now you do see it');
kitty.css('display','none');
});
});
I have added the alert call right after the sleepStupidly function to show that in that moment of rest, the browser does redraw, but not before. I innocently expected it to redraw right after setting the 'display' to 'block';
For the record, I have also tried appending html tags, or swapping css classes, instead of the image showing and hiding in this code. Same result.
After all my research I think that what I would need is the ability to force the browser to redraw and stop every other thing until then.
Is it possible? Is it possible in a crossbrowser way? Some plugin I wasn't able to find maybe...?
I thought that maybe something like 'jquery css callback' (as in this question: In JQuery, Is it possible to get callback function after setting new css rule?) would do the trick ... but that doesn't exist.
I have also tried to separte the showing, function call and hiding in different handlers for the same event ... but nothing. Also adding a setTimeout to delay the execution of the function (as recommended here: Force DOM refresh in JavaScript).
Thanks and I hope it also helps others.
javier
EDIT (after setting my preferred answer):
Just to further explain why I selected the window.setTimeout strategy.
In my real use case I have realized that in order to give the browser time enough to redraw the page, I had to give it about 1000 milliseconds (much more than the 50 for the fiddle example). This I believe is due to a deeper DOM tree (in fact, unnecessarily deep).
The setTimeout let approach lets you do that.
Use JQuery show and hide callbacks (or other way to display something like fadeIn/fadeOut).
http://jsfiddle.net/JLmh4/3/
$(document).ready(function () {
$('#enlace').click(function () {
var kitty = $('#kitty');
// see: http://unixpapa.com/js/sleep.html
function sleepStupidly(usec) {
var endtime = new Date().getTime() + usec;
while (new Date().getTime() < endtime);
}
kitty.show(function () {
// simulates bussy proccess, calling some function...
sleepStupidly(4000);
// when this triggers the img style do refresh!
// but not before
alert('now you do see it');
kitty.hide();
});
});
});
Use window.setTimeout() with some short unnoticeable delay to run slow function:
$(document).ready(function() {
$('#enlace').click(function() {
showImage();
window.setTimeout(function() {
sleepStupidly(4000);
alert('now you do see it');
hideImage();
}, 50);
});
});
Live demo
To force redraw, you can use offsetHeight or getComputedStyle().
var foo = window.getComputedStyle(el, null);
or
var bar = el.offsetHeight;
"el" being a DOM element
I do not know if this works in your case (as I have not tested it), but when manipulating CSS with JavaScript/jQuery it is sometimes necessary to force redrawing of a specific element to make changes take effect.
This is done by simply requesting a CSS property.
In your case, I would try putting a kitty.position().left; before the function call prior to messing with setTimeout.
What worked for me is setting the following:
$(element).css('display','none');
After that you can do whatever you want, and eventually you want to do:
$(element).css('display','block');

How to kill a process in javascript?

Let's take an example (i am not asking how to cancel/kill a setTimeout at all, i just use it to represent different processing times of different tasks):
<div id="content">
</div>
<p>Which color do you prefer ?</p>
<button id="long" onClick="long_process();">Blue</button>
<button id="short" onClick="short_process();">Red</button>
<script>
function long_process() {
setTimeout(function() {
$('div#content').text('My favorite color is blue');
}, 10000);
}
function short_proccess() {
setTimeout(function() {
$('div#content').text('My favorite color is red');
}, 1000);
}
$('button#long').click();
$('button#short').click();
</script>
Regarding this example, you probably know already what i am going to ask, how can we stop the long processing action if the user launch a short processing action which is supposed to take over it ?
In this example, if the favorite color of the user is red, but the user click the wrong (blue) button, then click the red button, the blue color willl be the last color displayed because its process is longer.
I know how to manage it with C/C++ using the pthread library, but i have no idea with javascript, and it's very important in some situation to be 100% sure about what your app will display.
Thanks !
When creating a timer, setTimeout and setInterval return an ID that you can use to reference that timer:
var long_timer;
function long_process() {
long_timer = setTimeout(...);
}
When you want to stop that timer, pass that ID into clearTimeout or clearInterval:
if (long_timer) {
clearTimeout(long_timer);
}

Categories