1. Post #1
    Conservative Cunt who fucking loves piss
    Elecbullet's Avatar
    November 2007
    11,691 Posts
    Hello, I am the administrator of the Wolfenstein WIki. I would like to create a template that would allow me to have clickable buttons or the like which would highlight portions of a map. However I have only limited powers as an administrator.

    - I CAN access and edit a sitewide .js script
    - I CAN create tables and divs and spans
    - I CAN give these things IDs and class names.
    - I can NOT give these things onclicks and onmouseovers

    Basically, in extremely simple terms that ignore everything I do know how to do, imagine that I have a table (id "map") and two buttons (in class "clickmap", id "button1" and "button2"). I want to be able to click the first button and make the table X pixels wide. Then I want to click the second button and make the table Y pixels thin again. But I have no access to onclick or onmouseover or any of that, only to a sitewide JS script.


    Could anyone make any suggestions about things I could put in my sitewide JS to make something like this work? I hope I'm not being too vague.

  2. Post #2
    Dragon Member
    Dragory's Avatar
    January 2006
    1,312 Posts
    Have you tried binding the element's click event to a function in the sitewide JS?

    Code:
    function handleClick()
    {
        alert('Working.');
    }
    
    document.getElementById('button1').onclick = handleClick;
    Or with an anonymous function:

    Code:
    document.getElementById('button1').onclick = function()
    {
        alert('Working.');
    }

  3. Post #3
    Gold Member
    Crhem van der B's Avatar
    January 2010
    1,691 Posts
    Or you can do the same with jQuery's $.click().
    Reply With Quote Edit / Delete Reply Windows 7 United States Show Events Agree Agree x 1 (list)

  4. Post #4
    Conservative Cunt who fucking loves piss
    Elecbullet's Avatar
    November 2007
    11,691 Posts
    Have you tried binding the element's click event to a function in the sitewide JS?

    Code:
    function handleClick()
    {
        alert('Working.');
    }
    
    document.getElementById('button1').onclick = handleClick;
    Or with an anonymous function:

    Code:
    document.getElementById('button1').onclick = function()
    {
        alert('Working.')
    }
    otn
    I have actually gotten something like this to work on a small scale which I could theoretically expand.

    The next issue would be how to "store" X and Y co-ordinates on each button so that I can use these X and Y co-ordinates as arguments for the function.

    This is difficult as a majority of tags applied to divs and tables are chopped off. I'm considering storing it in the id of the button, then parsing it.

  5. Post #5
    Dragon Member
    Dragory's Avatar
    January 2006
    1,312 Posts
    otn
    I have actually gotten something like this to work on a small scale which I could theoretically expand.

    The next issue would be how to "store" X and Y co-ordinates on each button so that I can use these X and Y co-ordinates as arguments for the function.

    This is difficult as a majority of tags applied to divs and tables are chopped off. I'm considering storing it in the id of the button, then parsing it.
    Does it chop data attributes off? E.g. <button data-x="100">Button</button>.
    Reply With Quote Edit / Delete Reply Windows 7 Finland Show Events Programming King Programming King x 1 (list)

  6. Post #6
    Gold Member
    SataniX's Avatar
    May 2010
    5,635 Posts
    Could have it stored in the JavaScript file in an array if that won't work.

  7. Post #7
    Conservative Cunt who fucking loves piss
    Elecbullet's Avatar
    November 2007
    11,691 Posts
    Could have it stored in the JavaScript file in an array if that won't work.
    This is a wiki. Ideally, when someone adds a new page for a new level of Wolfenstein 3D, they wouldn't have to (and indeed most likely wouldn't be able to) modify the central js file to highlight the new map. Not to mention that if a highlighted map were made for all levels on the wiki, that would be 123 levels (60 + 21 + 21 + 21) which makes for a tad of a clusterfuck.

    The best I can do is make a template that would allow the user to easily put complex wiki markup in.

    Edited:

    Does it chop data attributes off? E.g. <button data-x="100">Button</button>.
    It does chop attributes off, but I will try that.

    I was not aware of the data attribute.

  8. Post #8
    Conservative Cunt who fucking loves piss
    Elecbullet's Avatar
    November 2007
    11,691 Posts
    Oh SHIT, it doesn't chop off data tags! This will make everything a lot easier.

    I hope that data tags have good browser compatibility.

  9. Post #9
    Dragon Member
    Dragory's Avatar
    January 2006
    1,312 Posts
    Oh SHIT, it doesn't chop off data tags! This will make everything a lot easier.

    I hope that data tags have good browser compatibility.
    Well, they are basically just attributes, so I guess they are supported. You can also get them like you would any other attribute (instead of e.g. jQuery's "data()"), so that should also be supported quite widely.
    Reply With Quote Edit / Delete Reply Windows 7 Finland Show Events Friendly Friendly x 1 (list)

  10. Post #10
    Conservative Cunt who fucking loves piss
    Elecbullet's Avatar
    November 2007
    11,691 Posts
    Okay, I am reasonably certain that I am going to get this to work. Thank you all.