javascript add additional attribute change

Question

I Have this Javascript:

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
    }, 2000);

});
</script>

This is great as it loads another page into the current page and that is helpful.

Question is, how can I change the background color of the a class that is already loaded?

The class is called metro as defined in its css that is included and is used to apply the background color of the main page.

EDIT -------

My JS now looks like this and still doesn't work...

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".metro.tile-area-darkCrimson").css('background-color', '#f36c20');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script>

not sure what is wrong any help really appreciated here !

btw the CSS class for .metro.tile-area-darkCrimson looks like this .....

.metro .tile-area-darkCrimson {
  min-width: 100%;
  height: 100%;
  background-color: #1f255b !important;


    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;

}

Maybe with something like this: `$(this) |-> .removeClass('btn-primary') |-> .addClass('btn-danger disabled') |-> .text('WAIT');` (in this case "this" is a button that changes color and text) — Trix, May 05 '15 at 08:09
may be make an other class with desired `background-color` and apply that class — ozil, May 05 '15 at 08:11
that's great thanks but i just want to be able to apply the change on the background color and not sure on the syntax for that — user3504751, May 05 '15 at 08:12
is it the case that i can't just change the class that has already loaded ? — user3504751, May 05 '15 at 08:13
[LOOK HERE](http://stackoverflow.com/questions/20350221/set-background-image-in-css-using-jquery) — Trix, May 05 '15 at 08:16
wouldn't work as I am specifying a bg-color and not an image — user3504751, May 05 '15 at 08:19

score 1 · Accepted Answer · answered May 05 '15 at 08:15

1

Maybe you should only load a fragment of the company-overview.html page rather then adding another body element.

From https://api.jquery.com/load/

Loading Page Fragments

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

$( "#result" ).load( "ajax/test.html #container" );

After the content was load you might also add/remove css classes or alter the css by passing a callback function:

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

$( "#result" ).load( "ajax/test.html", function() {
  $('.my-class', '#result').removeClass('my-class');
});

answered May 05 '15 at 08:15

jantimon

36,840
23
122
185

another pandoras box but you make sense , ....so other pages being loaded into the div wouldn't need a body as it would just load a div instead of teh whoel body of the other page is that what your saying ? – user3504751 May 05 '15 at 08:20
... if this is the case it is a seperate matter although very much appreciated, I will look into it – user3504751 May 05 '15 at 08:31
ok I figured out what you are trying to say and this makes sense and have made the change ... I now have a call to the specific div in the company over view page..... Now how do I change the bg color of the class metro that is the body of the original page where the overview page is loaded into ? – user3504751 May 05 '15 at 08:39
I would use just css or remove the class from the body – jantimon May 05 '15 at 12:21

score 0 · Answer 2 · answered May 05 '15 at 08:13

0

you can add a callback to your load method:

$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load(
  "company-overview.html",
  function() {
        $(".metro").css("background-color", "red");
    }
);

answered May 05 '15 at 08:13

rvandoni

3,297
4
32
46

this didn't seem to work , should i be replacing "red" with a specific hex color ? – user3504751 May 05 '15 at 08:20

javascript add additional attribute change

2 Answers2