How to put javascript in Discourse theme?

I found a java script with a falling snow effect, and I was wondering, is it possible to put this script in the theme? I tried to insert where I put CSS, but the site bugged lol, is there another place I can insert it or does discourse not accept these types of scripts?

Hi, script tags go in the Head tab of your theme/component. :slight_smile:

2 Likes

Can you insert any kind of javascript code in the head?

And when there is HTML code combined with CSS, do I put it in normal CSS or combined CSS???

Can you show the code you want to insert so we can understand better what you want to achieve?

html is

<div class="snow"></div> 176 times

and CSS is

body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

<script src="https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js"></script>

I had tried to use this javascript, but it didn’t work

I wouldn’t recommend linking an external javascript if you don’t know how reliable it is. If the remote script change, it could break your forum.

I suggest you create a new theme component in your admin panel instead. Name it something like “snowflake effect”.

Edit this new theme component.

  1. In the Head tab, copy-paste the javascript code inside a <script> HTML tag.

  2. In the CSS tab, paste the CSS code, without the height: 100vh; part in body {.

  3. In the Footer tab, paste 176 times :grimacing: <div class="snow"></div>.

  4. Enjoy your snow.

:warning: Note that this effect was created by someone in their own HTML environment, isn’t “Discourse-compatible” out of the box and thus it may cause issues on your forum.

You really ought to read this @Danielabc if you haven’t done so already:

2 Likes

You might use this as a model: Winter snow theme component :snowflake:

3 Likes

I found this snow effect and I really liked it, but it only works on desktop, on mobile it doesn’t, why? Will I have to activate something on the mobile to work?

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain2']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain3']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain4']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

I will see about that, thanks

1 Like

I installed it but nothing happened :frowning:

Honestly, taking a snowing effect randomly on the Internet and trying to make it work on Discourse isn’t a necessarely easy task.

Discourse has its own constraints, and most javascript from the wild that you want to include in Discourse needs to be modified and adapted to these constraints.

I tried yesterday and in the current state, the effect is quite… Subtle. It surely could be improved, but again, that’s some work.

I also agree with the others, if you want to add customizations to your website (you seem to be very involved in it and read Meta a lot), you should start by the beginning and understand the basics of HTML, CSS and javascript.

I think free help here for such customizations will be limited.

1 Like

Thanks for clarifying my doubts, one thing I didn’t understand is that the effects work on the site for desktop, but not for cell phones, why is it???