Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 26, 2017 at 12:05 am #799896
    Doron

    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)?

    May 26, 2017 at 12:20 am #799897
    Doron

    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
    :(

    May 26, 2017 at 1:43 am #799917
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    May 26, 2017 at 9:30 am #800031
    Doron

    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

    May 26, 2017 at 11:18 am #800080
    Doron

    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!

    May 26, 2017 at 11:40 am #800089
    Doron

    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 7 years, 2 months ago by Doron.
    May 26, 2017 at 3:23 pm #800165
    Victoria

    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

    May 26, 2017 at 3:29 pm #800169
    Doron

    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!

    May 26, 2017 at 4:19 pm #800219
    Andy

    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

  • Author
    Posts
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.