Grow your CSS skills. Land your dream job.

Legend of Grimrock

  • # June 29, 2012 at 6:59 pm

    hi,

    I am trying to recreate game spell UI using jQuery, kinda stuck here.

    I know how to change src of image on click if it is in HTML code written the normal way (img src1, change to img src 2).
    I do not know how to do this with sprite where is always only transparent.gif.

    There is this toggle class jQuery but I am not sure it is the right one.
    I need to get rid of class .example1 and replace it with .example2

    Code Pen (info in .JS part)
    http://codepen.io/krsiakdaniel/pen/6/3

    demo online
    http://labs.krsiak.cz/misc/legend-of-grimrock/

    sprites
    http://labs.krsiak.cz/misc/legend-of-grimrock/img/e-sprite.png

    http://labs.krsiak.cz/misc/legend-of-grimrock/img/f-sprite.png

    # June 29, 2012 at 7:45 pm

    If all you want to do is toggle classes, that should be pretty easy. Here’s the code below:

    $('.sprite').click(function(){
    $(this).toggleClass('example1 example2');
    });

    Note: this will work assuming the element already has one of the classes on it (on page load).

    link: http://codepen.io/chrisxclash/pen/4/1

    # June 30, 2012 at 2:55 am

    @ChrisxClash thanks

    I made a mistake and created 2 sprites instead of just 1
    so I needed to change 2 classes which is silly
    I will create 1 sprite and just change position of the symbol I need in scope of that 1 image

    # June 30, 2012 at 4:04 am

    Ah alright. Instead of toggle classes you can just move the background position using .css('background-position','0px 0px') etc to change between multiple sprites.

    # June 30, 2012 at 4:33 am

    for handling only 1 icon class
    = off spell
    = on spell

    I made a master sprite
    http://labs.krsiak.cz/misc/legend-of-grimrock/img/sprite.png

    will try the background “moving”

    # June 30, 2012 at 4:44 am

    hope it will be easier while have 1 constant class . sprite
    so I will only change on click active vs. not active spell classes

    numbers 1 – 9
    http://krsiakdaniel.minus.com/lJlMgJN98cOby

    close + cast spell icons remain same

    # June 30, 2012 at 4:44 pm

    Here’s what I came up with. For all I know, you may be able to do this with a css3 event, or you could just do a :hover pseudoclass to make the background-position change. Also, might be able to clean up my jQuery a bit.

    link: http://codepen.io/chrisxclash/pen/4/5

    # June 30, 2012 at 5:38 pm

    thanks

    :hover was to easy I wanted to try / learn jQuery and ingame it has to be clicked so that is what I wanted to recreate
    looks good :)

    # June 30, 2012 at 9:40 pm

    Alright, awesome! Let me know if you have any more questions.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".