jQuery to JS not workin Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    jQuery to JS not workin

    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°1

    jQuery to JS not workin Empty jQuery to JS not workin

    Post by BloodDrunk Fri 28 Apr - 15:41

    Hello,

    I have this jQuery code
    Code:
    $(document).ready(function(){
      var path = location.pathname;
      var links_members = `<ul class="linklist">
                 <li><a href="/memberlist?mode=posts&order=DESC&submit=Ok&tt=1&username">Most Messages</a>&nbsp;&bull;&nbsp;</li>
                            <li><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&tt=1&username">Last Visited</a>&nbsp;&bull;&nbsp;</li>
                            <li><a href="/memberlist?mode=username&order&submit=Ok&tt=1&username">Members by name</a>&nbsp;&bull;&nbsp;</li>
                            <li><a href="/memberlist?mode=groups&order&submit=Ok&username">Member in usergroups</a></li>
                          </ul>`;
     
    if(path.indexOf("/u") >= 0 || path == "/privmsg" || path == "/profile" || path == "/" || path == "/groups" || path == "/register" || path == "/login"){
      $("#underNav").html("");
    } else if (path == "/memberlist"){
      $(".user-relative-forum-statistics").html(links_members);
    }
    });
    which I've rewritten to JS like the following:
    Code:
    //Variables
    var path = location.pathname;
    var x = document.getElementById("underNav");
    var links_members = '<ul class="linklist"><li><a href="/memberlist?mode=posts&order=DESC&submit=Ok&tt=1&username">Most Messages</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&tt=1&username">Last Visited</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=username&order&submit=Ok&tt=1&username">Members by name</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=groups&order&submit=Ok&username">Member in usergroups</a></li></ul>';

    //Function
    if (path.indexOf("/u") >= 0 || path == "/privmsg" || path == "/profile" || path == "/" || path == "/groups" || path == "/register" || path == "/login"){
      x.innerHTML = "";
    }
    else if (path == "/memberlist"){
              x.innerHTML = links_members;
    }
    but the JS code doesn't seem to work, while jQuery works just fine.
    I've tried testing JS with alert command, and the code runs, but it simply doesn't manipulate the content of the "#underNav".


    Last edited by BloodDrunk on Tue 2 May - 19:33; edited 1 time in total
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19324
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°2

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by Ape Fri 28 Apr - 15:43

    What is this code made to do ?



    jQuery to JS not workin Left1212jQuery to JS not workin Center11jQuery to JS not workin Right112
    jQuery to JS not workin Ape_b110
    jQuery to JS not workin Ape1010
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°3

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Fri 28 Apr - 15:55

    It's supposed, depending on which page you currently are, display appropriate HTML content in #underNav.
    It's not complete code yet.

    The reason I want to use JS is because it's faster than jQuery. jQuery gives noticeable delay, unlike JS, and it bothers me really much.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°4

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by Ange Tuteur Fri 28 Apr - 16:28

    Hey,

    The problem is that your code is executing before the document is ready. All JavaScript on Forumotion is executed in the <head> section, so trying the retrieve an element before it has been parsed will throw an error. ( i.e. "cannot set innerHTML property of null" where null is "x" ) Wrap your code with this and it should work without issue :
    Code:
    document.addEventListener('DOMContentLoaded', function () {
      // code to execute when the document is ready
    });

    It's pretty much the equivalent of jQuery's document ready function. i.e.
    Code:
    $(document).ready(function () {

    });

    and the shorthand version :
    Code:
    $(function() {

    });
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°5

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Fri 28 Apr - 16:44

    Hey Angie,

    So that's why JS doesn't work, and jQuery does..
    But this still brings me back to the problem, even if I use JS. How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.

    You can check it yourself: www.nfssecrets.tk
    Just click any navigation button and see how bad it performs.. (bad, as in quite the delay, atleast for me).
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°6

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by Guest Sun 30 Apr - 14:48

    BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
    You could set the opacity of the page to 0 from the css:
    Code:
    body{opacity:0.0}
    , then turn it back to 1 just after the page loads and javascript changes stuff. Smile
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°7

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Sun 30 Apr - 14:56

    Wolfuryo wrote:
    BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
    You could set the opacity of the page to 0 from the css:
    Code:
    body{opacity:0.0}
    , then turn it back to 1 just after the page loads and javascript changes stuff. Smile
    Actually, that is a very good idea! I'll try it out and see how that'll workout.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°8

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by Guest Sun 30 Apr - 14:57

    BloodDrunk wrote:
    Wolfuryo wrote:
    BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
    You could set the opacity of the page to 0 from the css:
    Code:
    body{opacity:0.0}
    , then turn it back to 1 just after the page loads and javascript changes stuff. Smile
    Actually, that is a very good idea! I'll try it out and see how that'll workout.
    Good luck! thumright
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°9

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Sun 30 Apr - 15:19

    This could work I think, does it "feel" bad? Could you test it out little bit, I'm not sure whether to use that approach or not.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°10

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by Guest Sun 30 Apr - 15:39

    I used that method on my forum for quite a lot of time and no one seemed to be bothered 'bout it, or even notice it.
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°11

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Sun 30 Apr - 17:07

    I tried using it, but it causes some other problems, so I guess I'll just have it the way it is, until I figure what could be done to "fasten" it..
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°12

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by BloodDrunk Tue 2 May - 19:32

    Close this thread, I'll stick to the way it currently is.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°13

    jQuery to JS not workin Empty Re: jQuery to JS not workin

    Post by SLGray Tue 2 May - 20:09

    Locked as Requested



    jQuery to JS not workin Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top