The basic thing I'm trying to do here is iterate through this JSON object containing 2 records (always only 2 records) and getting the value, which is a URL. Then setting the src of two divs to each of those URLS (which then creates two divs on the page that embed a PDF file), and finally toggling the display of each so that at any given time one of the embeds is display:block and one is display:none (only one embed should show at any given time, and they should cycle every 60 seconds.
The issues I have right now:
How can I change my forEach here in order to properly toggle the displays of the embed sections, and how would I properly set the src of each embed with the corresponding URL value from the object?
@section('content')
<embed class="pdf" src="https://test.s3.aws/test1.pdf#zoom=85&view=Fit&scrollbar=0&toolbar=0&statusbar=0&navpanes=0 " style="margin-top: 40px;position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
<embed class="pdf" src="https://test.s3.aws/test2.pdf#zoom=85&view=Fit&scrollbar=0&toolbar=0&statusbar=0&navpanes=0 " style="margin-top: 40px;position:absolute; left: 0; top: 0; display:none" width="100%" height="100%" type="application/pdf">
@endsection
@section('loadjs')
<script>
var files = {"1":"https://test.s3.aws/test1.pdf",
"2":"https://test.s3.aws/test2.pdf"}
;
const result = JSON.parse(files);
Object.entries(result).forEach((entry) => {
const [key, value] = entry;
console.log(`${key}: ${value}`);
//need to get the URL, which is value here, into the src of each div
})
const divs = document.getElementsByClassName('pdf');
for(let i = 0; i < divs.length; i++) {
setTimeout(() => {
divs[i].style.display = none;
}, i * 60000)
}
//toggle display:none for each embed with a 60second timer
</script>
@endsection
Build the element you need with javascript
Function myEmbeds (opt) {
let p = document.createElement("embed")
p.height = window.innerHeight
p.source = files[opt] // the url
p.type = "application/pdf"
p.width = window.innerWidth
return p
}
setTimeout(() => {
document.appendChild(myEmbeds(1)) //i is even etc...
}, i * 60000)