Jquery Returning values to original

Question

So my script works perfectly, but here is the issue, I have buttons (Sprite action here) that are 40px height, but the top 20 only shows perfectly. When you click the button ie img the bottom 20px show perfecto! but... Issue, i included in my script a way to return all others to there default (only one should be selected) now, how can I fix this issue that I seem unable to correct as I can select multiple of them ** USERS can switch ** The last part of the script that is the issue. Thanks

$(document).ready(function() {
    $('.form_sub').hide();
    $('.theader').addClass('active');

    $('.theader_t').click(function() {
        $('.form_header').show();
        $('.form_sub').hide();
        $('.theader').addClass('active');
        $('.sub_theader').removeClass('active');
    });
    $('.sub_theader_t').click(function() {
        $('.form_header').hide();
        $('.form_sub').show();
        $('.theader').removeClass('active');
        $('.sub_theader').addClass('active');
    });

    $('.top_head_img').click(function() {
        $(this).css({
            position: 'relative',
            bottom: '20px'
        }).siblings().css(
            'bottom', '0'
        );
    });
});

<ul class="top_head">
    <li>
    <a href="javascript:void(0)" onClick="selectPic5('top');"><img src="custom/images/top2.jpg" alt="Left" border="0" class="top_head_img"/></a>
    </li>
    <li>
    <a href="javascript:void(0)" onClick="selectPic5('center');"><img src="custom/images/mid2.jpg" alt="Center" border="0" class="top_head_img"/></a>
    </li>
    <li>
    <a href="javascript:void(0)" onClick="selectPic5('bottom');"><img src="custom/images/bot2.jpg" alt="Right" border="0" class="top_head_img"/></a>
    </li>
</ul>

Oh please dont worry about the A href="javascript:void(0) its for a separate script that works fine. — Cam, Sep 14 '12 at 21:01
It's unclear what your question is. It sounds like you are trying to use image sprites as buttons in a group of which you would like only one to be selected at any given time. Is this the case? — crowjonah, Sep 14 '12 at 21:15

crowjonah · Accepted Answer · 2012-09-14T21:37:10.113

1

Without very much to go off, this is what I'd suggest: use CSS to do your image sprites.

Rather than actual image tags, you could use background images on some block link tags (feel free to re-add whatever onClicks you need on these as):

<ul class="top_head">
   <li>
     <a href="#"></a>
   </li>
   <li>
     <a href="#"></a>
   </li>
   <li>
     <a href="#"></a>
  </li>
</ul>

The sprite stuff in the CSS:

.top_head li a {
    height: 20px; 
    width: 20px;
    display: block;
    background: url(http://lorempixel.com/20/40/abstract) 0 0 no-repeat;
    overflow: hidden; 
    margin: 5px;
}
.top_head li a.selected {
    background: url(http://lorempixel.com/20/40/abstract) 0 -20px no-repeat;
}

And your click function could we as simple as this:

$('.top_head li a').click(function() {
    $('.top_head li a').removeClass('selected');
    $(this).toggleClass('selected');
});

edited Sep 14 '12 at 21:37

answered Sep 14 '12 at 21:06

crowjonah

2,858
1
23
27

Needs to be an image, the reason for that and trust me I get your point but it needs to be a button not a background image, this would have been done if it was a background. – Cam Sep 14 '12 at 21:52
[Check this fiddle](http://jsfiddle.net/crowjonah/bSpRM/) - do those not quality as buttons? – crowjonah Sep 15 '12 at 00:52
I took a second look at your script. This actually should work. – Cam Sep 17 '12 at 13:08
Hey @crowjonah thanks man it worked, the reason I didnt think it would work was cause the display block wont inline my li, but... replaced with inline-block made magic thanks man! – Cam Sep 17 '12 at 13:38

Jquery Returning values to original

1 Answers1