clangstaff 345 Posted December 5, 2016 Share Posted December 5, 2016 @Graham Quince I thought I'd have a quick look at the snow code but this doesn't seem to be working for me when pasted in to a HTML widget on a site. <style> .snowflakes { position: absolute; left: 5%; top: -15px; width: 90%; overflow: visible; } .snowflake { position: absolute; color: #fff; -webkit-animation: falling 4.7s linear 0s infinite; -moz-animation: falling 4.7s linear 0s infinite; animation: falling 4.7s linear 0s infinite; } @-webkit-keyframes falling { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); } 95% { opacity: 0.8; } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); } } @-moz-keyframes falling { 0% { -moz-transform: translate3d(0, 0, 0) rotate(0deg); } 95% { opacity: 0.8; } 100% { -moz-transform: translate(0, 0) rotate(360deg); } } @keyframes falling { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 95% { opacity: 0.8; } 100% { transform: translate(0, 0) rotate(360deg); } } .uk_primary .os-titlebar .navbar-inner { background-color: #d62441!important; border-bottom: 3px solid #980000 !important } body.uk_primary .os-titlebar .navbar-search input { background-color: #980000 !important; border-color: #980000 !important; } </style> <script> var frogRevealingModule = (function() { var keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', elm = document.createElement('div'), snowing = new $.Deferred(); for (var i = 0; i < domPrefixes.length; i++) { if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) { pfx = domPrefixes[i]; keyframeprefix = '-' + pfx.toLowerCase() + '-'; break; } } var randInt = function(from, to) { return Math.floor(Math.random() * (to - from + 1) + from); }; var findKeyframeAnimation = function(a) { var ss = document.styleSheets; for (var i = ss.length - 1; i >= 0; i--) { try { var s = ss[i], rs = s.cssRules ? s.cssRules : s.rules ? s.rules : []; for (var j = rs.length - 1; j >= 0; j--) { if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) { return rs[j]; } } // Trying to interrogate a stylesheet from // another domain will throw a security error } catch (e) {} } return null; }; $.fn.snow = function(options) { options = options || {}; var me = this, count = options.flakeCount || 20, minDiameter = options.minDiameter || 20, maxDiameter = options.maxDiameter || 35, minOpacity = options.minOpacity || 50, maxOpacity = options.maxOpacity || 100, height = this.height(), flakes = [], keyframes = findKeyframeAnimation('falling'), characters = ['❄', '❅', '❆', '*']; if (keyframes) { keyframes[(typeof keyframes.insertRule == 'function') ? 'insertRule' : 'appendRule']( '100% { ' + keyframeprefix + 'transform: translate3d(0,' + height + 'px,0) rotate(360deg); opacity:0; }' ); } var i = count, size, css, origin; while (i--) { size = randInt(minDiameter, maxDiameter); origin = size / 2; css = { left: randInt(0, 100) + '%', 'font-size': size + 'px', height: size + 'px', width: size + 'px', opacity: randInt(minOpacity, maxOpacity) * 0.01, top: (-size - 20) + 'px' }; css[keyframeprefix + 'transform-origin'] = origin + 'px ' + origin + 'px'; css[keyframeprefix + 'animation-delay'] = (Math.random() * 10) + 's'; flakes.push($('<div></div>').html( characters[randInt(0, characters.length - 1)] ).attr({ 'class': 'snowflake' }).css(css).appendTo(this)); } this.on('webkitAnimationIteration animationIteration', function(e) { $(e.target).css('left', randInt(0, 100) + '%'); }); this.data('snow', { flakes: flakes }); return this; }; function makeItSnow() { $('.dashboard-1, .dashboard-0').snow({ flakeCount: 50, minDiameter: 10, maxDiameter: 80 }); }; return { snow: makeItSnow }; })(); setTimeout(function() { frogRevealingModule.snow(); }, 3000); </script> Quote Link to post Share on other sites
Graham Quince 622 Posted December 5, 2016 Share Posted December 5, 2016 Hi @clangstaff It's set to snow onto dashboards, I loaded up your Snow site then checked the dashboard and it was snowing there. Quote Link to post Share on other sites
clangstaff 345 Posted December 5, 2016 Author Share Posted December 5, 2016 Ah ok, I hadn't realised it was specifically for dashboards and not general sites! Thanks Graham Quote Link to post Share on other sites
krisdan 18 Posted December 5, 2016 Share Posted December 5, 2016 You need to change the codes at the bottom to the site UUID that you want it to snow on. function makeItSnow() { $('.dashboard-1, .dashboard-0').snow({ flakeCount: 50, minDiameter: 10, maxDiameter: 80 The part that says; $('.dashboard-1, .dashboard-0').snow({ should be replaced with; $('[data-site-uuid="<site_UUID>"]').closest('.app-sites').snow({ and the site UUID inserted where it says "<site_UUID>", above 2 Quote Link to post Share on other sites
clangstaff 345 Posted December 5, 2016 Author Share Posted December 5, 2016 Cheers @krisdan much appreciated Quote Link to post Share on other sites
ADT 1,273 Posted December 5, 2016 Share Posted December 5, 2016 Doesn't work in IE11!!!!!! Quote Link to post Share on other sites
c.hammond 10 Posted December 6, 2016 Share Posted December 6, 2016 Works on safari on Mac and iPad, Chrome on PC, but not on IE 11 which is our default browser Any ideas anyone? Quote Link to post Share on other sites
ADT 1,273 Posted December 15, 2016 Share Posted December 15, 2016 I hope you are on it to have falling eggs for Easter.... 1 Quote Link to post Share on other sites
Graham Quince 622 Posted December 16, 2016 Share Posted December 16, 2016 16 hours ago, ADT said: I hope you are on it to have falling eggs for Easter.... Thank you, i couldn't think of an option for Easter Quote Link to post Share on other sites
ADT 1,273 Posted April 7, 2017 Share Posted April 7, 2017 On 16/12/2016 at 08:43, Graham Quince said: Thank you, i couldn't think of an option for Easter Where's the code for the eggs then Quincy.... never mind pulling a sickie so you and the Mrs can play on your new Xbox game!!! Quote Link to post Share on other sites
Graham Quince 622 Posted April 10, 2017 Share Posted April 10, 2017 Believe it or not, i was going to post a tutorial on a Bouncing Easter bunny, based on the bouncing Frog head tutorial: https://frog.frogcommunity.com/bouncing-frog But I've run out of time (my spare day has been swallowed up and now I'm playing catch up, plus lots of you are on holiday now). It's a shame because I'd also planned a guide to creating an "egg hunt". My plan was to recommend you add the graphics attached (along with some random codes) to pages across your platform. Then include a form or quiz where your students and teachers have to enter the codes. Users who complete the quiz/form have explored your whole VLE and have found areas they might not know about. Unfortunately, I've been very busy with FrogCode preparations can just ran out of time. Graham Quote Link to post Share on other sites
Corinne 156 Posted December 8, 2017 Share Posted December 8, 2017 Just put this code back on and its not showing - I can see very small parts of the flakes at the tops of the dashboards but its not falling, or at least not that I can see - anyone have any idea why? Quote Link to post Share on other sites
Graham Quince 622 Posted December 10, 2017 Share Posted December 10, 2017 Are you using IE or Chrome. We haven’t been able to get it working in IE Quote Link to post Share on other sites
Corinne 156 Posted December 11, 2017 Share Posted December 11, 2017 On 10/12/2017 at 07:54, Graham Quince said: Are you using IE or Chrome. We haven’t been able to get it working in IE Chrome Quote Link to post Share on other sites
Graham Quince 622 Posted December 11, 2017 Share Posted December 11, 2017 boo. if i get a chance, i'll jump onto your platform and see if i can spot the issue Quote Link to post Share on other sites
ADT 1,273 Posted December 11, 2017 Share Posted December 11, 2017 Using the code up there it seams to be doing something..... but not over the page!!! It seams to create snow flakes that you can only briefly see at the top of the screen in the first few pixels?? Quote Link to post Share on other sites
Corinne 156 Posted December 11, 2017 Share Posted December 11, 2017 1 hour ago, ADT said: Using the code up there it seams to be doing something..... but not over the page!!! It seams to create snow flakes that you can only briefly see at the top of the screen in the first few pixels?? This is the same issue I have been having, it was fine last year. I have not got the time to look at it properly this year, but I thought it would just work again. Quote Link to post Share on other sites
Graham Quince 622 Posted December 11, 2017 Share Posted December 11, 2017 A great big, (whopping in fact) disclaimer, I haven't checked this with anyone, but this code is CSS-based, so in theory should be less scary: <style> .content { background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } </style> Change .content to the site's UUID of your choice, otherwise it will snow on all sites, e.g div[data-site-uuid="D6954147200252F777D78FA6869C1507CDB8000C9E7857CD"] .content { You probably also want to have local images too Quote Link to post Share on other sites
ADT 1,273 Posted December 12, 2017 Share Posted December 12, 2017 16 hours ago, Graham Quince said: A great big, (whopping in fact) disclaimer, I haven't checked this with anyone, but this code is CSS-based, so in theory should be less scary: <style> .content { background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } </style> Change .content to the site's UUID of your choice, otherwise it will snow on all sites, e.g div[data-site-uuid="D6954147200252F777D78FA6869C1507CDB8000C9E7857CD"] .content { You probably also want to have local images too Don't work for me!! Quote Link to post Share on other sites
Graham Quince 622 Posted December 12, 2017 Share Posted December 12, 2017 32 minutes ago, ADT said: Don't work for me!! Chrome or IE? Quote Link to post Share on other sites
ADT 1,273 Posted December 12, 2017 Share Posted December 12, 2017 Just now, Graham Quince said: Chrome or IE? Chrome or IE!! Quote Link to post Share on other sites
Graham Quince 622 Posted December 12, 2017 Share Posted December 12, 2017 hmmm. "There won't be snow this Christmas" Quote Link to post Share on other sites
ADT 1,273 Posted December 12, 2017 Share Posted December 12, 2017 5 minutes ago, Graham Quince said: hmmm. "There won't be snow this Christmas" There's plenty out side here..... Quote Link to post Share on other sites
Graham Quince 622 Posted December 12, 2017 Share Posted December 12, 2017 I've jumped onto your platform. The code is working, it snows inside the site, in the content area. Your main platform's theme is white, So you'll need to change the theme or replace the images. I've edited your personal dashboard with a new page and it's own theme Quote Link to post Share on other sites
ADT 1,273 Posted December 12, 2017 Share Posted December 12, 2017 1 minute ago, Graham Quince said: I've jumped onto your platform. The code is working, it snows inside the site, in the content area. Your main platform's theme is white, So you'll need to change the theme or replace the images. I've edited your personal dashboard with a new page and it's own theme You've done what now? Quote Link to post Share on other sites