0

so I have this function below...

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

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script>

I basically want to change the css attributes of tile-group.six to have a different margin. Any ideas how I might go about this ?

user3504751
  • 147
  • 2
  • 13
  • possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) – cchapman Apr 23 '15 at 14:15

2 Answers2

4

you should take a look at the .css() function of jQuery like

$(".tile-group.six").css('margin-left', '50px');

and so on

Enjoyted
  • 1,131
  • 6
  • 15
  • worked well thanks , the above answer used a slightly different syntax any ideas which one is better any why ? – user3504751 Apr 23 '15 at 14:02
  • Callum's answer allows you to set more than one CSS value at once: `$(selector).css({ cssKeyA: 'cssValueA', cssKeyB: 'cccValueB', ... });`, rather than `$(selector).css('cssKeyA', 'cssValueA').css('cssKeyB', 'cssValueB');`. – Phylogenesis Apr 23 '15 at 14:04
  • ah right , I think I will use that one in this instance thanks for your help buddy ! – user3504751 Apr 23 '15 at 14:05
  • this didnt seem to work - $(".tile-group.main").css({ margin-left:"50px", width: "1080px"}).load("musability-musictherapy-company-overview.html"); – user3504751 Apr 23 '15 at 14:18
3
$(".tile-group.six").css({margin:"0"});

This should be what you're after.

As Phylogenesis pointed out in his comment on the below answer, this method can be used to change multiple CSS values at once using a comma delimiter e.g.

$(".tile-group.six").css({margin:"0", padding:"0"});
Callum.
  • 146
  • 12
  • this didnt seem to work - $(".tile-group.main").css({ margin-left:"50px", width: "1080px"}).load("musability-musictherapy-company-overview.html"); – user3504751 Apr 23 '15 at 14:14
  • the function doesn't run at all – user3504751 Apr 23 '15 at 14:21
  • Okay, change `margin-left` to `marginLeft` and that *should* work – Callum. Apr 23 '15 at 14:22
  • ok stupid me missing the uppercase on the L for left.... it works awesome, your a genius thanks ... why the different name references then ? i am guessing javascript reads a - as something else – user3504751 Apr 23 '15 at 14:27
  • I think it is to do with the hyphen yes, another one off the top of my head is `backgroundColor`, which would be `background-color` or simply `background` in a style sheet :) – Callum. Apr 23 '15 at 14:33