SharpTools, CSS, iFrames and FKB

This may be a fairly specific question, but I am hoping someone else out there may have some advice for me.

I am using iframes to load my SharpTools dashboard in a frame. The reason for using an iFrame is that I have some jquery loading JSON data and displaying that at the bottom of the host page in a dynamic fashion. So it gives my overall dashboard a more dynamic (up to the minute sports news in my case).

The site looks fantastic on regular chrome. However on fully kiosk, the height/width of the iFrame is hit or miss (will look great, then get wonky on a reload).

The CSS (using absolute position and pushing the dynamic div to the bottom) is not working at all. It just sits in the middle of the FKB page (again this works perfectly fine on Chrome)

If 99% of you have stopped reading by now… I dont blame you. But would love some help! Thank you!

Can you share some of the markup that you have so far (HTML+CSS)?

absolutely, so this is the style code to push the dynamic code to the bottom

#bottomleft { position: absolute; bottom: 60px; left: 20px; width: 500px; background-color: white; } #bottomright { position: absolute; bottom: 60px; left: 550px; width: 450px; background-color: white; }

This is the iframe call to my dashboard

You can either tap the </> icon in the toolbar while drafting a post or wrap the code in triple backticks to format it:

image

<html>
  <body>
    <div>This is code!</div>
  </body>
</html>

Can you show the full HTML and CSS markup (feel free to redact identifying info or tokens what not)? It would help in better understanding the structure, what styles/classes are being applied to what, and give a better feel for the overall layout.

full code here with minor redactions

<!--- Prints out the last game scores for teams-->
<html>
<head>
<title>Score Board</title>
<style> 
    #bottomleft {
        position: absolute;
        bottom: 60px; 
        left: 20px;
        width: 500px;
        background-color: white;
      }

      #bottomright {
        position: absolute;
        bottom: 60px; 
        left: 550px;
        width: 450px;
        background-color: white;
      }
      // how do you refresh the get data without refreshing the page?
</style>


<script src= "/wp-includes/js/jquery/jquery.js"></script>
<script src="/wp-includes/js/jquery.easy-ticker.js"></script>

<iframe src="https://beta.sharptools.io/dashboard/view/6XXXXXXX2APVq?kiosk=true" 
            height="800" width="1300" style="border:none;"> 
    </iframe> 
<div id="bottomleft">
    <b>Recent results:</b>
    <div class="myWrapper">
  <div>
        <div id="R1"></div> 
        <div id="R2"></div>
        <div id="R3"></div>
        <div id="R4"></div>
    </div>
</div>
</div>

<div id="bottomright">
    <b>Upcoming events:</b>
    <div class="rightWrapper">
  <div>
        <div id="R5"></div> 
        <div id="R6"></div>
        <div id="R7"></div>
        <div id="R8"></div>
    </div>
</div>
</div>



<script>
    var ChelseaResults = [];
    var CowboysResults = [];
    var JetsResults = [];
    var JuventusResults = [];

    var ChelseaSchedule = [];
    var CowboysSchedule = [];
    var JetsSchedule = [];
    var JuventusSchedule = [];

    var Chelsea = "133610";
    var Cowboys = "134934";
    var Jets = "134921";
    var Juventus = "133676";


function teamResults(teamID ,printArray){  //pulls the last 5 games scored for team based on teamID    
    console.log("team results function")
    var varURL = "https://www.thesportsdb.com/api/v1/json/1/eventslast.php?id="+teamID;
    jQuery.getJSON(varURL, function(result){
            var count = result.results.length;
            var nextGame = [];          //declare nextGame as array
            var tempStr = "";         //declare tempStr as string
            for (i = 0; i < count; i++) {   //loops through entire set of events and pushes them into NextGame array
                        tempStr = "" + result.results[i].strHomeTeam + ": " + result.results[i].intHomeScore  + " - " + result.results[i].strAwayTeam + ": " + result.results[i].intAwayScore + " (" + result.results[i].dateEvent + ")";
                        nextGame.push(tempStr)   
            }
            
            if (teamID == Chelsea){
                ChelseaResults = [...nextGame];
                printArray(ChelseaResults, 1);

            } else if (teamID == Cowboys){
                CowboysResults = [...nextGame];
                printArray(CowboysResults, 2);
                
            } else if (teamID == Jets) {
                JetsResults = [...nextGame];
                printArray(JetsResults, 3);
                
            } else {
                JuventusResults = [...nextGame];
                printArray(JuventusResults, 4);
            }             
        });
};            

function teamSchedule(teamID ,printArray){  //pulls team schedule  
    console.log("team schedule function")
    var varURL = "https://www.thesportsdb.com/api/v1/json/1/eventsnext.php?id="+teamID;
    jQuery.getJSON(varURL, function(result){
            var count = result.events.length;
            var nextGame = [];          //declare nextGame as array
            var tempStr = "";         //declare tempStr as string
            for (i = 0; i < count; i++) {   //loops through entire set of events and pushes them into NextGame array
                        tempStr = "" + result.events[i].dateEvent + " " + result.events[i].strEvent;
                        nextGame.push(tempStr)   
            }
            
            if (teamID == Chelsea){
                ChelseaSchedule = [...nextGame];
                printArray(ChelseaSchedule, 5);

            } else if (teamID == Cowboys){
                CowboysSchedule = [...nextGame];
                printArray(CowboysSchedule, 6);
                
            } else if (teamID == Jets) {
                JetsSchedule = [...nextGame];
                printArray(JetsSchedule, 7);
                
            } else {
                JuventusSchedule = [...nextGame];
                printArray(JuventusSchedule, 8);
            }             
        });
}; 

