Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Help with calling the drop-down images from a sprite image.

whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
edited May 2012 in Vanilla 2.0 - 2.8

Our forum uses quite a lot of customized emoticons, and so I wanted to see if it was possible to call the emoticon images from a sprite image, thereby presumably saving quite a lot of overhead.

After a bit of fiddling I have worked out how to call the emoticons from a sprite image, but am lost as to how I could make the correct part of the sprite image appear in the drop down box.

I'm a plucky trier, not a professional, and whilst I can now find my way around css, js has me baffled.

Is what I am looking for achievable?

If so, can someone point me in the right direction, bearing in mind my lack of expertise?

Thanks if anyone can help.

Tagged:
«1

Answers

  • Is this what you mean? This is how to select the correct part of sprite. Or do you mean something else.

    http://www.w3schools.com/css/css_image_sprites.asp

    http://css-tricks.com/css-sprites/

    can you post a modified image of what you are trying to achieve.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    Peregrine

    Thanks for the reply.

    I can call the correct part of the sprite via css to appear in the comment, but not via js to appear in the drop down box.

    The part circled in red is the correct part of the sprite png, which shows up correctly in the comment.

    The part circled in blue, in the drop down menu, is the centre of the png sprite image, rather than a preview of what will appear.

  • peregrineperegrine MVP
    edited May 2012

    can you post you js and a snippet of the css

    this should get you on your way...
    http://www.alistapart.com/articles/sprites2/

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    The css is a simple modification to the Emotify.css file:

    .Emoticon1  { background-image: url('images/sprite.png'); background-position: -107px -273px; width:34px; height:16px;} 
    .Emoticon3 { background-image: url('images/3.gif'); width: 45px; }
    .Emoticon4 { background-image: url('images/4.gif'); width: 25px; }
    

    changing the path of the image.

    AfaIk, the drop-down box is controlled by the emotify.js file, part of which is below:

    $(function(){
      
      // Insert a clickable icon list after the textbox
      $('textarea#Form_Body').livequery(function() {
         // Pick up the emoticons from the def list
        var emoticons = gdn.definition('Emoticons', false);
    
        if (emoticons)
            emoticons = eval("("+$.base64Decode(emoticons)+")");
         
        var buts = '';
         var last = '';
        for (e in emoticons) {
            // no duplicates
            if (last != emoticons[e]) {
              last = emoticons[e];
              buts += ''+e+'';
            }
        }
        $(this).before("\
          Emoticons 

    From what I can tell, this calls the relevant image of the emoticon into the drop down box, which works fine if they are separate images, but clearly not if they are part of a single sprite file.

  • If no one gives you an answer, I'll experiment in a day or two. It would be on the cutting-edge for me too. Maybe I'll learn something!

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @peregrine

    Cheers!

    I was so pleased with myself for working out the css, but the drop-down has me stymied.

    It's beyond cutting-edge for me - it's 'bleeding hell edge'...

    Thanks for trying to help.

  • candymancandyman ✭✭
    edited May 2012

    @peregrine look at Vanilla 2 EmoCSS and at Xenforo SpriteCSS.
    Hope it helps.

  • 422422 Developer MVP
    edited May 2012

    Your issue is you need to replicate hover and click attribute for the sprite, from what i can see. You also are mixing sprite sheet with gifs? So not all of your code is there..or at least its missing vital elements. If you get no luck im willing to have a bash... But will leave others to try, emocss uses pure css to render images, so no images whatsoever. So this could e adapted to select list, so anyone feeling brave be my guest lol.

    There was an error rendering this rich post.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @candyman

    Cheers, but as far as I can see neither of those solutions use the drop down method for previewing smileys.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @422 - cheers for the reply.

    The css code I posted just shows the initial change I made for 'proof of concept'.

    I can get the emoticon to be called from the sprite in the comment, but got lost at how to change the dropdown part.

    If we (i.e. you clever bods) can get the drop down issue to work then I would change the rest of the image links to reference the sprite sheet.

  • 422422 Developer MVP

    How are you creating drop down? Doesnt the existing one use select drop down list.

    I think you are approaching it wrong, i have done this for our comments system on 422.com.au but using my emocss i am sure, will check in a bit its only 6.30 am lol.

    There was an error rendering this rich post.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @422

    Cheers.

    I'm just trying to adapt the current Emotify plugin which we are using.

    I worked out how to change the reference to the emoticon image, as that is just css but I don't know how to change the way the drop down works, as it is in js, and I have no idea about that.

    Any help would be gratefully received.

  • 422422 Developer MVP

    Right click the dropdown, see if it uses select options. If it doesnt, i see base64 is utilised, it could be a div switch. If you redid that to open emoticon spritesheet within a popup, then onclick close popup and fire emoticon into discussion that may work better.

    There was an error rendering this rich post.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @422

    Cheers, but I'm afraid your suggestion is beyond my competency.

    If you know a link to a tutorial site that covers this sort of thing, I'll happily have a bash.

  • 422422 Developer MVP

    Will have a look in a mo.

    There was an error rendering this rich post.

  • 422422 Developer MVP

    ahhh we have ADSL back , after one week !!! of dialup.

    @whu606 Have you got a link to website with test user/pass with emoticon thing I can look at?

    There was an error rendering this rich post.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @422

    whu606.com test/test

    This just has the standard Emotify plugin, without my changes, which I have been making on my local test site.

  • 422422 Developer MVP

    yep, its generating an array. Pulling the emoticons in sequentially. Im not sure I could help :( sorry

    There was an error rendering this rich post.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @422

    No worries (as I believe you say down your way...)

    Thanks for having a look.

  • 422422 Developer MVP

    goodonya cobber ;)

    There was an error rendering this rich post.

Sign In or Register to comment.