Trying to Add JS Particles Background via Enfold theme - Support

Viewing 30 posts - 31 through 60 (of 60 total)

← 1 2

Author

Posts
January 23, 2018 at 7:12 pm #901624

fanlokbun
Participant

Nice one Two Trees you are a diamond!
3 questions (for anyone):
– Is there a way to add it to the header and footer background?
– Is there a way to add it to an entire page behind the color sections and show through?
– It only works in the first color section I add the code block to. How do I get it to appear in more than one color section?
Thanks again
Rob

January 24, 2018 at 4:01 am #901857
Ismael
Moderator
Hi,

I haven’t tested the script personally but maybe you can try the following.

1.) Use the “#header” and “#footer” selectors, respectively.

2.) Use the color sections’ Section ID field.

3.) Maybe you need to re-initialize another particlesJS callback for another selector or container.

JS:
```
particlesJS.load('another-particles-js', 'another-particles.json', function() {
  console.log('another-particles.js loaded - callback');
});
```
HTML:
```
<div class="another-particles-js"></div>
```
JSON: (another-particles.json)

Same as: https://github.com/VincentGarreau/particles.js/blob/master/demo/particles.json

Best regards,
Ismael
March 12, 2018 at 10:04 pm #925736

Pixelbits
Participant

Thanks – worked on the first try!

March 13, 2018 at 4:20 am #925852

Nikko
Inactive Moderator

Hi,

Glad to hear that :) Let us know if you need further assistance.

Best regards,
Nikko

August 20, 2018 at 4:25 am #999151
yingyang
Participant
Hey guys, would it be possible to show the particle animation as a background of a full screen slider?
- This reply was modified 6 years, 2 months ago by yingyang.
August 20, 2018 at 9:44 am #999261

Dude
Participant

Hi,

Probably yes but you would probably need to customize the theme files. It’s something which is beyond the scope of our support forum. I’ll leave this thread open in case another user can help you.

Best regards,
Dude

April 19, 2019 at 3:59 pm #1092704
mint
Participant
Hi Guys,

I’m maybe a bit behind on this but having issues with the particles appearing below the color section content rather than behind it.

Followed the steps as required and my custom styling for app.js is all working fine, just can’t seem to get it behind the other color section content.

