I am just new to JavaScript I do not understand how can I create such Typewriter effect, I am having problem in changing the color of some of its words. I have made something like this Sugar, Spice, everythingNice
Well mate the website you wanted to build (i guess) is made up of three.js for that rotating cube and for the typing effect you can use a simple easy and yet powerful js library - Typed.js
Include this in your html file:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<h3>Hey i am a<span class="typing"></span></h3>
Configure some basic options such as what are the different words to type,speed and the container you want to insert it onto:
var typed = new Typed(".typing",{ //specify the element
strings: ["Freelancer","Developer","Designer"], //multiple texts
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
That's it! see it live below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Typed js basic usage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<style>
*{
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.typing{
color: red;
}
</style>
</head>
<body>
<h3>Hey i am a <span class="typing"></span></h3>
<script>
var typed = new Typed(".typing",{
strings: ["Freelancer","Developer","Designer"],
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
</script>
</body>
</html>
External links(for reference)
Typed.js docs
Related
I have a situation where I have to make something that looks like a code editor and to acheive this I have to use HTML, CSS and Js without any libraries.
I have achieved pretty much everything except the line numbers and I am not sure how to do it.
So far I have achieved this:
and this is what actually is my target:
supposing that I have this html structure:
<html>
<head>
</head>
<body>
<div class="lines"></div>
<div class="code"></div>
</body>
</html>
how do I populate lines based on the height of content in code using CSS or JavaScript?
Here's something: (written fast, feel free to adjust CSS etc)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
#code {
line-height: 15px;
}
.holder {
display: flex
}
</style>
</head>
<body>
<div class="holder">
<div>
<pre id="lines">
</pre>
</div>
<div>
<pre id="code">
.aaa {
bbb
}
.ccc {
ddd
}
</pre>
</div>
</div>
</body>
<script>
const codeHeight = document.getElementById('code').offsetHeight;
const lines = Math.ceil(codeHeight / 15);
let html = '';
for (i = 1; i < lines; i++) {
html += i + '<br>'
}
document.getElementById('lines').innerHTML = html;
</script>
</html>
Here's the JS fiddle: https://jsfiddle.net/4aowc26f/
Number 15 in calculation is due to 15px line height. Feel free to introduce variable for this one.
you should make every line as a div
<div><span>{line}</span> <span>some code</span> </div>
I want to have a PNG sequence that displays 68 frames of animation and then loops the final 20 frames x number of times.
I based my code on the suggestion from 'r3mainer' on your page:
[https://stackoverflow.com/questions/43595504/play-one-part-of-gif-first-then-loop-a-certain-section-indefinitely]
But I can not get it to work.
I created the vertical PNG 'film strip', a CSS file with the appropriate background style info, and a JS file referenced in an HTML.
With the PNG, the JS, the HTML, and the CSS uploaded all I get for an image on the page is the first 'frame' of the PNG strip. There are no error messages.
I think there's something I don't understand about how the JS code should be deployed.
Here's my HTML file:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strip Test</title>
<script src="film_strip_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="draw.css">
</head>
<body>
<div id="draw"></div>
</body>
The CSS:
#draw {
width: 279px;
height: 202px;
margin: 0 auto;
background: url(basquiat_strip.png) top center;
}
JavaScript file:
$(function() {
var ani = {
frame_height: 202,
num_frames: 68,
loop_frame: 30,
frame_duration: 1,
cur_frame: 0
};
window.setInterval(
function() {
$('#draw').css( 'background-position-y',
(-ani.frame_height * ani.cur_frame ) + 'px'
);
ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames;
if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame;
},
ani.frame_duration
);
});
I am trying to make a function that can edit the dom on click, that I can pass different elements into, too reduce duplicate code. However when i pass an id in as string in a function it will not grab the dom element. However if I use the same text in a string declared in the function it will. I have tried console logging the output and using that same string defined by me, in the dom request and that works however variable defined in the function prototype do not it seens unexplainable to me.
e.x will work var x = document.getElementById('button1').style.display="block";
but var x = document.getElementById(str1).style.display="block"; will not, where str is taken from funtion header, even tho str console.logs("button1");
however if i declare a variable r = "button1" inside the function
var x = document.getElementById(r).style.display="block"; - this will work
why are string passed into the function treated differently
example fiddle illustrating the problem
https://jsfiddle.net/peacefulgoldfish/wpvyu5fr/20/
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="/js/lib/dummy.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#div1 {
width: 100px;
height: 30px;
background-color: red;
}
#button1{
display: none;
width: 100px;
height: 30px;
background-color:blue;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
function switchv(){
switchbutton("'block'", "'button1'");
}
function switchbutton(str, str2){
console.log(str2)
r = str2;
var x = document.getElementById(r).style.display="block";
}
</script>
</head>
<body>
<button id="div1" onclick="switchv();">
</button>
<div id="button1">
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
</script>
</body>
</html>
Remove the single quotes around "'buttton1'".
This function will work:
function switchv(){
switchbutton("block", "button1");
}
Edit: It seems jsfiddle doesn't like the onclick=switchv(), although inside a standalone html page it works.
Setting the onclick function inside the JavaScript portion seems to work, though. Here's the modified version: https://jsfiddle.net/wpvyu5fr/40/
Going off the link to the fiddle that you sent it seems that you called the str argument in the switchbutton function str1, they need to be the same. Also the double quotes are not necessary.
function switchbutton(str, str2){
var x = document.getElementById(str2);
x.style.display = str;
}
I want to display a polyline underground in cesium.js. But I have no idea about this.
It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud,but the underground effect can be gained by an alternative way--translucent terrain.
According How to display underground entity? in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps.
For gif, see here.
1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change
command.pass = Pass.GLOBE;
to
command.pass = Pass.TRANSLUCENT;
2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.
3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.tools {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="cesiumContainer">
</div>
<div class="tools">
Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
</div>
</div>
<script>
function change() {
var value = document.getElementById("btnImageryAlpha").value;
if (viewer.imageryLayers) {
for (var i = 0; i < viewer.imageryLayers.length; i++) {
viewer.imageryLayers.get(i).alpha = value / 10;
}
}
console.log(value);
}
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals: true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
//skyAtmosphere: false,
//orderIndependentTranslucency: false,
baseLayerPicker: false,
terrainProvider: terrainProvider
});
//viewer.scene.globe.depthTestAgainstTerrain = false;
//change the ugly blue color to black
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
//default is 1
//viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;
var blueBox = viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
Yes, this is supported in cesium. It can be hard to see sometimes since the camera cannot go bellow the ellipsoid.
var viewer = new Cesium.Viewer('cesiumContainer');
var purpleArrow = viewer.entities.add({
name : 'Purple straight arrow at height',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
-90, 43, -200000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});
viewer.zoomTo(viewer.entities);
Live
I'm fielding a request that someone essentially wants one master page with their logo at the top, and the remainder of the page will load a series of pages (populated by a static array) and then repeat itself.
My intent is to have a page load in the 'content' div element, wait a period of time (I only listed 2 seconds for testing purposes), and then the next page loads. When it reaches the end of the array, I want the array to reset so that this is continuously loading.
I'm sure there are probably better ways to do this, but through my research this seemed the simplest.
Any help, or pointing me in another direction is all greatly appreciated.
Editing for clarity:
What I'm looking for is one master page, which just simply has a header at the top of the page. The rest of the page would be composed of a single div element (or iFrame if need be) and the content of said element would change after a determined amount of time, automatically, with no input. The element would initially load 'testdata.php' which would be composed of multiple database calls, after a determined amount of time, that div element would reload 'testdata1.php', which is composed of completely different database calls.
I hope this helps better describe what I am hoping to achieve.
What I have so far:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
for (var i=0; i < linkArray.length; i++) {
setTimeout(function(){$("#content").load(linkArray[i])},2000);
if (i === (linkArray.length-1))
i = 0;
}
</script>
I know this isn't very helpful, and it doesn't directly address your problem, but you might want to try using jQuery (http://jquery.com/). You could have something like this:
$(document).ready(function() {
// Set timeout to 2 seconds
var array = ['page1', 'page2'];
document.write(array[1].href);
});
Or, you could use some server-side script like ruby, or PHP.
This ended up doing the trick for me:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
var timeout = 0;
var counter = 0;
var arrayCount = linkArray.length;
changeContent(timeout, counter, arrayCount);
function changeContent(def_timeout, def_counter, def_arrayCount) {
//setTimeout(function() {$("#content").load(linkArray[def_counter])}, def_timeout);
$("#content").load(linkArray[def_counter]);
def_counter++;
if (def_counter >= def_arrayCount)
def_counter = 0;
def_timeout = def_timeout + 5000;
setTimeout(function() {changeContent(def_timeout, def_counter, def_arrayCount)}, 5000);
}
</script>