?
Solved

Using image sprites and jQuery?

Posted on 2011-05-11
11
Medium Priority
?
690 Views
Last Modified: 2012-05-11
Greetings,

Consider the following code:

$('#msglogingygia1,#msglogingygia2,#loginDiv').hide(function(){
	$('#msggigyacomplete').show();
	$('#loginProvider').val(logingygia.loginprovider);
	var socialProvider = $('#loginProvider').val();
	$('#social_icon').attr({
		src:'images/social_icons/'+socialProvider+'.png',
		alt: ''+socialProvider+''
		});
	$('#msggigyacomplete').css('margin-top', '-25px');
	});

Open in new window


Based on the data which populates the value attribute of #loginProvider, this
code will select one of six separate png images and make it appear in
#social_icon.  

What I want to know is how would I modify this code to use an image sprite of
the same six icons (see attached) instead of the individual images?

My assumption is it would involve using jquery to add and remove CSS classes
with perhaps coordinates to locate and expose each individual icon on the sprite
as needed.  Or would jquery handle the coordinates directly?  Or am I totally
offbase on this?

Also, in general, when is it recommended and NOT recommended to use image
sprites?
GetSprite.ashx.png
0
Comment
Question by:max7
  • 6
  • 4
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35743861
yes it IS recommended and there are hundreds of tutorials

http://www.google.com/search?q=jquery+sprite+buttons

The top one will even fade the sprite
0
 
LVL 1

Author Comment

by:max7
ID: 35744050
Yes, I realize there are numerous tutorials since I did a similar search.

I was hoping that by posting on ee, I would get a response which would give me more guidance than simply suggesting a google search ....
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35744068
Sure - since you had not received any comments yet, I wanted to give you at least a start.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:max7
ID: 35744137
OK, that was kind of you, thank you. I apologize if my response came off snappy; I misunderstood your intent.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35744148
No problem. I have pushed "request attention" for you.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35760817
This is not an answer, but have a look here: http://demos.thatryan.com/jSocial/
0
 
LVL 1

Author Comment

by:max7
ID: 35764555
It's really very kind of you, mplugian, thanks for trying to help.

Good news is, I figured out to make it work!

It's more html and css and the jquery code get reduced to half of what I originally had.

so first, I wrap the img tag in it's own div and set the div position to relative and the img to position to absolute.  Img tag is also set initially to display:none;

Then I create style classes for each of the six social networks buttons and using the CSS clip property, I'm able to expose each individual icon as needed and position it on the page using top and left properties

Lastly, for the jquery rather than using .attr() I instead remove that portion of my code and replace it with this:

var socialProvider = $('#loginProvider').val();
$('#social_icon').addClass(''+socialProvider+'');
});

Open in new window


So far, it works in firefox and chrome and I just need to test for IE7&8
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35764684
Should work. Please accept your own answer as answer
0
 
LVL 1

Accepted Solution

by:
max7 earned 0 total points
ID: 35765728
I would like to accept my own answer to this question
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35766789
Here you are
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses
Course of the Month17 days, 13 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question