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
– Trix, Commented May 5, 2015 at 8:09
may be make an other class with desired background-color and apply that class — ozil
– ozil, Commented May 5, 2015 at 8: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
– user3504751, Commented May 5, 2015 at 8:12
is it the case that i can't just change the class that has already loaded ? — user3504751
– user3504751, Commented May 5, 2015 at 8:13

jantimon · Accepted Answer · 2015-05-05 08:15:40Z

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');
});

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 ?
... if this is the case it is a seperate matter although very much appreciated, I will look into it
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 ?

rvandoni · Accepted Answer · 2015-05-05 08:13:20Z

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 5, 2015 at 8:13

rvandoni

3,4375 gold badges34 silver badges48 bronze badges

1 Comment

user3504751 Over a year ago

this didn't seem to work , should i be replacing "red" with a specific hex color ?

Collectives™ on Stack Overflow

javascript add additional attribute change

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related