onload not working on vanilla

jeongweejeongwee Vanilla version 2.6 ✭✭
edited August 2018 in Vanilla 2.6 Help

the onload works if i insert onload="function()" into master.default.tpl file.

but it won't work if i use

document.getElementById("**").onload = **

document.getElementsByTagName("**")[*].onload = **

document.getElementsByClassName("**")[*].onload = **

on *.js files.

why is that?

Comments

  • becuase it is incorrect javascript it won't work outside of vanilla either. that attribute only exist for body, and you are using a very 90s approach to events.

    what is it you are trying to do?

    grep is your friend.

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited August 2018

    @x00


    I want to change the icons here to make it retina-ready ( @2x double sized pictures )
    becoz it was bad to display at my IPhone and IPad.
    Its been better after i changed them, but i found that it has problem to display with new background urls when i touch on the screen of IPad and IPhone.

    picture below unbookmarked

    i touch on the screen
    it should be become like picture blow

    but it display like this which is the style i wrote for *:hover , and it stucks on the style and will not pass to picture 2.

    once i click on any of other button like the gear icon left site , the picture become correct now like below

    I guess that becoz i changed the urls so probbaly the inside js wont work.
    I want to make it a theme so i can not just replace the pictures to a folder that not under the theme folder.
    So i think i have to write codes for ontouchend and ontouchstart probably ? Am i right?
    So i made the codes like this

    document.getElementsByClassName("Hijack Bookmark")[0].ontouchend = changeBookmark;
    
    var c = document.getElementsByClassName("Hijack Bookmark")[0];
    
    var d = c.innerHTML;
    
    
    
    function changeBookmark(){
    
    if(d==="Bookmark"){
    
        this.style.background = "url(" + gdn.url('/themes/Colors/design/images/bookmarked.png') + ")";
    
    }
    
    else{
    
        this.style.background = "url(" + gdn.url('/themes/Colors/design/images/bookmark.png') + ")";
    
    }
    
    
    };
    

    vanilla supports Discussions per Page 10 to 100, so if needed i will add [*] to [100].

    but the codes above won't works , i replaced the function as onclick and test on a w3s page http://www.w3school.com.cn/tiy/t.asp?f=js_ifthenelse and i'ts working ( not the codes you saw from the page , I customed the codes of the page, just saying i use this to test onclick if that works ontouchstart or ontouchend should be also works ? ). But after i change it to ontouchend and move to *.js file. It wont work anymore. I try test everything like

    document.getElementById("**").onload = **
    
    document.getElementsByTagName("**")[*].onload = **
    
    document.getElementsByClassName("**")[*].onload = **
    
    document.getElementById("**").onclick = **
    
    document.getElementsByTagName("**")[*].onclick = **
    
    document.getElementsByClassName("**")[*].onclick = **
    

    on *.js files.

    all of them doesnt working. but they are working on the page i was testing

    http://www.w3school.com.cn/tiy/t.asp?f=js_ifthenelse

    onclick onload works only if i insert the onclick="" or onload="" to the elements of default.master.tpl file.

    but there has no such elements exist on the default.master.tpl file.

    Sorry im bad and just start to learn js, I dont know how to use any frame yet . so i just the "pure" javascript.

  • x00x00 MVP
    edited August 2018

    first don't use hand rolled javascript, use jquery something like

    jQuery(document).ready(function($) {
        $('.Hijack.Bookmark').on('touchstart mouseover', function() {
             $(this).css({'background-image': "url(" + gdn.url('/themes/Colors/design/images/bookmarked.png') + ")"});
        })
    
        $('.Hijack.Bookmark').on('touchend mouseout', function() {
             $(this).css({'background-image': ''});
        })
    });
    

    Also I think you need a better understanding of javascript in general You are not using the correct syntax. Ther is no substitute from properly understanding what you are doing. So suggest you do a short course.

    grep is your friend.

    jeongweeBleistivt
  • jeongweejeongwee Vanilla version 2.6 ✭✭

    thanks man , going to take a look on jQuery now.

Sign In or Register to comment.