Jump to content

Search the Community

Showing results for tags 'html'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Support
    • Support
    • Common Questions
  • General
    • The Frog Academy
    • General chat
    • Showcase
    • Webinars
  • Technical Forums (How do I...?)
    • Learn / Play / Progress
    • Coding

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Found 10 results

  1. Is there a bit of html I can add to a page to autoplay videos in the Media widget on page load? Many thanks Sean
  2. Sue Busher


    Hi We use SIMS and cover lists are generated as HTML files. We used to be able to pull this into Frog 3 via Frog web, but can't do that any longer. It was suggested that I created a file drop and dragged and dropped the HTML files into it, placing an HTML widget above it and asking it to displace the files in file drop. Done that, and it works.... BUT the files, whilst dated chronologically don't display that way. eg 160916, 170916, 180916, 200916, 210916, 220916 display as 200916, 210916, 220916, 160916, 170916, 180916 which is really frustrating. Does anyone have any HTML code I can add in that woud fix the order in which it is shown? <div id="coverpage"></div> <script type="text/javascript"> var baseURL = Frog.Utilities.getBaseUrl(), // Change fileDropUuid to the UUID of your file drop widget fileDropUuid = '70BDB7422002874EC49D5FBFB7EEAC03C6C22C9CB651A4D8'; Frog.Model .api('filedrop.get', { filedrop: fileDropUuid }).done(function(filesResponse) { var $fileList = $('#coverpage'); filesResponse.data.resources.forEach(function(file, index) { // Check whether the file is one of these filetypes; Want to add more? Add to the array if (['html','htm'].indexOf(file.file.ext.toLowerCase()) > -1) { console.log(file); // This only runs when you have uncommented the the HTML code above // This code adds file names to the ul#filelist $fileList.append( '<iframe width="800" height="300" style="margin-left:auto; margin-right:auto;" src="'+ baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext + '"></iframe>' ); } }); }); </script> OR Anyone got a better way of doing this? I am not popular with the teaching staff at the moment
  3. Some of you have already spotted this tutorial, but we've just updated it to reflect feedback from schools. You can now use the same code 'hack' a menu to open external links, subpages and even sites https://www.frogeducation.com/community/tutorials/frogcode-tutorials/external-links
  4. Hi, I have set up a sildeshow, using a file drop as detailed in the tutorial below: http://www.frogcommunity.com/app/os#!filedrop/slideshow My first slideshow was working correctly, and I could add/remove files to the drop and the correct pictures were showing. I then tried to add another slideshow (on a new tab within the site), so set up a new file drop, got the new ID and created the HTML again as per the tutorial, however the second file drop won't work as expected. The pictures from the second file drop show up in the first slideshow, despite them having completely different IDs. If I set up a list of file names for the second file drop, the files are correct, but they are showing on the wrong page. Sometimes they appear as part of the slideshow, and other times the new pictures are above the first pictures. I will attach some screenshots so that hopefully you can see what I mean. Additionally, the first file drop will work correctly until I try and look at the second file drop, then when I go back to the first I have the problem (caching issue maybe?). First file drop showing Micky Mouse correctly: 2nd file drop showing only the file name (testing) widget. The file drop arrows show up but no pictures. Now, I go back to the first tab and Goofy is showing despite him being on the other file drop. Any ideas? Kind regards Dawn
  5. Hi, I have been provided with this code from Linguascope, but it doesn't work in the HTML widget. <script language="javascript" src="http://www.linguascope.com/link/login/linguascope_login250x250.js"></script> Can anyone help please?
  6. Every time I add in a text widget,, I have to resize the text, as it starts too small, is there a way of setting the size be default?
  7. Dear Community, On the Frog website designs showcase page, there is a link to Theale Green School. We have noticed that they have a calendar widget on their homepage without the skeuomorphic red rings at the top. Does anyone have some code to achieve this with the HTML widget? All I have managed to do so far is remove the header text. Thanks, Michael
  8. @Graham Quince and community Frog, In another topic about HTML tables that @Chris.Smith is providing me with a huge amount of hand-holding, he mentioned amending the data contained within my HTML code using a script and JSON format data. It is much simpler than lines and lines of HTML for each row data. It started me thinking: further to our discussions about using FireBase to contain and access individualised data, could there be an alternative method written directly into the HTML widget, without the need for FireBase? My thinking for the HTML is as follows, and as mentioned in my other post, please note that my skills are barrel bottom in terms of availability: 1. Call up/define the logged in user's upn, as described in the "Displaying personalised, custom data" post on the Frog Community 2. Define a table 3. Provide all required table cell data in JSON format within the script (see below) 4. Populate the data in the table with the fields that ONLY correspond to those that match the user's upn. This would somehow also require the data in the JSON format to contain and recognise the upn? Upn would obviously not be displayed. @Chris.Smith included the JSON data as follows. I have amended it to include a reference upn and an alternative use. data = [ { upn: 'FRG_12321', name: 'Student Tom', house: 'Bowman', tutor: 'ACR', MyMaths un: 'Tom', MyMaths pw: 'tree' }, { upn: 'FRG_34243', name: 'Student Sarah', house: 'Fulford', tutor: 'MOB', MyMaths un: 'Sarah', MyMaths pw: 'flower' } ]; The applications for this are enormous, such as passwords as in the data, or sharing student grades. Hope you can help, Michael
  9. Hi Community, I am just playing with the HTML widget and tables, looking for a way to replace embedding Excel docs with native HTML. I can get the table to display as I want, however, I cannot seem to get the table to 'sort on click' of the header, as described in many various forums. The code I am using is below, and if I copy this into the live editor on w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc) it works a treat. But, it does not seem to function in Frog HTML widget. Any ideas? Thank you in advance for your support. Michael <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 1px; border-color: #e6e6e6; border-style: double; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 1px; border-color: #e6e6e6; border-style: double; padding: 10px; } table.GeneratedTable thead { background-color: #52b9e9; } </style> <table class="GeneratedTable" id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">House</th> <th onclick="sortTable(2)">Tutor</th> <th onclick="sortTable(3)">Achievement</th> <th onclick="sortTable(4)">Behaviour</th> <th onclick="sortTable(5)">Total</th> </tr> </thead> <tbody> <tr> <td>Student 1</td> <td>Bowman</td> <td>ACR</td> <td>1100</td> <td>10</td> <td>1090</td> </tr> <tr> <td>Student 2</td> <td>Fulford</td> <td>ACR</td> <td>1623</td> <td>196</td> <td>1427</td> </tr> <tr> <td>Student 3</td> <td>Netherfield</td> <td>MOB</td> <td>1507</td> <td>198</td> <td>1309</td> </tr> <tr> <td>Student 4</td> <td>Saunderson</td> <td>MOB</td> <td>1920</td> <td>326</td> <td>1594</td> </tr> <tr> <td>Student 5</td> <td>Weirfield</td> <td>RBA</td> <td>1835</td> <td>85</td> <td>1750</td> </tr> <tr> <td>Student 6</td> <td>Bowman</td> <td>RBA</td> <td>1634</td> <td>320</td> <td>1314</td> </tr> <tr> <td>Student 7</td> <td>Fulford</td> <td>AHI</td> <td>1470</td> <td>503</td> <td>967</td> </tr> <tr> <td>Student 8</td> <td>Netherfield</td> <td>AHI</td> <td>2036</td> <td>337</td> <td>1699</td> </tr> <tr> <td>Student 9</td> <td>Saunderson</td> <td>AHU</td> <td>1342</td> <td>134</td> <td>1208</td> </tr> <tr> <td>Student 10</td> <td>Weirfield</td> <td>AHU</td> <td>1575</td> <td>247</td> <td>1328</td> </tr> <tr> <td>Student 11</td> <td>Bowman</td> <td>GUN</td> <td>1575</td> <td>170</td> <td>1405</td> </tr> <tr> <td>Student 12</td> <td>Fulford</td> <td>GUN</td> <td>1416</td> <td>200</td> <td>1216</td> </tr> <tr> <td>Student 13</td> <td>Netherfield</td> <td>FNA</td> <td>1991</td> <td>488</td> <td>1503</td> </tr> <tr> <td>Student 14</td> <td>Saunderson</td> <td>FNA</td> <td>1596</td> <td>90</td> <td>1506</td> </tr> <tr> <td>Student 15</td> <td>Weirfield</td> <td>HTA</td> <td>1553</td> <td>188</td> <td>1365</td> </tr> <tr> <td>Student 16</td> <td>Bowman</td> <td>HTA</td> <td>1570</td> <td>277</td> <td>1293</td> </tr> <tr> <td>Student 17</td> <td>Fulford</td> <td>DRO</td> <td>1444</td> <td>414</td> <td>1030</td> </tr> <tr> <td>Student 18</td> <td>Netherfield</td> <td>DRO</td> <td>1702</td> <td>367</td> <td>1335</td> </tr> <tr> <td>Student 19</td> <td>Saunderson</td> <td>SPK</td> <td>2027</td> <td>387</td> <td>1640</td> </tr> <tr> <td>Student 20</td> <td>Weirfield</td> <td>SPK</td> <td>1512</td> <td>140</td> <td>1372</td> </tr></tbody> </table> <script> function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.getElementsByTagName("TR"); /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /*check if the two rows should switch place, based on the direction, asc or desc:*/ if (dir === "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } else if (dir === "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; //Each time a switch is done, increase this count by 1: switchcount ++; } else { /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/ if (switchcount === 0 && dir === "asc") { dir = "desc"; switching = true; } } } } </script>
  10. Hi https://frog.frogcommunity.com/understanding-api I've tried to write it for those of you who understand code, but have never tried to access an API. Before I joined Frog, I had never been successful in using APIs. I'm sure users like JElliott * will find this insultingly simple and be appalled at the poor use of coding terms (I don't mention the DOM once). For the rest of us mortals, I hope this tutorial can show you the possibilities of using Frog's APIs and that it will encourage you to build your own resources. Graham * I'd love your feedback to improve this, to be honest
  • Create New...