function printArray(arraytoprint, index){ //only printing last element even though full list has been loaded ... maybe change this to a case switch statement
    console.log(arraytoprint[0])
    if (index == 1){
        document.getElementById("R1").innerHTML = arraytoprint[0];
    } else if (index == 2){
        document.getElementById("R2").innerHTML = arraytoprint[0];
    } else if (index == 3){
        document.getElementById("R3").innerHTML = arraytoprint[0];
    } else if (index == 4){
        document.getElementById("R4").innerHTML = arraytoprint[0];
    } else if (index == 5){
        document.getElementById("R5").innerHTML = arraytoprint[0];
    } else if (index == 6){
        document.getElementById("R6").innerHTML = arraytoprint[0];
    } else if (index == 7){
        document.getElementById("R7").innerHTML = arraytoprint[0];
    } else {
        document.getElementById("R8").innerHTML = arraytoprint[0];
    }
   
}
    
    teamResults(Chelsea, printArray);
    teamResults(Cowboys, printArray);
    teamResults(Jets, printArray);
    teamResults(Juventus, printArray);
    teamSchedule(Chelsea, printArray);
    teamSchedule(Cowboys, printArray);
    teamSchedule(Jets, printArray);
    teamSchedule(Juventus, printArray);

jQuery(document).ready(function(){
    
    jQuery('.myWrapper').easyTicker({
        direction: 'up',
        easing: 'swing',
        speed: 'slow', //speed of transition: can be slow medium or fast or anything in ms
        interval: 4000, //time till next transition (in ms)
        height: 'auto', //auto fits to all content, or can by x px X x px
        visible: 2, //how many in list visible at a time, 0 means all
        mousePause: true, //if ticker can be stopped by mouse pause
        controls: {
            up: '',
            down: '',
            toggle: '',
            playText: 'Play',
            stopText: 'Stop'
        },
        callbacks: {
            before: false,
            after: false
        }
    });

});

jQuery(document).ready(function(){
    
    jQuery('.rightWrapper').easyTicker({
        direction: 'up',
        easing: 'swing',
        speed: 'slow', //speed of transition: can be slow medium or fast or anything in ms
        interval: 4000, //time till next transition (in ms)
        height: 'auto', //auto fits to all content, or can by x px X x px
        visible: 2, //how many in list visible at a time, 0 means all
        mousePause: true, //if ticker can be stopped by mouse pause
        controls: {
            up: '',
            down: '',
            toggle: '',
            playText: 'Play',
            stopText: 'Stop'
        },
        callbacks: {
            before: false,
            after: false
        }
    });

});


</script> 
</head>
<body>

</body>
</html>

I’m not certain exactly what you’re after, but here’s a proof of concept that hopefully will get you headed in the right direction.

In this example, I’ve set the scores to always be a fixed height and the dashboard to take up the rest of the space… you could tweak this however you see fit though.

Here’s a live CodeSandbox that you can play with:
https://codesandbox.io/s/sports-news-demo-mjbnb

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dashboard and News Demo</title>

    <style>
      body {
        margin: 0; /* remove the default margin so we can go full bleed */
      }
      .dashboard {
        display: block; /* force iframe to block to fix some spacing/padding issues */
        width: 100%;
        height: calc(
          100vh - 50px
        ); /* The remaining height: full height minus the space the news takes up */
        border: 0;
      }
      .sports-news {
        width: 100%;
        height: 50px; /* Set a fixed height for the news */
        background: black;
        color: white;
      }
      .sports-news .content {
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <iframe
      class="dashboard"
      frameborder="0"
      src="https://sharptools.io/dashboard/"
    ></iframe>
    <div class="sports-news">
      <div class="content">
        Demo Sports News Goes Here
      </div>
    </div>
  </body>
</html>


My apologies. I just saw your reply after I posted my example. I’ll go back and take a look at what you have. :smiley:

1 Like

So are you trying to get the scores to show below the dashboard similar to what I showed in my screenshot?

Your current markup is going to position the ‘bottom-right’ and ‘bottom-left’ relative the root body of the document… so depending on the effective resolution of your tablet, that means that the scores might overlay on top of your dashboard.

I usually find it easiest to explicitly specify the height of items that I want to have a fixed height (like the scores) and then let other parts of the document automatically scale (eg. 100% width) rather than trying to hard-code a width for them.

Take a look at the example markup I think it will help with some of the layout concepts if that’s what you were going for.

Edit: Here’s an updated working demo where I copied some of your sports scores related markup and script into the previous template I shared:
https://codesandbox.io/s/sports-news-demo-forked-ts5l5?file=/index.html

1 Like

Will give this a shot tonight. Appreciate the (as always) quick response!

1 Like

That worked PERFECTLY. I dont know what other provider gives you the level of support where they take your whole code, and make it better. Seriously, you guys are the absolute best. I will support you till the end of time and make sure everyone I know that wants to build a dashboard uses you as well.

Thank you again :pray:t2:

3 Likes