I’ve typed the main <div id="particles-js"></div> into the top content area in the code block (Code Block Content. Add your own HTML/CSS/Javascript here.

Should I tick any of the check boxes (escape HTML Code, Disable Shortcode Processing, Deactivate schema.org markup?

Also, is it possible to use in a color section to keep content within the wrapper but allow the particle background to be 100% width to match the background color of the color section?

Any help much appreciated.

Thanks!
- This reply was modified 5 years, 6 months ago by mint.
April 22, 2019 at 2:01 am #1093185

Ismael
Moderator

Hi,

Have you tried adding the target ID in the color section’s Section ID field?

// https://kriesi.at/support/topic/trying-to-add-js-particles-background-via-enfold-theme/page/2/#post-901857

Best regards,
Ismael

April 25, 2019 at 11:46 am #1094357

mint
Participant

Hi Ismael,

Sorry for the delay in replying. Unfortunately, this doesn’t work either. I tried adding position: absolute (which works in Inspect/Dev Tools when added to the particles-js id via element.style but doesn’t seem to work when added to the actual style.css.

Thanks for the suggestion though.

April 25, 2019 at 12:59 pm #1094385

Mike
Moderator

Hi,
If your css is working in the inspector but not when you add it to the style.css of your child theme, please try this step:
perhaps your css/js file merging is on in your performance settings, so your merged css needs to be re-built. Please try going to Enfold Theme Options > General Styling > Quick CSS field and add a blank space in the field, then save your theme settings by clicking the big blue button “Save all changes”, then clear or purge any cache plugin, then clear your browser cache.
Your css should work now, if not then try disabling your merged css in the performance settings, and clear any cache.
If this still doesn’t work, please try adding your css to the: WordPress > Customize > Additional CSS field:
This loads last and overrides all other css if you are using !important;.

Best regards,
Mike

April 25, 2019 at 1:20 pm #1094396

mint
Participant

Hi Mike,

Thanks for the quick response. It was indeed the Performance css merging that was causing the issues. I now have it loading as a background element within a color section using the code block method. It looks ok but ideally I would prefer this to be the full width of the color section rather than just the content container but when trying to add to the color section ID it throws the particles to the very top of the screen (position: absolute, top: 0).

I’ll stick with what I have at the moment unless I get a flash of inspiration.

Thanks Mike.

April 25, 2019 at 11:40 pm #1094558

Mike
Moderator

Hi,
I’m glad this helped some, but to try to adjust the script we will need to see the site and backend.
I don’t see any links to your site in the thread.

Best regards,
Mike

April 26, 2019 at 10:20 am #1094670

mint
Participant

Morning Mike,

Thanks for coming back on this. It’s not a massive issue but if you have 5 minutes to take a look and offer any suggestions that would be great.

Thanks,
.andy

April 26, 2019 at 1:29 pm #1094729

Mike
Moderator

Hi,
Thanks for the login, but it doesn’t include admin access so I can’t see the css you are currently using, please check.

Best regards,
Mike

April 26, 2019 at 1:31 pm #1094732

mint
Participant

Sorry, Mike, login access level updated.

April 27, 2019 at 5:25 pm #1094932
Mike
Moderator
Hi,
Try adding this code to the end of your functions.php file in Appearance > Editor:
```
function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $( '#particles-js:first' ).insertBefore( '#av_section_3 .container' );
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');
```
and add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
#particles-js {
z-index: 10 !important;
}
```
Best regards,
Mike
April 29, 2019 at 10:42 am #1095214

mint
Participant

Morning Mike,

Again thanks for the input on this. It worked a treat and all is good now. Thanks again for the continued support and going above and beyond.

As usual, the service and support in regards to Enfold and kriesi.at, in general, is second to none.

Thanks!

April 30, 2019 at 2:46 am #1095564

Mike
Moderator

Hi,
Glad to help, I assume we can close this now, but I like to ask first. Shall we close this then?

Best regards,
Mike

May 2, 2019 at 3:52 pm #1096509

mint
Participant

Mike, sorry for delay in getting back to you. Yes all is good now with my requests. I did jump onto someone elses old thread so I’m happy for you to close action on my requests. Not sure if that also means closing off replies to the original posting though.

Thanks!

May 3, 2019 at 7:11 am #1096750

Rikard
Keymaster

Hi mintsuze,

Thanks for the update :-)

Best regards,
Rikard

June 25, 2019 at 3:29 am #1113087
chanjelin
Participant
Hello, I’m not a very experienced web developer… but I have confidence that I followed the steps properly. After reviewing my work, I still have a problem:

The particle effect is not in the background but is instead underneath the color section content. I’ve checked and double checked my work. I’ve tried reworking my files (this is the only custom code in my theme), and redoing the process… I can’t find the problem, any help is appreciated.
The problem may be outside of Enfold support but I would appreciate it if a moderator could at lease check the things that are in the realm of support, like the code block and page settings.

Thank you, access is in the private content.
- This reply was modified 5 years, 4 months ago by chanjelin.
June 26, 2019 at 4:16 am #1113440
Ismael
Moderator
Hi,

@chanjelin: Add this css code to move the particle container inside the color section.
```
canvas.particles-js-canvas-el {
    position: absolute;
    left: 0;
    top: 0;
}
```
Thank you for using Enfold.

Best regards,
Ismael
June 26, 2019 at 5:57 am #1113470

chanjelin
Participant

Thank you @Ismael for the quick response, however it hasn’t worked. I am a novice and I may not have added the code correctly… maybe I had to remove some code as well? This is simple enough, I’m not sure what I might have done incorrectly…

Would you take another look?

Thank you!

June 27, 2019 at 8:19 am #1113818

Ismael
Moderator

Hi,

Thank you for the update.

The Enfold > Performance > File Compression settings are enabled when we checked. The site probably loaded the old version of the stylesheet the last time you checked. We disabled the compression temporarily and added the code in the Quick CSS field. Please enable the particle script again.

If you have the time, please create your own thread so that we can close this one.

Best regards,
Ismael

June 27, 2019 at 1:54 pm #1113949

chanjelin
Participant

Thanks Ismael, it’s working decently well now. The element is stretched and doesn’t quite respond to my cursor’s precise location, but it’s working well enough. I’m happy with how it is now.

Have a great day :)

June 28, 2019 at 4:59 am #1114157

Mike
Moderator

Hi,
Glad Ismael could help, thank you for using Enfold.

Best regards,
Mike

September 28, 2019 at 3:01 pm #1143004

nickthe
Participant

I tried the above methods and work fine, the only issue, I get this error (Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null) in all pages I don’t using the particles-js effect.
How I can fix this?
Any help will be grate!
Sorry my English is not my best.
Also I try Mike solution (#1094932) to make it full width on color section i use it but goes in every color section on the page.

September 29, 2019 at 2:12 am #1143053

Mike
Moderator

Hi,
Please see this solution

Best regards,
Mike

October 1, 2019 at 9:52 am #1143612

nickthe
Participant

Thanks again Mike for your quick respond.
I’m not a very experienced web developer, so the steps to follow from the solution you recommend me is looking very hard for me.
Thanks for try to help me.

October 3, 2019 at 10:09 am #1144414

Ismael
Moderator

Hi,

@nickthe: What exactly are you trying to do? Please open your own thread and try to explain there what you’re trying to create — screenshots will also help. You can upload them to imgur or dropbox. We’ll close this thread for now.

Best regards,
Ismael
Author

Posts