clangstaff 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> Link to comment Share on other sites More sharing options...
Graham Quince 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. Link to comment Share on other sites More sharing options...
clangstaff 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 Link to comment Share on other sites More sharing options...
krisdan 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 Link to comment Share on other sites More sharing options...
clangstaff Posted December 5, 2016 Author Share Posted December 5, 2016 Cheers @krisdan much appreciated Link to comment Share on other sites More sharing options...
ADT Posted December 5, 2016 Share Posted December 5, 2016 Doesn't work in IE11!!!!!! Link to comment Share on other sites More sharing options...
c.hammond 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? Link to comment Share on other sites More sharing options...
ADT Posted December 15, 2016 Share Posted December 15, 2016 I hope you are on it to have falling eggs for Easter.... 1 Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
ADT 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!!! Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
Corinne 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? Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
Corinne 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 Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
ADT 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?? Link to comment Share on other sites More sharing options...
Corinne 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. Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
ADT 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!! Link to comment Share on other sites More sharing options...
Graham Quince Posted December 12, 2017 Share Posted December 12, 2017 32 minutes ago, ADT said: Don't work for me!! Chrome or IE? Link to comment Share on other sites More sharing options...
ADT Posted December 12, 2017 Share Posted December 12, 2017 Just now, Graham Quince said: Chrome or IE? Chrome or IE!! Link to comment Share on other sites More sharing options...
Graham Quince Posted December 12, 2017 Share Posted December 12, 2017 hmmm. "There won't be snow this Christmas" Link to comment Share on other sites More sharing options...
ADT 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..... Link to comment Share on other sites More sharing options...
Graham Quince 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 Link to comment Share on other sites More sharing options...
ADT 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now