Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #799896

    there is a cool background animation I want to add to one of my pages (only to this one specific page)
    It’s pretty simple and it look like this (the link is in the private content)
    Problem is it needs two JS files to run (sketch.min.js and index.js)

    I’ve tried numerous ways to get this work with enfold (from other threads in this forum) but none of them worked
    ..i think the only way might work as adding them as function to the Functions.php like stated here https://kriesi.at/support/topic/add-javascript-to-page/#post-497269
    BUT i’m not sure:
    1. how can use this solution with for two scripts instead of one?
    2. how can I limit them to work in only one specific page (in my case -my home page)?

    #799897

    update:
    i also tried:

    function custom_code(){
            if ( is_page( 2599 )) {
    	?>
    <script> CODE HERE </script>
    	<?php
            }
    }
    add_action('wp_footer', 'custom_code');

    but it didn’t work either
    :(

    #799917

    Hi,

    Have you attempted using a code block directly on the home page?

    Best regards,
    Jordan Shannon

    #800031

    yes I did
    sketch.min.js and index.js are not short one line code, they are very long
    but I tried anyway putting them warped in a <script> tag inside a code element but it didn’t work
    i’m not sure why

    #800080

    UPDATE! it works!
    i tried again and it does work
    i thought it wasn’t working because the white background color was overlapping it so i couldn’t see it !
    once i turned the background to transparent (usingbackground-color: rgba(0,0,0,0.0)!important; ) it now works just fine
    thank you so much!

    #800089

    but now i have a overflow problem..
    there is a scroll bar and he shouldn’t be there..
    I tried adding

    body {
      margin: 0;
      overflow: hidden;  
    }

    and it works but than it effects the whole website and all the other pages..
    is there a way to restrict it the the home page only?

    • This reply was modified 6 years, 9 months ago by Doron.
    #800165

    Hi Doron,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    body.home {
      margin: 0;
      overflow: hidden;  
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #800169

    OMG
    thank you so much!

    I also found that putting <style type = "text/css">html, body { height: 100% !important; overflow: hidden !important; }</style>
    inside a code block in the page builder also do trick
    thank you very very much!

    #800219

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘how to add 2 Javascript code snippets into specific single pages?’ is closed to new replies.