Hemant Vishwakarma: Create iframes showing the end of each one as if I had dragged the scrollbar to the end

In short: what I only need is this graphic map and the team symbol, without the other data appearing on the screen, wasting space and without the scrollbar on the right side that covers the end of the graphic.

var myIframe = document.getElementById('iframe');
myIframe.onload = function(){
    myIframe.contentWindow.scrollTo(0,500);
};

<iframe id="iframe" src="https://www.sofascore.com/event/9626475/attack-momentum/embed"></iframe>

When creating the iframe, it comes with some unwanted data that only takes up space, as I left circled in the image below:

When I decrease the size of the iframe to take up less space, this happens:

What I would like to happen is that when creating the iframe, it would already scroll to the end, thus automatically:

Is there anything I can put in my HTML or script that can do this automatic scrolling when creating iframes?

I also tried using .style("margin-top","-90px"); but doing so happens that the values exceed the iframe limits getting on top of the previous ones:

If you want to do the complete test, use this code and create a CSV file with the sofascore ids (SofaScore_Live.csv):

<html>
    <head>
        <style>
            {
            box-sizing: border-box;
            }
            .vl {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 30.3%;
            margin-left: -3px;
            top: 0;
            }
            .vl2 {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 10.9%;
            margin-left: -3px;
            top: 0;
            }
            .vl3 {
            border-left: 3px solid red;
            height: 1000px;
            position: absolute;
            left: 69%;
            margin-left: -3px;
            top: 0;
            }
            .matches {
            text-align:center;
            float: left;
            width: 700px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .column {
            text-align:center;
            float: left;
            width: 700px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .grid {
            float: left;
            width: 100%;
            }
            .row:after {
            content: "";
            display: table;
            clear: both;
            }
            .button {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            input[type=submit] {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            html {
            overflow: scroll;
            overflow-x: hidden;
            }
            ::-webkit-scrollbar {
            width: 0px; /* remove scrollbar space /
            background: transparent; / optional: just make scrollbar invisible /
            }
            / optional: show position indicator in red */
            ::-webkit-scrollbar-thumb {
            background: #FF0000;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
        </script>
    </head>
    <body style="background-color:black;">
        <div class="vl"></div>
        <div class="vl2"></div>
        <div class="vl3"></div>
        <div style="color:white;font-weight:bold" class="grid games" id="jogos-sofascore">
        </div>
            <script id="script-da-caixa-de-selecao-suspensa-5">
                var select_5 = d3.select("#jogos-sofascore")
                .append("div")
                .attr("id","select-box-5")
                .style("width","100%")

                function valorparaiframe(iframevalue) {
                    let link = iframevalue;
                        return "https://www.sofascore.com/event/" + iframevalue + "/attack-momentum/embed";
                }

                async function update() {

                    let data = await d3.csv("./SofaScore_Live.csv");

                    let update_5 = select_5.selectAll(".matches")
                        .data(data,d=>d.id);
                    
                    update_5.exit().remove();

                    // Enter new divs:
                    const enter = update_5.enter()
                        .append("div")
                        .attr("class","matches");
                    
                    // Append the children to entered divs:
                    enter.append("iframe")
                        .attr("src",d => valorparaiframe(d.id))
                        .style("width","100%")
                        .style("height","110");
                }
                
                update();
                    setInterval(update,60000);
            </script>
        </div>
    </body>
</html>

SofaScore_Live.csv CSV example:

from Create iframes showing the end of each one as if I had dragged the scrollbar to the end

Hemant Vishwakarma

Monday, 6 December 2021

Create iframes showing the end of each one as if I had dragged the scrollbar to the end

No comments:

Post a Comment