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

whu606

This discussion is related to the Emotify :) addon.

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.

peregrine

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.

whu606

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.

peregrine

can you post you js and a snippet of the css

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

whu606

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.

peregrine

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!

whu606

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

candyman

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

422

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.

whu606

@candyman

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

whu606

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

422

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.

whu606

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

422

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.

whu606

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

422

Will have a look in a mo.

422

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?

whu606

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

422

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

whu606

@422

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

Thanks for having a look.

422

goodonya cobber ;)

peregrine

I just installed the emoticon plugin but... edited... now I see kind of what you are talking about...

no answers yet though..

whu606

@peregrine

Thanks for taking a look!