CODEWITHSUNDEEP
javascriptcssbuttoninputbackground
ChristopherStrydom
ChristopherStrydom

Reputation: 8166

JavaScript Buttons Conflict With Each Other

Hi i have 3 different buttons on my page that are used to change the background image/colour of the page. The problem i have is that my main toggle button doesn't toggle the background once the image has been set to it using 1 of the other buttons.

If i press the button that runs this function...

$( "body" ).toggleClass( "bgimg", 1000 );

then i can set the background image using this button.

$("#SetBG").click(function() {

If i don't press the toggleClass button then the background image does not set. Its like the .bgimg class has to be set on the page before i can edit it?

Another problem is that once i have set the background image the .toggleClass button doesnt work! the class .bgimg does not toggle.

CSS:

body {
margin: 0px;
padding: 0px;
border: 0px;
}

.bgimg {
}

HTML:

<input type="text" id="ImageURL"></input>
<button id="SetBG">Set Background</button>
<button id="ReSetBG">Re-Set</button>

JavaScript:

$(function() {
    $( "#DialogBackground" ).dialog({
    open: function (event, ui) {$(".ui-widget-overlay").css({opacity: 0, filter: "Alpha(Opacity=00)"});},
    modal:true,
    autoOpen:false,
    height:450,
    width:450,
    resizable: false,
    buttons: [{
        id:"remove",
        text: "Remove/Add Background",
        click: function() {
        $( "body" ).toggleClass( "bgimg", 1000 );
        return false;
        }
    }]
    });

$("#SetBG").click(function() {
    var URL = document.getElementById("ImageURL").value;
    $(".bgimg").css('background-image',"url(" +URL +")");
    return false;
});

$('#ReSetBG').click(function() {
$('.bgimg').css('background-image', "url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')");
return false;
});

If someone could please show me what code is wrong or conflicting that would be great.

Upvotes: 0

Views: 348

Answers (1)

scrappedcola
scrappedcola

Reputation: 10572

If i don't press the toggleClass button then the background image does not set. Its like the .bgimg class has to be set on the page before i can edit it?

Another problem is that once i have set the background image the .toggleClass button doesnt work! the class .bgimg does not toggle.

You are mixing up 2 different css concepts, inline rules and stylesheet rules. What you are doing when you say something similar to :

$('.bgimg').css('background-image', "url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')");

Is target the element with class name bgimg and apply this inline css rule:

background-image: url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg')"

So if there isn't an element with the class bgimg nothing will happen. However if it does exist an inline css rule will be applied. If you remove the class nothing will change because the css isn't defined in a stylesheet by class but on the element itself. For your stuff to work the way you want it to you will want to either define 2 different styles in your css and use toggleClass to switch between the two or leave the class bgimg on the element always and use $('.bgimg').css('background-image', "") to remove the background image and the existing code to add/change.

Upvotes: 1

Related Questions