pconkie

Happy to help, but as others have said - would need to know what browser you are using and on what kind of device (e.g. computer, mac, phone etc). Also if you are loading from a google sheet or from the widget itself.

If you want maximum customization wrap your twitter-timeline in another div and delegate events to it. Like this for the set-up: <script type="text/javascript"> if (typeof twttr === "undefined") { <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> } </script> <div class="twitter-block"> <a class="twitter-timeline" data-dnt="true" data-theme="light" data-link-color="#002070" href="https://twitter.com/Backwell_School?ref_src=twsrc%5Etfw">Tweets by Backwell_School</a> </div> <script>if (typeof twttr != "undefined") twttr.widgets.load();</script> Then add the following below to catch changes to the twitter feed... <script> jQuery('.twitter-block').delegate('.twitter-timeline','DOMSubtreeModified propertychange', function() { //function call to override the base twitter styles customizeTweetMedia(); }); //also call the function on dynamic updates in addition to page load jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() { customizeTweetMedia(this); }); } </script> Finally in the same script block as above the actual customize function which you can change to suite your needs... var customizeTweetMedia = function() { jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('margin-left', '0px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '16px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('margin-left', '0px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-author').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', 'Open Sans, sans-serif'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.Icon--twitter').remove(); } The whole thing for easy copy and paste: <script type="text/javascript"> if (typeof twttr === "undefined") { <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> } </script> <div class="twitter-block"> <a class="twitter-timeline" data-dnt="true" data-theme="light" data-link-color="#002070" href="https://twitter.com/Backwell_School?ref_src=twsrc%5Etfw">Tweets by Backwell_School</a> </div> <script> if (typeof twttr != "undefined") twttr.widgets.load(); jQuery('.twitter-block').delegate('.twitter-timeline','DOMSubtreeModified propertychange', function() { //function call to override the base twitter styles customizeTweetMedia(); }); var customizeTweetMedia = function() { jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('margin-left', '0px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '16px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('margin-left', '0px'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-author').remove(); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', 'Open Sans, sans-serif'); jQuery('.twitter-block').find('.twitter-timeline').contents().find('.Icon--twitter').remove(); //also call the function on dynamic updates in addition to page load jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() { customizeTweetMedia(this); }); } </script>

It is messy. The users app should work like the groups & policies app which makes deleting non-mis linked groups very easy.

Thanks!

Thanks @Patrick Are you able to quickly tell me now how to bulk remove users and groups?

This page: https://www.frogeducation.com/community/tutorials/housekeeping/froglearn/oldusers says there is a video that shows how to do bulk remove of old users. Can anyone show me where the video is please? Thanks

I’ve recently spent a fair few hours (days) evaluating if we should use frog for our school website. A big consideration for me is how frog handles visitors on small screens. I’d like to say first that frogs support for mobile is now very good and has been getting better with every update! I can also appreciate how difficult it must be to cater to so many platforms, versions and devices. However, I’m not ready to pay frog to do a re-brand for our website yet as we need a flawless website and I am not convinced it would be completely flawless. I know that frog listens and appreciates constructive feedback, so here’s what’s stopping me. For testing purposes I have created a site in frog (the default site you get when you specify only a name and then hit create). The site has two pages. Each page has a single text widget with some text inside to act as some content. That’s it! About as minimal as you can get. I’ve published this site - feel free to take a look: https://froglearn.backwellschool.net/test1 I have tried each test out on 4 different mobile devices (all of the Apple variety) Issue #1 - lanscape on iPhone We’ve got a black rectangle covering almost 1/3 of the viewport. Issue #2 - scrolling is broken A359BE17-680B-459D-BE74-B5808B611EB7.mov This is hard to describe (hence the video) but makes using a frog site on iPhone painful! Issue #3 - the menu It takes three gestures to open it when in landscape. Safari won’t let you click the open handle without brining down the address bar. So what you will see below is a tap-scroll-tap to get the menu open. At other times the menu opens due to a slight swipe left gesture (often when scrolling - well trying to scroll). Would be best if the menu didn’t react to swipes. What a shame this menu is targeted to touch devices and not screen size (as is the case on no touch devices). The bigger iPads for example are crying out for the full site menu and just look odd with this menu. Issue #4 - page navigation I think the accepted behaviour of clicking a menu link is that you are taken to the top of that page. This isn’t the case in a frog site for every click after the first Here i scroll to the bottom of page 1 in the test site, then navigate to page 2. I’m taken to the bottom of this page! I know that these are not really pages and that something is going wrong with auto scrolling but it’s another thing that will confuse visitors. This one is actually broken on desktop browsers too. Hopefuly these can be resolved, after all I would like to put our website on frog. Paul

Thanks @gbligh @Jay That worked!

Great widget @Simon Law but I don't think it works on iOS - at least I can't get it to work (desktop browsers all fine). It is this bit that fails on iOS..... '.nav-navigation-container li a {click}': function(el, ev) { $menu = this.element.closest('.sites_core').find('.sites_menu'); $menu.find('a[data-uuid='+el.attr('data-uuid')+']').click(); }, Safari on iOS inspector and Chrome inspector report slightly different objects if you console out $menu and $menu.find('a[data-uuid='+el.attr('data-uuid')+']'), so perhaps this is why? I found that this fixed the issue... '.nav-navigation-container li a {click}': function(el, ev) { $menu = this.element.closest('.sites_core').find('.sites_menu'); $menu.trigger('sites.changeLocation', { uuid: el.attr('data-uuid') }); }, Is this 'safe' to use? Paul

Hey @adamw I've built a nice widget using the datastore api. I've put it on our website and it looks like because visitors do not log in (and they are therefore no authenticated) they can't access the datastore to pull the data for the widget to use. This makes the widget useless Is there a way around this?

Is there some jquery or css that will display the 'regular' desktop site menu on large touch devices like iPads? Basically I would like an iPad to behave like a desktop browser, which I believe would mean displaying the regular menu in portrait (>800px) and collapsing to the mobile friendly menu in landscape (<800px). Phones should not be affected. It would seem that the screen size specified in the frog css file for switching the menus is overridden if a touch device is detected - does this mean that no matter how much screen space I have all touch devices will show the mobile friendly menu? It makes the site look somehow out of proportion on these devices and is putting me off moving the school website to frog. Thanks Paul

I'm having issues when scrolling content in sites in Safari on iPhone or iPad. Basically the content doesn't scroll smoothly. To see what I mean I created a very basic site using default settings and added a large amount of text to give it some content to scroll. I've made this site public and you can find it here: http://froglearn.backwellschool.net/test1 No issues on desktops or other devices as far as I am aware, so you will need an iPhone or iPad. Hopefully you see what I mean? How can I fix this? Thanks

Thanks @adamw Got create, get and update working..... Can you talk me through Com.Frog.Controller#showLoader ? I assume there is a built in delay to .showLoader as most of the time it doesn't appear unless the network is slow or i comment out .hideLoader? Can this be overridden? I think I have grasped the basic functionality (show/hide) - but I can not seem to do useful things such as... var widget = this; ////this works..... widget.showLoader(); //white loader appears full screen //do some things //do more things widget.hideLoader(); ////this works.... widget.showLoader( widget.element.find(".wrapper"), 'dark', 'Please wait...' ); //dark loader appears covering only widget area of screen //do some things //do more things widget.hideLoader(); ////this doesn't work.... widget.showLoader(); setTimeout( function() { widget.updateLoader("This is taking longer than anticipated"); }, 3000 ); ////this doesn't work.... ////and is what I really want to beable to do... function anyfunction() { widget.showLoader( widget.element.find(".wrapper"), 'dark', 'Please wait...' ); anyAPI({ any data }).done(function(response) { widget.hideLoader(); }).fail(function(e) { widget.updateLoader("There has been an error") }).always(function(e) { widget.updateLoader("This is taking longer than anticipated") }); } What is the best way to go when we actually want the user to wait until an ajax request has completed? Thanks Paul

Thanks @adamw The uuid is a widget uuid.

Hi @adamw I'm still not getting very far with this fdp datastore..... Code runs and outputs "failed". Error message is as follows: I've looked for the datastore permissions in groups & policies but can not find any - is it a permissions issue? Thanks Paul

Any ideas? FrogOS.fdp({ url: 'datastore/create', path: '/api/fdp/2/', type: 'POST', target_uuid: 'abcdef', data: '12345', alias: 'test' }).done(function(response) { // Do things console.log("done"); console.log(response); }).fail(function(e) { // Report Error console.log("failed"); });

Hi @adamw So how would you recommend this api is integrate into a FrogCode widget? Let's say I was going to store data against the widgets uuid..... Do i need to do a datastore.get to check if a datastore exists and create one if it doesn't? Should I do this in the init section of the widget code? Or will a datastore.create get ignored if the datastore already exists? Thanks Paul

This will open a site if you have the data link and the uuid. if you only have uuid you can use an api to get the data link, FrogOS.openSite({ site: datalink, assignment_uuid: uuid }); You could run this off a button click or otherwise. Only problem is the site opens maximised, but i'm guessing there is another parameter so that it doesn't do this?

It’s never come up. Personally I’d always ask all the kids to resubmit. There’s always something that could be improved!

<style> .frogui_modules_assignment_wizard_panels_details .expand-group {display:none;} </style> Put this in a html widget on the staff dashboard.

@adamw better with some dates along the top?

Each grey column represents a day. The width of a day comes from the available app width and the earliest issue date and latest due date in the assignments returned from the api. The yellow rectangles are assignments scaled and sized so their width is equal to the number of days the recipients had to complete it. Assignments assigned to individuals are ignored (we removed the ‘convert to individuals’ button on the create assignments screen about a year ago) Those assigned to multiple recipients are shown for each recipient. The yellow rectangles are hoverable to reveal assignment title and clickable to open the assignment (site view). So at a glance eg Head of Department can see that 1 of 10 yr11 classes has far fewer assignments set etc it needs a bit more work...

Yeah, we only use assignments for "home learning".