search

ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

Response.js does not work with JQuery 2.1.0 or something else #59

Closed dkova closed 9 years ago

dkova commented 9 years ago

Dear Author,

Please help me. I have tried an example code:

                <div
                    data-r320='markup @ 320+' 
                    data-r481='markup @ 481+'
                    data-r641='markup @ 641+'
                    data-r961='markup @ 961+' 
                    data-r1025='markup @ 1025+' 
                    data-r1281='markup @ 1281+' 
                >
                optional default markup
                </div>

I have JQuery2 connected in header:

   <script type="text/javascript" src="/templates/js/jquery-2.1.1.min.js"></script>

And Response.js on footer:

<script type="text/javascript" src="/templates/js/response.min.js"></script>

But example code and other aren't working. My :

<body class="metro" data-responsejs='{
  "create": [
    { "prop":"width", "prefix": "min-width-", "lazy":true }
    , { "prop":"height", "prefix": "min-height-", "lazy":true }
    , { "prop":"device-width", "prefix": "min-device-width-", "lazy":true }
    , { "prop":"device-height", "prefix": "min-device-height-", "lazy":true }
    , { "prop":"device-pixel-ratio", "breakpoints":[0, 1, 1.5, 2] }
  ]}'>

Please help to solve this problem.

ryanve commented 9 years ago

It looks fine at a glance. It may be an issue with something else on your page. Check your console for errors.

dkova commented 9 years ago

There is no errors in Firebug console...

dkova commented 9 years ago

It shows "optional markup" phrase

ryanve commented 9 years ago

I see the problem. You need to make sure the attribute names match what you specify as the prefix. Attributes like data-r320 use "prefix": "r". Attributes like data-min-width-320 use "prefix": "min-width-". If you omit the prefix it will use the default, which happens to be what you have. See the wiki.

dkova commented 9 years ago

Thank you very much!!! It's working! And I have one more question. How to make like this - if screen is small, style="position:fixed" is disabled?

ryanve commented 9 years ago

Use media queries in your CSS

@media (min-width: 481px) {
  .example { position: fixed; }
}