CODEWITHSUNDEEP
javascriptjqueryhtmlcssmedia-queries
Yannic Hansen
Yannic Hansen

Reputation: 235

jQuery if-request max-width for mediaqueries

I want to use if-requests for my jQuery-functions in my website for special window-widths. This jQuery-functions enable and disable the attribute display of some divs and if the desktop is bigger than 1300pixels it should show all cols instead of only two in the same time. My jQuery functions look like this:

function changeCol() {
    var d1= document.getElementById('right-col');
    $(d1).removeClass('hidden');
    $(d1).fadeIn(200);
};

The CSS of the cols in 2cols mode are looking like this: 

.col {
   float: left;
   margin-right: 1.36986301369863%;
   /*width: 31.50684931506849%;*/
   width: 47.93617021276596%;
   height: 100%;
   padding: 0 1.36986301369863%;
   overflow-y: auto;
   overflow-x: hidden;
}

width: 47.9% is the width for two displayed cols and width: 33.% for three displayed at the same time.

Upvotes: 1

Views: 178

Answers (1)

matewka
matewka

Reputation: 10168

You don't need jQuery for that at all.

Use CSS:

.right-col {
    width: 0;
    opacity: 0;

    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

@media only screen and (min-width: 1300px) {
    .right-col {
        width: auto;
        opacity: 1;
    }
}

That should preserve this fadeIn animation.

Here's a little fiddle that I prepared to show you the effect: http://jsfiddle.net/CgwDH/.

Upvotes: 1

Related Questions