There's a marquee that goes up.
When the text is done scrolling (before it comes up again), the marquee area becomes empty for about 2 seconds and then then comes back up again.
Is there any way to prevent it from being empty, and making the first line come up before the last one goes up?
http://jsfiddle.net/WArVQ/2/
You can do it using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Scroll demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="container" style="position: absolute; width: 200px; height: 200px; background-color: grey">
</div>
<script type="text/javascript">
var maxy = 200; // adjust
var lineHeight = 17; // adjust
var lines = new Array("line1", "line2", "line3");
var textDivs = new Array(lines.length);
for(var i=0;i<lines.length;i++) {
var divx = document.createElement("div");
var divxText = document.createTextNode(lines[i]);
divx.style.top=String(maxy-(lines.length-i)*lineHeight)+"px";
divx.style.position="absolute";
divx.appendChild(divxText);
textDivs[i] = divx;
document.getElementById("container").appendChild(divx);
}
window.setInterval("scroll()", 50);
function scroll() {
for(var i=0;i<textDivs.length;i++) {
var divx = textDivs[i];
var y = parseInt(divx.style.top);
y = y-1;
if(y<0) y = maxy-lineHeight;
divx.style.top =String(y)+"px";
}
}
</script>
</body>
</html>
Related
There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})
i just want to upload file from my external html(localhost) then upload to Google Drive, or how can i get the link of last uploaded file to my php or html. Sorry for my bad english i hope you understand my problem, but its big problem for our project. Any feedback will make a big help for us. Thank you!
This is my code from Code.gs
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function uploadFiles(data)
{
var file = data.myFiles;
var myfolder = checkFolder();
var folder = DriveApp.getFolderById(myfolder);
var createFile = folder.createFile(file);
return createFile.getUrl();
}
function checkFolder()
{
var folder = DriveApp.searchFolders("title contains 'QCU LMS'");
if(folder.hasNext()){
var folderId = folder.next().getId();
Logger.log(folderId);
return folderId;
}else{
Logger.log("No QCU LMS Folder Found.");
var folders = DriveApp.createFolder("QCU LMS");
folders.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.EDIT);
return folders.getId();
}
}
This is my code from index.html
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.buttonload {
background-color: #4CAF50; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>
<h1>Upload Files</h1>
<form>
<input type="file" id="myFiles" name="myFiles" required>
<br>
</br>
<input type="button" id="submitBtn" value="Upload Files" class="buttonload">
<div id="mySrc">
<input type="text" id="resps">
</div>
<div id="myDIV">
<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>Uploading...
</button>
</div>
</form>
<script>
var x = document.getElementById("myDIV");
var y = document.getElementById("submitBtn");
x.style.display = "none";
document.getElementById('submitBtn').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode);
x.style.display = "block";
y.style.display = "none";
})
function onSuccess(data){
document.getElementById('resp').href = data;
document.getElementById('resps').value = data;
document.getElementById('resp').innerHTML = "Uploaded Check Here";
x.style.display = "none";
y.style.display = "inline-block";
}
</script>
</body>
</html>
cant believe im asking this question but,
why this work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
and this doesn't?
its pretty much the same code,
if anyone can edit the code that would be brilliant?
<!DOCTYPE html>
<html>
<head>
<title>Splash!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="refresh" content="6.5;url=home.html" />
<link rel="stylesheet" href="../css/stylessplash.css" type="text/css">
</head>
<body id="posts">
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrapper">
<p>
<span>u</span>
<span>u</span>
<span>H</span>
<span>!</span>
</p>
</div>
</body>
</html>
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
On your second code block you are simply creating a function
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
It doesn't run because you are not invoking the function in form load or whenever you want. Which is shown in your 1st code block
<body onload="return ran_col()">
You can use that code to set the background to a specific element (not to the whole body like you did). To set the background of the whole page, instead of
document.getElementById('posts').style.background = color;
you will need
document.body.style.backgroundColor = color;
Hope this helped!
I am really new angular and I have been struggling with this issue all day long. I am trying to add check boxes dynamically to my html page using ng-repeat and bind their ng-data-model.
Here is my code :
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-data-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
ng-data-model is wrong. Use ng-model or data-ng-model
...
<input ng-model="value.disabled" type="checkbox">
...
Code:
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
<script>
(function(angular) {
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", ['$scope',function($scope) {
$scope.legsDurations = {};
var amountOfLegs = 3;
for(var k = 1; k <= amountOfLegs; k++) {
$scope.legsDurations[k] = {
disabled: true
};
}
}]);
})(window.angular);
</script>
</head>
<body ng-app="helloApp">
<div ng-controller="HelloCtrl">
<div ng-repeat="value in legsDurations">
<input ng-model="value.disabled" type="checkbox" >
{{value.disabled}}
</div>
</div>
</body>
</html>
this is so simple and I searched but couldn't find the exact answer.
All I want to do is have a div that will change color when you click a link. I want to have about 3 or 4 color choices. How do I do it?
Thanks!
Heres a quick solutions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeColor(color){
var div = document.getElementById('box');
div.style.backgroundColor = color;
}
</script>
</head>
<body onload="changeColor('green')">
<div id="box" style="width:200px; height:200px;"></div>
Yellow|
Green|
Blue|
White
</body>
</html>
Demo: http://jsfiddle.net/jnAem/
JS:
var els = document.getElementsByClassName('change-color'),
target = document.getElementById('target'),
changeColor = function(){
target.style.backgroundColor = this.getAttribute('data-color');
};
for(var i=els.length-1; i>=0; --i){
els[i].onclick = changeColor;
}
HTML:
<div id="target"></div>
<button class="change-color" data-color="red">Red</button>
<button class="change-color" data-color="#000">Black</button>
<button class="change-color" data-color="rgb(0,0,255)">Blue</button>
Note that if you want all color changers to be children of same element, you can use event delegation and reduce the previous code to
JS:
document.getElementById('color-changers').onclick = function(e) {
var color = (e ? e.target : window.event.srcElement).getAttribute('data-color');
if(color){
target.style.backgroundColor = color;
}
}
HTML:
<div id="target"></div>
<div id="color-changers">
<button data-color="red">Red</button>
<button data-color="#000">Black</button>
<button data-color="rgb(0,0,255)">Blue</button>
</div>
Demo: http://jsfiddle.net/jnAem/1/