Hello im trying to get a code working for tampermonkey, Where if you click a button it will hide a piece of HTML and when you click it again it shows up again.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
newImg4.addEventListener("click", () => {
let w = HIDE HTML HERE!("<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>");
});
Any help would be greatly appriciated!
Thanks in advance.
You have to first get the iframe (the comment from Hisham missed that), and then set its display style to none.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
var elem = document.getElementsByTagName("iframe")[0];
newImg4.addEventListener("click", () => { if (elem.style.display === "none") { elem.style.display = "block"; } else { elem.style.display = "none"; } });
<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
Related
I hope you could give me a few minutes of your time. I am trying to implement a dark background canvas to cover up a video in its background, the code beneath should be able to do that with fill style and the source over, but for some reason it is not, do you have an Idea of how to solve this?
let canvas = useRef(null);
const size = useWindowSize();
const { currentTheme } = useGlobalStateContext()
useEffect(() => {
let renderingElement = canvas.current;
let drawingElement = renderingElement.cloneNode();
let drawingCtx = drawingElement.getContext("2d");
let renderingCtx = drawingElement.getContext("2d");
let lastX;
let lastY;
let moving = false;
renderingCtx.globalCompositeOperation = "source-over"
renderingCtx.fillStyle = currentTheme === "dark" ? "#000000" : "#ffffff";
renderingCtx.fillRect(0,0, size.width, size.height)
console.log(renderingCtx)
}, [])
return (
<Banner>
<Video>
<video
height="100%"
width="100%"
loop
autoPlay
src={require("../../assets/video/video.mp4")}
/>
</Video>
<Canvas
height={size.height}
width={size.width}
ref={canvas}
/>
<BannerTitle variants={container} initial="initial" animate="animate">
<Headline variants={item}>DIG</Headline>
<Headline variants={item}>DEEP</Headline>
</BannerTitle>
</Banner>
)
}
===============================
i am making use of styled components,
import styled from "styled-components"
import { motion } from "framer-motion"
//Banner
export const Banner = styled.div`
background: ${props => props.theme.background};
height: 100vh;
width: 100%;
position: relative;
margin-bottom: 296px;
`
export const Video = styled.div`
height: 100%;
width: 100%;
video {
object-fit: cover;
}
`
export const Canvas = styled.canvas`
position: absolute;
top: 0;
left: 0;
height: 100%;
display: block;
`
This block of code is applying a dark background to the canvas so it can cover up the video behind it
but instead of covering the video up (the screen would be dark and the video will be playing in the background) instead something else shows
This is the image of the final result
Well, the video's autoplay wasn't working because of some new security fixes. Read more and you need to have the muted attribute on the HTMLMediaElement.
I created an event listener on the video so that when it starts playing, it removes the muted attribute. I passed the once option so the event would be called once.
const canvas = document.getElementById('canvas');
const video = document.getElementById('video');
const ctx = canvas.getContext('2d');
video.addEventListener('play', _ => {
console.log('playing');
canvas.width = getComputedStyle(video).width.slice(0, -2);
canvas.height = getComputedStyle(video).height.slice(0, -2);
ctx.fillRect(0, 0, canvas.width, canvas.height);
}, { once: true });
body {
position: relative;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
video {
width: 75vw;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" muted autoplay controls></video>
<canvas id="canvas"></canvas>
I need to show my paragraph inside my <div> when click on the <div>. This is my code:
const area = document.getElementById("area");
const popup = document.getElementById("popup");
function showPopup(event) {
let x = event.clientX;
let y = event.clientY;
popup.style.left = `${x}px`;
popup.style.top = `${y}px`;
popup.style.visibility = "visible";
}
area.addEventListener("mousedown", showPopup);
.area {
border: 1px solid;
position: absolute;
height: 200px;
width: 200px;
}
.popup {
visibility: hidden;
position: absolute;
display: inline-block;
}
<div id="area" class="area">
<p class="popup" id="popup">popup</p>
</div>
Note that this is inside another main body <div> (also with position: absolute).
Try this
<div id="area">
<div class="area""
<p class="popup" id="popup">popup</p>
</div>
</div>
I tested your code and observed you are changing style.top property based on your ClientX value which is causing popup element to appear over random position. Use following updated code and it's should be good.
function showPopup(event) {
console.log(event.clientX, event.clientY)
let x = event.clientX;
let y = event.clientY;
popup.style.left = `${x - 8}px`;
popup.style.top = `${y - 8}px`;
popup.style.visibility = "visible";
}
and few CSS changes as -
.area {
border: 1px solid;
position: relative;
height: 200px;
width: 200px;
}
.popup {
visibility: hidden;
position: absolute;
display: inline-block;
margin: 0;
}
For more close positioning of popup element.
I am having problems with my game - it resizes right on some computers but not others can anyone help see what's wrong? it's at http://pking.io
here's the issue on Chrome:
pking.io loading issue
but it works fine on firefox on Mac OS or when I right after I resize the window on chrome on Max OS it works correctly, and when I try it on Windows I have the same issue on Firefox as well like in the screenshot
CSS:
body { padding: 0; margin: 0px; width: 100%; height: 100% }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 0; top: 0; bottom: 0; }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: url('background.jpg'); background- size:cover; no-repeat }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 154px; background: url('logo.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-light.png') no-repeat center } #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
HTML:
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
</div>
<script type="fb3e0aeb9b24d32156234654-text/javascript">
var buildUrl = "Build";
var loaderUrl = buildUrl + "/minimal.loader.js";
var config = {
dataUrl: buildUrl + "/minimal.data",
frameworkUrl: buildUrl + "/minimal.framework.js",
codeUrl: buildUrl + "/minimal.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "K Corporation",
productName: "PKing.io",
productVersion: "0.4a",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var oldContainerWidth = container.style.width;
var oldContainerHeight = container.style.height;
container.style.width = "100%";
container.style.height = "100%";
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
// fullscreenButton.onclick = () => {
// unityInstance.SetFullscreen(1);
// };
container.style.width = oldContainerWidth;
container.style.height = oldContainerHeight;
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
You can adjust the else part here for the customize size if possible in the latest unity build.
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "100%"; // here it can be adjusted in px
canvas.style.height = "100%"; // in my case i used 1305px * 350px
}
loadingBar.style.display = "block";
For the older versions use
var myGame = UnityLoader.instantiate(gameContainer, "http://mydomain/myfolder/Build/mygame.json", {width: 800, height: 600});
I have been trying to get a script working to toggle a piece of HTML when i toggle a button,
But so far i have not been able to get it working,
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
newImg5.addEventListener("click", () => {
toggle.html <iframe src="https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
});
It sounds like you want to do something like this:
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
/* create iframe */
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
iframe.setAttribute('src', 'https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark');
iframe.setAttribute('width', '350');
iframe.setAttribute('height', '500');
iframe.setAttribute('allowtransparency', 'true');
/* Make iframe appear on click */
newImg5.addEventListener("click", () => {
document.body.append(iframe);
});
I use the code below to fit my landscape(4:3) photo's in a carousel. But I would like to change the width and height of the .carousel depending on the photo(landscape or portrait). How can I do that?
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: block;
}
.carousel {
/* the percentages below are for a 4:3 landscape photo(1600x1200) */
height: 60%;
width: 70%;
}
/* I need to set height : 70%; and width: 60% for portrait */
Should I add an class to the carousel-item to indicate that it's a landscape or portrait photo?
Create one class for portrait and one for landscape. When the image loads or when you get the image size then determine if it is portrait or landscape and then add the appropriate class to the image or carousel container.
// list of images - as requested you can put this list in a separate js file
// make sure it is before the other code below
var imagesArray = ["https://lorempixel.com/300/500/animals/1", "https://lorempixel.com/300/500/animals/2", "https://lorempixel.com/500/300/animals/1","https://lorempixel.com/500/300/animals/2","https://lorempixel.com/500/300/city/1","https://lorempixel.com/300/500/city/2"];
// when the user clicks the random button
// we get a random image from our list of URLS
// and then set that as the source of the image
function displayImage(direction, isURL) {
var image = document.getElementById("myImage");
var label = document.getElementById("loadingLabel");
var list = imagesArray.slice(); //make a copy
var currentURL = image.src;
var currentIndex;
var index = 0;
var numberOfImages = list.length;
if (isURL==true) {
currentURL = direction;
}
currentIndex = list.indexOf(currentURL);
if (direction=="next") {
index = currentIndex>=list.length-1 ? 0 : currentIndex+1;
}
else if (direction=="previous") {
index = currentIndex<=0 ? list.length-1 : currentIndex-1;
}
else if (direction=="random") {
list.splice(currentIndex,1);
index = Math.floor(Math.random()*list.length);
}
else if (direction=="start") {
index = 0;
}
else if (direction=="end") {
index = list.length-1;
}
else if (isURL) {
if (currentIndex==-1) {
console.log("Image not found in images array. Check the URL");
return;
}
index = currentIndex;
}
else {
console.log("Direction not specified");
}
image.src = list[index];
label.innerHTML = "Loading " + list[index] + "...";
label.title = list[index];
updateNavigationLabel();
}
// this handles when the image has finished loading
// we check if the image is portrait or landscape
// if it is landscape we set the landscape class
// if it is portrait we set the portrait class
function imageLoadHandler(event) {
var image = document.getElementById("myImage");
var carousel = document.getElementById("myCarousel");
var label = document.getElementById("loadingLabel");
var width = image.naturalWidth;
var height = image.naturalHeight;
var isPortrait = width<height;
var isSquare = width==height;
carousel.classList.remove("portrait");
carousel.classList.remove("landscape");
var caption = width + "x" + height;
if (isPortrait) {
caption = "Portrait (" + caption + ")";
carousel.classList.add("portrait");
}
else if (isPortrait==false) {
caption = "Landscape (" + caption + ")";
carousel.classList.add("landscape");
}
image.caption = caption;
label.innerHTML = caption;
updateNavigationLabel();
}
function updateNavigationLabel() {
var image = document.getElementById("myImage");
var label = document.getElementById("navigationLabel");
var list = imagesArray.slice(); //make a copy
var numberOfImages = list.length;
var currentURL = image.src;
currentIndex = list.indexOf(currentURL);
label.innerHTML = currentIndex+1 +" of " + numberOfImages;
}
window.addEventListener("DOMContentLoaded", function() {
var element = document.getElementById("myImage");
var button = document.getElementById("button");
var carousel = document.getElementById("myCarousel");
// listen for when an image loads
element.addEventListener("load", imageLoadHandler);
// listen for when the user clicks on the random button
button.addEventListener("click", function() {
displayImage('random')
});
// Options - load an image when the page loads
// displayImage("start"); // use to load the first image
// displayImage("end"); // use to load the last image
// displayImage("random"); // use to load a random image
// displayImage("specified", "https://lorempixel.com/300/500/animals/2"); // use to load an image in the images array
displayImage("https://lorempixel.com/300/500/animals/2", true);
});
.landscape {
height: 60%;
width: 70%;
outline:2px solid blue;
}
.portrait {
height: 70%;
width: 60%;
outline:2px solid purple;
}
#myCarousel {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#myImage {
position: absolute;
left: 50%;
transform: translateX(-50%);
outline: 1px dashed red;
height: 100%;
width: 100%;
object-fit: contain;
}
#button {
position: fixed;
right: 10px;
top: 50px;
}
#loadingLabel {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font: 10px sans-serif;
white-space: nowrap;
}
#navigationLabel {
font: 10px sans-serif;
}
#navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font: 10px sans-serif;
}
<!-- optionally set images in separate file. order before the main javascript -->
<script src="myimages.js"></script>
<div id="myCarousel" class="landscape">
<img id="myImage">
<label id="loadingLabel"></label>
</div>
<button id="button">random</button>
<div id="navigation">
<button id="prev" onclick="displayImage('previous')">prev</button>
<label id="navigationLabel"></label>
<button id="next" onclick="displayImage('next')">next</button>
</div>