I'm trying to change position and dimensions of the canvas but it's set as inline code with !important added, editing style attribute is instantly changed to original styling.
There is fullscreen option but it doesn't change anything for me: docs.
I've spend a lot of time trying to change it with no luck.
Simple example showing issue:
<!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>tsParticles</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
#tsparticles {
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="tsparticles"></div>
<script
src="https://cdn.jsdelivr.net/npm/tsparticles-preset-bubbles#2/tsparticles.preset.bubbles.bundle.min.js"></script>
<script>
(async () => {
await loadBubblesPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
autoPlay: false, //works
// FullScreen: false, //nothing changes
FullScreen: { enable: false, zIndex: 99 }, ////nothing changes
preset: "bubbles",
});
})();
</script>
</body>
</html>
`
I've tried changing inline styling and find a way to set it in config. Version v1 was sized according to its parent. With version v2 I'm stuck and out of ideas.
The property for disabling the full screen options is fullScreen, not FullScreen. The options are case sensitive.
Related
I am trying to animate elements that are added to the DOM via javascript with GSAP.
Here is the MRE:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Recipe Search</title>
</head>
<body>
<section id="searchBackgroundImage">
<section id="searchSection">
<h1>What's In The Fridge</h1>
<button type="button" id="btn">Seach!</button>
<div id="recipeContainer"></div>
<div id="test"><h2>Test</h2></div>
</section>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script text="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS
h2 {
opacity: 0.1;
}
JS
document.querySelector('#btn').addEventListener('click',() => {
getRecipe();
timeline.play();
});
function getRecipe(){
let recipeTitles = `<h2>Cheese Burger</h2><h2>Ham Sandwich</h2>`
document.querySelector('#recipeContainer').innerHTML = recipeTitles
}
const timeline = gsap.timeline({
duration: 1,
paused: true
});
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
So I would like to change the opacity of the h2s.
It is not working because the h2s don't exist when the page first loads.
I was hoping that setting it to paused and only having it play on click would fix the problem, but unfortunately not.
If I change
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
to
timeline
.to(
'#test h2', {
opacity: 1
}
)
Then it works fine for that element.
So it has to be the element being dynamically created but I haven't been able to find a solution.
I've been reading the docs and it seems like I might be able to use TimelineMax and onComplete but I can't figure out how to implement it here.
Here is the codepen:
https://codepen.io/acodeaday/pen/RwJbrWa
Thank you for any help.
The problem here is that the javascript file is compiled before the click event. This means that the browser encounters the following error before the event listener is called.
Solution: Defining the timeline.to() properties inside the event listener will circumvent this problem.
document.querySelector("#btn").addEventListener("click", () => {
getRecipe();
timeline.to("#recipeContainer h2", {
opacity: 1,
});
timeline.play();
});
Describe the issue/behavior that seems buggy
❌ when typing it adds the text/code in reverse when typing.
Sample Code or Instructions to Reproduce
when using contendeditable attribute in the <code> HTML tag element.
<pre>
<code contenteditable="true"></code>
</pre>
with an input event listener
and using this js library https://highlightjs.org/ for syntax highlighting
const code = document.querySelector("code");
code.addEventListener("input", () => {
hljs.highlightElement(code); // this came from this js library https://highlightjs.org/
// other code logic (mostly saving to localStorage)
}
like you saw in every typed letter I will add the highlight functionality,
but seems that completely breaks the typing direction
and yes, input events also work for not <input> tags if they have that attribute (contenteditable)
docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
source code:
https://jsfiddle.net/20zpL5bk/
also another bug is that we can't go down the line break. (only if there is hljs.highlightElement(code);)
✅ here without hljs.highlightElement(code); is super fluid and can't do everything (but not syntax highlight):
(how can I have fluid, normal writing with also syntax highlighting in real-time (input event)?
is my code wrong for some reason?)
Expected behavior
✅ how should be: <div></div> or hello world
❌ how it is now: >vid/<>vid< or dlrow olleh
Additional context
I tried to write the code in reverse myself manually >vid/<dlrow olleh>vid<, and yes the highlighting works.
but the direction is always the wrong way. (also deleting isn't possible)
another interesting thing is if you copy and paste (CTRL+V) the correct code <div>hello world</div> it works fine. (but still remain in the same line, no multiple lines)
also the cursor of the input doesn't move with the text but remains at the start
source code:
https://jsfiddle.net/20zpL5bk/
let inputs = document.querySelectorAll("textarea");
let langs = ["html", "css", "javascript"];
let outputs = document.querySelectorAll("code");
outputs.forEach((code, index) => {
// ✅ make it like input
code.contentEditable = "true";
// ✅ if there is some code from localStorage we add it to the website.
code.innerHTML = localStorage.getItem(`${langs[index]}`) || "";
// ✅ styling of your library (work great when app start)
hljs.highlightElement(code);
code.addEventListener("input", () => {
localStorage.setItem(`${langs[index]}`, code.innerHTML);
// ❌ why the typing is reversed here?
// if the next line isn't there then it work fine, otherwise it will change the values to reversed
hljs.highlightElement(code);
// console.log
// example to type <div></div>
// what I get >vid/<>vid<
});
});
body {
--gap: 2vmin;
margin: 0;
height: 100vh;
}
#container {
display: flex;
height: 100%;
gap: var(--gap);
padding: var(--gap);
box-sizing: border-box;
}
#container>* {
flex: 1;
display: grid;
grid-template-rows: auto 1fr;
gap: var(--gap);
}
code {
overflow: auto;
white-space: pre;
border: 0.2rem solid;
border-radius: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div>
<span>HTML</span>
<code class="language-html" style="border-color: orange;"></code>
</div>
<div>
<span>CSS</span>
<code class="language-css" style="border-color: blue;"></code>
</div>
<div>
<span>JS</span>
<code class="language-js" style="border-color: yellow;"></code>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
I am new to Javascript and I can't figure out why am I getting this error.
Here is my code:
const bckg = document.querySelector(".bckg");
const compStyle = getComputedStyle(bckg);
body {
box-sizing: content-box;
position: relative;
}
.visible {
position: relative;
top: 50px;
margin: auto;
background-color: bisque;
height: 300px;
width: 600px;
overflow: hidden;
}
.bckg {
position: absolute;
left: 0px;
width: 1200px;
height: 300px;
background-image: url("bckg.jpg")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="script.js"></script>
<div class="visible">
<div class="bckg" id="bckg">
<div class="player"></div>
<div class="obstacle"></div>
</div>
</div>
</body>
</html>
This error I get in Mozilla: "Uncaught TypeError: Window.getComputedStyle: Argument 1 is not an object."
What could it be?
Your script tag needs to be moved to the very end of the body. The script loaded to early.
This error I get in Mozilla: "Uncaught TypeError: Window.getComputedStyle: Argument 1 is not an object." What could it be?
If you read the error message it says it could not find the argument.
The reason for this is that browsers loads JavaScript tags synchronously. It has been a standard since JavaScript was first introduced.
Solution snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="visible">
<div class="bckg" id="bckg">
<div class="player"></div>
<div class="obstacle">
</div>
</div>
</div>
<!-- I moved the script to the end of the body -->
<script src="script.js"></script>
</body>
</html>
Adding a console.log you could have seen that the argument for Window.getComputedStyle is indeed not an object
const bckg = document.querySelector(".bckg");
console.log(bckg); // will return undefined
You can also try out the "defer" attribute, however it has been best practice to move the script tags to the end of the body for compatibility with different older browsers. See https://www.w3schools.com/tags/att_script_defer.asp
Another alternative is to use the "DOMContentLoaded" event
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Delta Boukensha is right - your document hasn't finished loading.
So either put your script at the bottom of your markup as Delta suggests or use a utility function to run code once the document has rendered such as :
function whenDOMready( func ) {
switch( String( document.readyState ) ) {
case "complete":
case "loaded":
case "interactive":
func();
break;
default:
window.addEventListener("DOMContentLoaded", (e) => func());
}
}
Then call it from wherever you want like this :
let bckg;
let compStyle;
function domReady() {
bckg = document.querySelector(".bckg");
compStyle = getComputedStyle(bckg);
/* ...other code here */
}
whenDOMready( domReady );
There are two benefits this utility gives you :
No matter when you call it it will work - either calling your function (func) immediately or when the DOMContentLoaded event fires. If you just add the event listener directly you have to worry about if it has already fired or not.
You are guaranteed that your DOM is ready for inspection and access.
i created buttons to zoom to particular countries. However when i clicked the button,Singapore it navigate to Singapore but i cant see exactly the Singapore country.
So i wanted a better image.
Here is my code below...
<!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>My Work</title>
<script src="../Build/Cesium/Cesium.js">
</script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 98%; height: 98%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer">
<button type="button" class="cesium-button" onclick = "zoomToSingapore();" data-toggle="tooltip" data-placement="bottom" title="Please click me if you want to zoom to Singapore">Zoom To Singapore</button>
<button type="button" class="cesium-button" onclick = "zoomToMalaysia();" data-toggle="tooltip" data-placement="bottom" title="Please click me if you want to zoom to Malaysia">Zoom To Malaysia</button>
</div>
<div id="cesiumContainer" style="position:absolute;top:24px;right:24px;width:38px;height:38px;"></div>
<script>
viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
navigationHelpButton: false,
infoBox: false
});
function zoomToSingapore()
{
var singapore = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(singapore, new Cesium.Cartesian3(0.0, 0.0, 4200000.0));
}
function zoomToMalaysia()
{
var malaysia = Cesium.Cartesian3.fromDegrees(101.9758, 4.2105);
viewer.camera.lookAt(malaysia, new Cesium.Cartesian3(0.0, 0.0, 4200000.0));
}
</script>
</body>
</html>
My question, if i click Singapore, it will zoom to Singapore just like the second image which i have attached to this question.. What do i need to zoom just like the last image???Can you please help me?? Thank you
It looks like your height is too high. Try changing 4200000.0 to 42000.0.
Edit: Here's a more complete code example. This one turns on labels, so you can see the borders. Paste this code into Sandcastle and run it with F8.
var imagery = Cesium.createDefaultImageryProviderViewModels();
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProviderViewModels: imagery,
selectedImageryProviderViewModel: imagery[1]
});
var height = 50000;
var singapore = Cesium.Cartesian3.fromDegrees(103.85, 1.33, height);
viewer.camera.flyTo({
destination: singapore,
duration: 0
});
Above, I get the default list of imagery providers, and pre-select the one with labels turned on. Then I fly to a point 50km above Singapore, using duration: 0 to snap the camera there.
Touch events like touchstart or touchend are not fired when attached to the window inside an IFrame on iOS devices.
Here's a very simple example:
parent.html
<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<title>Touch Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<iframe style="width: 100%; height: 100%; border: none;" src="child.html"></iframe>
</body>
</html>
child.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Touch Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 8px;
}
div.header {
margin-bottom: 8px;
}
div.text-entry {
font: 300 1rem/1.25 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
color: rgb(64, 64, 64);
}
</style>
<script>
window.onload = function() {
function addEvent(event) {
var div = document.createElement('div');
div.className = 'text-entry';
div.textContent = new Date().toLocaleTimeString() + ' Event "' + event.type + '" detected';
document.body.appendChild(div);
}
window.addEventListener('touchstart', addEvent.bind(null), false);
window.addEventListener('touchend', addEvent.bind(null), false);
}
</script>
</head>
<body>
<div class="text-entry header">Clicks/touches on the viewport should add some text entries...</div>
</body>
</html>
I've found multiple questions regarding scroll issues on iOS within IFrames and some regarding events, but none seems to have a valid solution for the issue I'm experiencing right now.
I've created a CodePen and a JSFiddle for everyone to play around which show the exact same behavior since both execute the code within an IFrame.
Solution 1:
Inside the iframe, add a dummy listener to the document object:
document.addEventListener('touchstart', {}); // in iframe
It seems Safari on IOS denies touch listeners to window unless other DOM objects also have listeners.
Solution 2:
Inside the top window, add a dummy listener to any object (including window):
window.addEventListener('touchstart', {}); // in top window
It seems Safari on IOS denies touch listeners to window in iframes unless the parent also has listeners.
Either of the above solutions works (they're not both needed, only one).
Tested on:
Safari 9.0 / IOS: 9.3.5
Safari 11.0 / IOS: 11.3
Adding following CSS to the IFrame content (child.html in my example above) solved the issue for me:
html, body {
touch-action: auto;
}