Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree2Likes
  • 1 Post By mlseim
  • 1 Post By mlseim

Thread: If you have enqueud javascript in functions.php file, must you also put something on.

  1. #1
    Senior Member
    Join Date
    Nov 2012
    Posts
    113
    Member #
    33949
    Liked
    2 times

    If you have enqueud javascript in functions.php file, must you also put something on.

    Hi, if you have enqueued javascript in functions.php file, must you also put something on your actual wordpress page, example:

    <script type='text/javascript' src='http://www.artandleatherspencer.local/themes/twentythirteen-child/js/custom_script.js'></script>

    or don't you put anything on the wordpress page except the html for the animation, as the animation is a clock that has html,css and javascript to it.

    The css and html is working, as the clock is showing, but its not doing anything, so the javascript obviously is not working.

    I have been stuck with this problem for six months now, and cannot go further with wordpress, until I figure it out, so if anybody can help me with this problem, I will be very grateful.
    Thanks

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,971
    Member #
    5580
    Liked
    760 times
    If you put your javascript on a plain HTML file and view with browser, does it work?
    By this I mean you don't use wordpress .... just see if it works by itself on a normal web page.
    Let me know if it works or not.
    spencer likes this.


  4. #3
    Senior Member
    Join Date
    Nov 2012
    Posts
    113
    Member #
    33949
    Liked
    2 times

    miseim, Here, I also have javascript in notepad++ in the html and css, still not work

    Quote Originally Posted by mlseim View Post
    If you put your javascript on a plain HTML file and view with browser, does it work?
    By this I mean you don't use wordpress .... just see if it works by itself on a normal web page.
    Let me know if it works or not.
    No, the javascript will not work, even if I have it in an html page with css. I view the page in chrome, and it shows the clock, but it does not do anything.
    Here is my full page with everything on it:


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="uif-8">
    <title>clock!</title>
    <style type="text/css">
    html {
    background: linear-gradient(to right, rgba(90, 93, 145, 1) 0%, rgba(173, 255, 99, 1) 100%);
    text-align: center;
    font-size: 10px;
    }


    body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    }




    .clock {
    width: 30rem;
    height: 30rem;
    border: 20px solid white;
    margin: 50px auto;
    border-radius: 100%;
    position: relative;
    padding: 2rem;
    box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0, 0, 0, 0.2);
    }




    .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px);
    }


    .hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: 0.3s all;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    </style>
    }
    <script language="javascript">
    const hourHand = document.querySelector('.hand-hour');
    const minuteHand = document.querySelector('.hand-minute');
    const secondHand = document.querySelector('.hand-seconds');




    function getTime() {
    const now = new Date();


    const seconds = now.getSeconds();
    const secondsDegree = (((seconds / 60) * 360) + 90);
    secondHand.style.transform = `rotate(${secondsDegree}deg)`




    const minutes = now.getMinutes();
    const minutesDegree = (((minutes / 60) * 360) + 90);
    minuteHand.style.transform = `rotate(${minutesDegree}deg)`




    const hours = now.getHours();
    const hoursDegree = (((hours / 60) * 360) + 90);
    hourHand.style.transform = `rotate(${hoursDegree}deg)`






    }


    setInterval(getTime, 1000);
    </script>
    </head>
    <body>
    <div class="clock">
    <div class="clock-face">
    <div class="hand hand-hour"></div>
    <div class="hand hand-minute"></div>
    <div class="hand hand-seconds"></div>
    </div>
    </div>
    </body>
    </html>

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,971
    Member #
    5580
    Liked
    760 times
    Where did you get that clock from?

    Is this a "codepen" script you found online?


  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,971
    Member #
    5580
    Liked
    760 times
    See this example:
    https://www.geeksforgeeks.org/how-to...nd-javascript/

    You'll notice that the interval timer is part of the function that draws/moves the hands.
    I think that's where your script is failing ... yours draws the hands one time and never updates.

    That example I found looks nice and it uses a JPG for the clock face. They use a separate .css and .js files, but it can be part of one .html script (like you are doing now). You have to upload the JPG and reference that too.

    If you can get that to work on a simple .html file, then you should be able to do it within wordpress (like you are doing with your failing script).
    Last edited by mlseim; Jul 13th, 2021 at 10:00 AM.
    spencer likes this.


  7. #6
    Senior Member
    Join Date
    Nov 2012
    Posts
    113
    Member #
    33949
    Liked
    2 times
    Thanks a lot for that, I will try iit.

  8. #7
    Senior Member
    Join Date
    Nov 2012
    Posts
    113
    Member #
    33949
    Liked
    2 times
    Thanks for the clock code. It works in notepad++.
    I have not tried to enqueue it in functions.php in wordpress yet, as I am trying to enqueue a simple pop up window at the moment to see if that works, but unfortunately, I cannot seem to get any code and javascript to work in wordpress.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com