javascript syntax for class issue

Question

Ok I have this javascript...

$(document).ready(function() {
    $('#holder').toggleClass("visible");

    $('a.link').click(function(event) {
        // Over-rides the link
        event.preventDefault();
        // Sets the new destination to the href of the link
        newLocation = this.href;
        color = $(this).data("color");
        $('body').css('background-color', color );
        $('#holder').css('opacity','0' );
        // Delays action
        window.setTimeout(function() {
            // Redirects to new destination
                window.location = newLocation;
        }, 250);
    });

    $('h1').click(function(event) {
        $('#holder').toggleClass("visible");
    });

});

and I have this html .......

<body class="landingpage">

    <h1 class="begining">Page Tansitions</h1>
    <p><a class="link" href="/one.html" data-color="#f36c20">Page One</a></p>
    <p><a class="link" href="/two.html" data-color="#edcd40">Page Two</a></p>

</body>

... That's all fine and dandy and the js does its thing and changes the color of the page which is ref 'body' in the code above....

I don't want to change the 'body' tag of a html page I want to change a class something like .metro .tile-area-darkCrimson as referenced in my css and in my html... I can't for the life of me figure out how to present it in javascript can someone please help.

Cheers, Greg.

.... Further to that I have attempted to integrate it into a more complex structure that now doesn't seem to work ... I have link for the html where I am using a tile class and animation that do work without any changes.....

<a class="tile double bg-tile1color live animated flipInX link" data-color="#f36c20" data-role="live-tile" data-effect="slideUp" data-click="transform">

I am also using a javascript trigger when the user clicks on this tile and that is where I want to slot in the aforementioned javascript that changes the page color..I am guessing the javascript is overiding the transition....

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

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

});
</script>

user4639281 · Accepted Answer · 2015-04-28 23:16:09Z

1

Using jquery you can use full css selection methods

$('body').css('background-color', color );

Can be something like this

$('.metro .tile-area-darkCrimson').css('background-color', color );

answered Apr 28, 2015 at 23:16

user4639281

Sign up to request clarification or add additional context in comments.

2 Comments

user3504751 Over a year ago

that would work and as you have guessed this is for one box or button I have created with <a></a> ..... if I were to have many buttons would I just copy and paste it and give the top of the function a unique class name such as a.link1, a.link2 etc .....referencing this bit from the js ... $('a.link').click(function(event) { // Over-rides the link event.preventDefault();

user3504751 Over a year ago

i can only do one every 90 minutes so I will have to wait until tomorrow ... thanks for your help buddy

tcigrand · Accepted Answer · 2015-04-28 22:58:53Z

1

You can use jQuery's addClass

$('body').addClass('metro tile-area-darkCrimson');

answered Apr 28, 2015 at 22:58

tcigrand

2,3872 gold badges16 silver badges26 bronze badges

6 Comments

user3504751 Over a year ago

does that refer to the css and html iteractions of that with the correct syntax , i notice you use no dots to seperate the classes

tcigrand Over a year ago

Correct, if you read through the page I linked, you'll see "More than one class may be added at a time, separated by a space"

user3504751 Over a year ago

it bl***y worked though didn't it !!! legend !!! ....... why no dots then is that just a jquery derivation ?

tcigrand Over a year ago

Yes, you don't need to use selector notation, you just need to pass in the class names separated by spaces if there are multiple.

tcigrand Over a year ago

It's going to be hard to work through that problem in the comments. If this answer works for you, I would accept it and then create another question.

|

Collectives™ on Stack Overflow

javascript syntax for class issue

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related