What a good CSS atrribute/value to use as a javascript trigger

Question

I want to move a DOM Object inside another in specific screen sizes. I was inspired by this answer but i work with a layout thats changable with LESS so even it i use fixed widths on the objects i don't want to use with as a trigger. I like it because its lightweight and it dot requires something like equire.js or modernizr to emulate media queries and it works well for my purpose.

I right now use a bottom margin of 1px but i am not satisfied with this so i am looking for the most useless and meaning less css i can find to use it as a trigger. I heared about the "move-to" of css3 but seems its still a incomplete draft and not implemented in any browser. And if i am right browsers not even read it. At least its not showing up in firebug.

This is what i do:

css

@media screen and (min-width: 768px) {

    .sidebar-secondary {
        margin-bottom: 1px;
    }

}

@media screen and (min-width: 992px) {

    .sidebar-secondary {
        margin-bottom: 0;
    }

}

js

var sidebar_move = function(){
    if ( $(".sidebar-secondary").css("margin-bottom") === "1px") {
        $(".sidebar-secondary").appendTo(".sidebar-primary");
    }
}

window.setInterval(sidebar_move, 1000);

any idea if a "useless" css value i can use. some thing nobody uses. I like it to me as conflictless as possibe and changing css from other persons should not get interfere with this, so margin is a very bad solution for this.

and since almost everybody seems to have the opinion i should bloat my code up with java-script i like to know reasons for this.

and btw i think this is more reliable then pulling window width with javascript if i understand this right this is why complicated scripts like eqire.js exist or am i wrong?

Whats so bad with having js depend on css? i want to use it for this specific thing and nothing else.

Generally I'd try to use another approach but maybe this works: use min-width: 1px; — Seimen
– Seimen, Commented Jan 28, 2013 at 15:52

Fabrizio Calderan · Accepted Answer · 2013-01-28 16:27:25Z

1

I just suggest to use Enquire.js: it could be useful, without involving useless css rules

Your example would simply be:

enquire.register("screen and (min-width:768px)", {

    match : function() { 
        $(".sidebar-secondary").appendTo(".sidebar-primary"); 
    },

    unmatch : function() {
        /* e.g. remove .sidebar-secondary from .sidebar-primary */
    }
}).listen();

I think this approach is cleaner than using javascript that depends on css rules. In fact with your suggested approach

the mantainance of your app becomes harder (whoever, except you, could break the functionality of the page simply changing that specific rule);
javascript and css are strictly tied, when a good rule is to keep off css from javascript (and viceversa)

edited Jan 28, 2013 at 16:27

answered Jan 28, 2013 at 15:53

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

2 Comments

James Mitch Over a year ago

i mentioned that i already know equire js and that i don't want to use it. i only this one thing in my "app" and there is no need to include bloated js. so why you giving me this answer anyway? Folks please vote this down! Please read the stack overflow guidelines, its not welcome here to give opinions, ask for reasons ... you should answer what is asked and nothing else.

Fabrizio Calderan Over a year ago

I do regret - I didn't read carefully your note about enquiry. I'm sorry. Anyway I still think it's a better solution than using messy code and mixing css and javascript

AuRise · Accepted Answer · 2014-09-15 19:22:57Z

I've been using something similar like what you've been doing (I know this is a year old, but it doesn't seem to have the answer the OP wanted, and this was one of the first links my own google search brought up).

/*  Normal CSS  */
.mediaQueryTracker {
     width:auto;
}

/* Mobile Example */
@media only screen and (max-width: 479px) {
     .mediaQueryTracker {
          width:479px;
     }
}

As for Javascript:

var mobile_handler = function() {
    if ( $(".mediaQueryTracker").css("width") != "auto") {
        // Do stuff
    }
}

You can assign this class to an empy div with a display of hidden or none, or you can have your main container or wrap have the mobileQueryTracker class assigned to it in the HTML, but the value will change depending on the current media query. You can do specific things for each of your specified sizes or just the "catch all" mobile sizes by checking if it isn't set to auto.

Even simpler, you can skip the "mobileQueryTracker" name and just use the width of your container or wrap.

Collectives™ on Stack Overflow

What a good CSS atrribute/value to use as a javascript trigger

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related