Graham Quince

That is really nice. I'm back in the office tomorrow and will be showing anyone who accidentally ventures close to my desk. Well done and thanks for sharing

I'm getting a "You must be logged in to view" from the Frog Site. Is it Public on the Web?

Yeah @Edd, hurry up and release it

Hi Unfortunately a lot of the older themes would need a complete reworking to get them mobile responsive. Themes such as the iPad (I'm guessing here) probably have set heights and widths which prevent them scaling down correctly. Having said that, I'll mention it to our Creative studios guys.

Theme template updated on the tutorial/guide. https://frog.frogcommunity.com/themebuilding

Sorry @Sue Busher - i'm out of the office until Friday. @Edd are you around?

Hi @Sue Busher The Design team are currently updating the example theme, thanks to this thread, so that might help

Job for @Edd I'm guessing

Hi @Sue Busher Here's the problem code: .carousel-inner img { max-width: 100%; height: 300px; margin-left: auto; margin-right: auto; min-width: 300px; } The minimum width is set to 300px. If you change that to 150px, it should stop them stretching.

Yes - ish You'll be getting emails soon inviting you to the FrogCode open beta (once Dickens is released beyond beta testers). FrogCode will be installed on your boxes, but "hidden" until you request access. There's a document to sign and send back. The current plan is in the Easter holidays, we're going to have a FrogCode workshop in the office and an open invite to anyone to attend. During the day, we'll work with you to teach you how to build widgets and ideally have you build a widget of your own design. By Easter, we hope to have FrogStore up and running to accept widget submissions too, if not, they'll be available to download from the Community. Unlike the HTML widget which can be turned on for profiles, FrogCode Editor is set up so that individuals activate it.

Well, @Jenny Vosper I think i spy a learning opportunity for you. Quick question to everyone else, if @Jenny Vosper and I sat down to build this widget, would you find it useful if we screen recorded it? Just to clarify, I'm not sure how to build Jenny's widget, but if you'd like to listen in on the learning, would it be something you'd watch?

Hi @clangstaff, You need the UUID of the widget, which you can get by right-clicking on the widget and choosing Inspect Element. Look for data-content-uuid Then paste that into some CSS like this : <style> div[data-content-uuid=""] { } </style>

I meant 'can't', "can't help you today". And yes, hang on just a little bit longer, @Edd and @Jenny Vosper have both been bending my ear about widgets they want built.

Can help you today, but I've turned this in a FrogCode widget:

Here's an updated version of the code, including styling: <style> .newDiv { /* Sets the color of the text, all standard CSS stuff */ color:#FF0000; } </style> <script> var user = FrogOS.getUser(), /* This creates a DIV without a fixed ID, so works better in Frog's sites*/ newDiv = $("<div>", { id: Frog.Utilities.generateSimpleId(), class:"newDiv" }); newDiv.html( /* Add anything you want in the ''s */ 'Hello, '+user.attr('displayname')+'!' ); /* This bit adds the jQuery created DIV (newDiv) to the HTML widget's rendered code */ this.element.append(newDiv); </script> Those worksheets came from a bigger tutorial: https://www.frogcommunity.com/helloworld which talks you through a bit of styling and getUser();

Hi @krisdan That's a very good point. Sorry, but i think this has been overlooked. If you want to send through any themes you need "mobile"ing, I'll get our design team to add the code as part of adding them to your Frog. I've also booked in time with them to update the example theme.

Hi Dean You will need to be logged in, in order to see the calendar, but if you use this web address: https://YOUR FROG/app/booking/ you should be able to see the booking calendar. Graham

Nice one and it never lit up for me!

After much searching...still not got a permanent solution, but... if you click near (or on) the text box then hit the tab key, the input retains focus and allows you to type. Also, for some reason the original code i posted had the Search set up wrong. It needs to be a submit button. i've edited the original entry to reflect this.

This is completely bizarre! Seems to be an annual problem with IE. There's posts and fixes going back years on the internet. @Chris.Smith any ideas?

Hi @sfoster I know we've spoken, but for the benefit of anyone else interested, we don't have an ideal solution for SCORM at the moment. You can link to Frog3's SCORM files. The Ideas Portal has a popular request for a player, you can vote on it here: https://frogeducation.ideas.aha.io/ideas/FRG-I-461 Graham

Let me know how you get on. I'm at Bett this week, but should be able to help next week should you get stuck anywhere.

Just following up on a comment in another thread. I'm curious: do you have a default browser in school? do you allow other browsers?

No drink necessary, but I'll take a shout out on Twitter for #frogeducation if you use it

Hi @paulmitchell1989, When I looked at the site you'd created, I realised that using the Nested Page widgets, you'd be loading a lot of content, only to then hide of it on the tabs. So instead, I've tweaked the code to load an iframe on click: This first HTML widget is the styling and layout code: <style> .notice-tabs { float: left; } .notice-tab { display: inline-block; min-width:65px; height:27px; text-align:center; border: 1px solid #cccccc; border-width: 1px 1px 0 1px; border-radius:5px; border-bottom-right-radius:0px; border-bottom-left-radius:0px; margin: 0px; padding: 5px; padding-top:10px; cursor: pointer; min-width: 20px; font-size:10pt; } .notice-tab { background: #0497da; /* Old browsers */ background: -moz-linear-gradient(top, #0497da 0%, #0064cd 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */ color:#FFFFFF; } .notice-tab.active { background: #FFFFFF; color:#000000; } </style> <div class="notice-tabs"> <div class="notice-tab active" data-year="0">Attendance</div> <div class="notice-tab" data-year="1">Merits and Cards</div> <div class="notice-tab" data-year="2">Grades</div> <div class="notice-tab" data-year="3">Subject Overview</div> <div class="notice-tab" data-year="4">Contact Teachers</div> </div> This second HTML widget is the jQuery which contains the clicking: <script> var $sitesElement = $('.ui-os-main-window:first, .ui-dialog.focused, dashboard-0').find('.sites_core'), noticesUuid = {}, $widgets = $sitesElement.find('div.sites_widget'), $iframe = $("<iframe>", { id: Frog.Utilities.generateSimpleId(), width: '100%', height:'1200px' } ), hideAllShowOne = function(yearGroup) { $sitesElement.find('.notice-tab').removeClass("active"); // remove the active class from all DIV $sitesElement.find('.notice-tab[data-year=' + yearGroup + ']').addClass("active"); // add the active class to the selected DIV $iframe.attr('src',noticesUuid[yearGroup]); }; noticesUuid[0] = "YOURSCHOOL/index.phtml?d=623515"; noticesUuid[1] = "YOURSCHOOL/index.phtml?d=623537"; noticesUuid[2] = "YOURSCHOOL/index.phtml?d=623530"; noticesUuid[3] = "YOURSCHOOL/index.phtml?d=623546"; noticesUuid[4] = "YOURSCHOOL/index.phtml?d=623525"; hideAllShowOne(0); $sitesElement.find('.notice-tab[data-year]').bind('click', function(ev) { hideAllShowOne($(this).data('year')); }); this.element.append($iframe); </script>