I have an Iframe that loops through an array of published Google sheets. Is there a way that I can have the iframe scroll down over time to display all the data from the published URLs?
Ideally, I would like to get the results sheets to start from the top and over 30 seconds, scroll down to the bottom, then when at the bottom, switch to the next results sheet. This would then continually loop from Site 1 to Site 5.
Here is my code:
var sites = [
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1991236368&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=205619546&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1480439822&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1101347808&single=true"
];
var currentSite = sites.length;
$(document).ready(function() {
var $iframe = $("iframe").attr("src", "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true");
setInterval(function() {
(currentSite == 1) ? currentSite = sites.length - 1: currentSite = currentSite - 1;
$iframe.attr("src", sites[currentSite]);
}, 10000);
});
iframe {
height: 768px;
width: 1024px;
border: 2px solid gray;
}
body {
width: 1024px;
length: 768px;
background-color: #C9C9C9;
margin: 0 auto;
}
#heading-wrapper {
margin: 0 auto;
background-color: #FF6600;
border: 2px solid black;
text-align: center;
width: 1024px;
}
#heading-wrapper h1 {
font-family: Arial;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<head>
<title>Live Results</title>
</head>
<body>
<div id="heading-wrapper">
<h1>Live Results</h1>
</div>
<iframe></iframe>
</body>
I don't even know if it is possible to have it scroll slowly down.
Take a look at
iframe.contentWindow.scrollTo(x, y);
You could create a function that calls that periodically with an incremented y scroll amount.
use set interval and change the scrollTop property of your containing element:
setInterval(changeScrollPosition, 50); // every 50 milliseconds
function changeScrollPosition(el)
{
var currentTop = el.scrollTop;
el.scrollTop = currentTop + howMuchYouWantToScrollBy;
}
Related
setInterval(function scroll() {
$(".box_auto").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500);
});
setTimeout(function() {
$('html, body').animate({
scrollTop: 0
}, 5000);
}, 4000);
return scroll;
}(), 9000);
.auto_scroll_top {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.auto_scroll_top .box_auto {
display: inline-block;
min-width: 400px;
height: 200px;
background-color: orange;
border-radius: 10px;
margin: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
</div>
I am trying to make a website clone and one of the things I have to do is the following.
I have many divs(boxes) in a horizontal position which you can scroll.I want it to scroll automatically on each div(to jump from one div to the next, and at the end to repeat itself)
So it should be something like div1 pause.. div2 pause.. etc.
Any ideas how to do it?
Here's an example which is fully commented. I added some numbers to your div so you can see whats going on. I found a nice answer here https://stackoverflow.com/a/45388452/5604852 which I then adapted using setInterval() to work through the collection (https://javascript.info/settimeout-setinterval#setinterval).
The code is fully commented so should be explanatory.
// Starting index
let auto_index = 0;
// Total number of divs
let total = document.getElementsByClassName('box_auto').length;
// Set interval
let timerId = setInterval( function() {
// Increase index
auto_index = auto_index + 1
// Check if index is above total
if (auto_index > total - 1 ) {
// Reset if it is
auto_index = 0;
}
scrollTo(auto_index);
}, 2000); // 2000 = 2 seconds
// Adapted from this answer:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView
// Adding smooth and center for design reasons
function scrollTo(item) {
document.getElementsByClassName('box_auto')[item].scrollIntoView({ behavior: 'smooth', block: 'center' });
};
.auto_scroll_top{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.box_auto{
display:inline-block;
min-width:300px;
height:200px;
background-color: orange;
border-radius: 10px;
margin:0 5px;
}
.box_auto {
font-size: 150px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto">1</div>
<div class="box_auto">2</div>
<div class="box_auto">3</div>
<div class="box_auto">4</div>
</div>
here are my codes for decreasing the width of an selected element(class = "life_bar"), but as my attached pictures show, I want it to decrease its width from left or right( let's do left as example), but it always goes from both side, what should I do?
here are jQuery codes
$(function () {
var timmer;
gocount();
function gocount(){
timmer = setInterval(function () {
var life_bar_width = $(".life_bar").width();
life_bar_width -= 100;
$(".life_bar").css( {width: life_bar_width,
left: '-50px'})
},1000);
}
});
here are css codes
.life_bar{
width: 500px;
height: 10px;
background: crimson;
margin: 100px auto;
}
here are html codes
<body>
<div class="life_bar"></div>
</body>
using translate negative on X every interval tick:
$(function () {
var timmer;
gocount();
let counter = 1
function gocount(){
timmer = setInterval(function () {
var life_bar_width = $(".life_bar").width();
life_bar_width -= 100;
$(".life_bar").css({
width: life_bar_width,
left: '-50px',
transform: `translate(${-50*counter}px)`
})
counter++
},1000);
}
});
.life_bar{
width: 500px;
height: 10px;
background: crimson;
margin: 100px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="life_bar"></div>
I am an absolute beginner to Java Script. My task is to make an interactive radio where a song is played if a mouse is in a certain position on the map. It works but only in a certain size of the browser window. If I change the size the "song positions" are misplaced.
I am using p5 libraries.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Trial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> </script>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<center><p class="title">CHRISTMAS RADIO</p></center>
<div class="radio" id="clickArea" onmousemove="trackMouse()">
<img id="radio" onclick="rotate()" src="images/radio.png""></img>
</div>
</body>
</html>
This is my CSS code:
canvas{
background-image: url("images/Map1.png");
background-position: center center;
background-repeat: no-repeat no-repeat;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
border:solid 2px;
border-bottom-color:#ffe;
border-left-color:#eed;
border-right-color:#eed;
border-top-color:#ccb;
max-height:100%;
max-width:100%;
}
p.title{
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
font-weight: 900;
color: white;
text-shadow: -2px 0 #c61819, 0 2px #c61819, 2px 0 #c61819, 0 -2px #c61819;
}
.radio{
position:relative;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
border: solid 2px;
border-color:#52361b;
padding:0;
width: 944px;
height:165px;
}
This is my Java Script:
var x = "";
var y = "";
var song1;
var song2;
function preload() {
song1 = loadSound('audio/2.mp3');
song2 = loadSound('audio/3.mp3');
}
function setup() {
createCanvas(944,566);
}
function draw() {
clear();
x = mouseX;
rect(x, y, 20, 565);
fill(82, 54, 27);
}
function trackMouse(){
var x = event.clientX;
console.log(window.screenX);
if(x>315&&x<340){
song1.loop();
document.getElementById("clickArea").style.backgroundColor="white";
} else {
song1.stop();
document.getElementById("clickArea").style.backgroundColor="black";
}
if(x>400&&x<450){
song2.loop();
document.getElementById("clickArea").style.backgroundColor="#FFDAB9";
} else {
song2.stop();
document.getElementById("clickArea").style.backgroundColor="black";
}
}
//document.getElementById("canvas").style.background-image="url("images/Map2.png")";
Do you have any suggestions/advices?
That is because you're using absolute values in pixels for locating the areas on the radio map and you're accessing them in var x. You would need relative values that is in percentage to have them constant even when the browser is resized.
You can try doing it by: getting the window.innerWidth and window.innerHeight, store it in variables say v1 and v2, that is your 100%. Now to obtain relative position coordinates, divide the current position you're using say 315 by it and multiply by 100.
Example : Say the width is 1200 pixels at maximize then, 315 is 26.25%
of 1200. That's the value you will use and it will work even when the
browser is resized.
(Absolute coodinate/ Complete width at maximized screen) X 100 = relative coordinate
(315/1200)x100 = 26.25%
Remember to make the changes to your code according to that and it should work fine. Hope, it gives you the idea.
I am trying to add automoving with pagination for table in HTML.
For eg i have table with 100 rows and then i am doing pagination for it with 10 records on one page.So there will be 10 pages with 10 records each.
I nedd to do it automatically so that user dont have to specifically click on the page and see.
I used paging.js
with below code
<style type="text/css">
.paging-nav {
text-align: right;
padding-top: 2px;
}
.paging-nav a {
margin: auto 1px;
text-decoration: none;
display: inline-block;
padding: 1px 7px;
background: #91b9e6;
color: white;
border-radius: 3px;
}
.paging-nav .selected-page {
background: #187ed5;
font-weight: bold;
}
.paging-nav,
#tableData {
'width: 400px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
</style>
$(document).ready(function() {
$('#file').paging({limit:10});
});
Here file is id of table which is to be paginated. How can i go about changing page of table automatically? All answers are welcome.
Here is an example for how to start with it..
beware this is just an example, do not copy! for your own protection
//create
el = $("<table></table>");
for (var i = 1; i !== 100; i++) {
el.append("<tr><td>" + i + "</td><td>buuurp</td></tr>");
}
el.data("intStart", 1);
el.appendTo("body");
//fuction
function showRow(j = 10) { //default var j = 10; you can call showRow(50) for 50 as example
var i = $("table").data().intStart; //grabs data that hold the number of currect first element to view
$("tr").hide();
// hides all
$("tr").filter(function(index) {
return index >= i - 1 && index < i + j - 1; //jquery has 0-9 we count in 1-10 so -1
}).show(); //shows the one needed
$("table").data().intStart += j; //addes 'j' to the counter
if ($("table").data().intStart > $("table").children("tr").lenght) {
clearInterval(timer); //if we reach the end we can kill this
}
}
showRow();
var timer = setInterval(function() {
showRow();
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to scroll 2 divs when I start the page. I add to the onload the events, but it stops here:
var cross_marquee=document.getElementById(marque)
cross_marquee.style.top=0
Can someone help me?
The code is:
var delayb4scroll=2000
var marqueespeed=1
var pauseit=0
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
var actualheightDiv2=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.sty le.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+ "px"
}
function initializemarquee(marque, container){
var cross_marquee=document.getElementById(marque)
cross_marquee.style.top=0
marqueeheight=document.getElementById(container).o ffsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()" ,30)', delayb4scroll)
}
window.onload=initializemarquee('wtvmarquee', 'wtmarqueecontainer')
window.onload=initializemarquee("wtvmarqueeDiv2", "wtmarqueecontainerDiv2")
You're overwriting the onload event.
Create a function that initializes both marquees:
window.onload = function(e)
{
initializemarquee('wtvmarquee', 'wtmarqueecontainer');
initializemarquee("wtvmarqueeDiv2", "wtmarqueecontainerDiv2");
}
Additionally, shouldn't be cross_marquee.style.top="0px" ?
Just found another code and modified it to my situation, and its working :)
Tks for the help joel ;)
<style type="text/css">
.scrollBox {
/* The box displaying the scrolling content */
position: absolute;
top: 30px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 200px;
}
.scrollBox2 {
/* The box displaying the scrolling content */
position: absolute;
top: 300px;
left: 200px;
width: 180px;
height: 200px;
border: 1px dashed #aaaaaa;
overflow: hidden;
}
.scrollTxt2 {
/* the box that actually contains our content */
font: normal 12px sans-serif;
position: relative;
top: 470px;
}
</style>
<script type="text/javascript">
var scrollSpeed =1; // number of pixels to change every frame
var scrollDepth =200; // height of your display box
var scrollHeight=0; // this will hold the height of your content
var scrollDelay=38; // delay between movements.
var scrollPos=scrollDepth; // current scroll position
var scrollMov=scrollSpeed; // for stop&start of scroll
var scrollPos2=scrollDepth; // current scroll position
var scrollMov2=scrollSpeed; // for stop&start of scroll
function doScroll() {
if(scrollHeight==0) { getHeight(); }
scrollPos-=scrollMov;
if(scrollPos< (0-scrollHeight)) { scrollPos=scrollDepth; }
document.getElementById('scrollTxt').style.top=scrollPos+'px';
setTimeout('doScroll();', scrollDelay);
}
function getHeight() {
scrollHeight=document.getElementById('scrollTxt').offsetHeight;
}
function doScroll2() {
if(scrollHeight==0) { getHeight2(); }
scrollPos2 -= scrollMov2;
if(scrollPos2< (0-scrollHeight)) { scrollPos2=scrollDepth; }
document.getElementById('scrollTxt2').style.top=scrollPos2 +'px';
setTimeout('doScroll2();', scrollDelay);
}
function getHeight2() {
scrollHeight=document.getElementById('scrollTxt2').offsetHeight;
}
window.onload = function(e)
{
doScroll();
doScroll2();
}
</script>