Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

In this Discussion

Vanilla 2.6.1 is here with critical security patches. One of them has been publicly disclosed.

onload not working on vanilla

jeongweejeongwee Vanilla version 2.6 ✭✭
edited August 3 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 3

    @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 3

    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.