CODEWITHSUNDEEP
jquerycssimagehtmlbackground
sketch360
sketch360

Reputation: 51

Toggling a background image with jQuery

My brain is going round in circles trying to figure this out - I think I need the help of someone with a bigger brain! Admittedly I'm a jQuery novice so I'm hoping the solution to my problem is fairly simple. I'm trying to write some code that will toggle the background image of a div (which has already been specified by a stylesheet to introduce a :hover function). The div's that I'm affecting also function to toggle other div's in a question/answer situation.

At present, I've managed to get to the stage (with the following code) that the jQuery DOES change the background image as intended (in this case, from green '/img/bg/nav-giclee.png' to black '/img/bg/nav-down.png');

HOWEVER what I need is for only one of the divs to be black at any one time, ie when selected. At the moment after being clicked and turning to black, the div remains black even when an alternative DIV is clicked. I suppose what I'm aiming for is for clicking on a DIV to reset the background images of the other DIVs (whilst not interfering with their show/hide question/answer features). Have I overcomplicated this explanation?!?

The working page is at: http://sketch360test.co.uk/giclee.php/... Many thanks in advance for any benevolent help...

The jquery I'm using for now is:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();
        $(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
    });
});

Upvotes: 1

Views: 4894

Answers (4)

Jakub Konecki
Jakub Konecki

Reputation: 46008

$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();
        $(".question").css("background-image", "url(/img/bg/nav-giclee.png)").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
    });
});

Also, I would recommend adding / removing a CSS class rather then setting background-image manually - you may find out than you have to modify more properties, ie. border.

UPDATE

$(".question").removeClass("selected").eq(i).addClass("selected");

Upvotes: 1

b01
b01

Reputation: 4384

Try this, it should reset the current one.

<style type="text/css">
    .backgroundDown {
        background-image: url(/img/bg/nav-down.png);
    }
</style>
<script type="text/javascript">
    jQuery.fn.fadeToggle = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle'}, speed, easing, callback);
    };

    $(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();
        //$(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
        $(".question .backgroundDown").removeClass("backgroundDown");
        $(".question").eq(i).addClass("backgroundDown");
    });
});
</script>

Upvotes: 1

algiecas
algiecas

Reputation: 2128

It would be healthy to use css class to apply background image instead of hardcoding that in javascript. And just remove this class from other divs while applying to currently being clicked.

$(".view-row").removeClass("backgroundDown");
$(".view-row").eq(i).addClass("backgroundDown");

Upvotes: 1

Jon Erickson
Jon Erickson

Reputation: 114876

Try 'reseting' all of the divs backgrounds to the original, and then setting the clicked one's to black

$(function() {
    $("#answer .views-row").hide();

    var views_row = $("#question .views-row");
    views_row.click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).toggle("slow").siblings().hide();

        // Add this line...
        views_row.css("background-image", "url(/img/bg/nav-giclee.png)");
        $(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
    });
});

Upvotes: 0

Related Questions