nathansmith / adapt Goto Github PK

Is it possible to consider the variation of Adapt.js for container_16 and container_24?

Nathan,

I noticed pinch zooming and tap zooming on iPhone and iPad is not functional on your Adapt demo site. Was this intentional or overlooked? Do you have any recommendations on how to enable it with your code?

Thank you!

Wes

Any recommendations on how to create a full width header without a 10px margin on each end?

My apologies, but I have looked all over your text and on google and haven't found a solution, just hacks mostly. Thought I would go to the source. Any help would be appreciated. Thanks!

Hi Natham,
I integrated ADAPT to gantry framework 2 months ago, can you see: http://responsive.gsuez.cl/
works perfectly.
My question is: what about this issue?

"A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions. "

Any news?

Best regards

The example use a noscript tag to load a mobile CSS.

  <noscript>
  <link rel="stylesheet" href="assets/css/mobile.min.css" />
  </noscript>

I don't think is a good idea because if a client than can do JS but behind a firewall than filter JS will end hup with no CSS at all.

I think it will be smarter to disable the mobile.css with JS but it will perhaps end up with a useless query.

I'm also curious witch CSS Google take (for the preview image on search result)

http://dev.opera.com/articles/view/replacing-noscript-with-accessible-un/

In some cases search engines can't read css files which included dynamically. Does it apply to adapt.js too? It is important to make accessible those files.

Hi just testing your script on IOS simulator it is not taking proper css for landscape view of iphone, patriot view is fine.

It would be nice to have a programmatic way of replacing the configuration and re-adapting the page. I've hacked my own copy to allow this, but I'm not sure whether the approach would be accepted as a pull request...

Basically, I made the following changes:

1. remove the aliasing of the config object's fields so that changed to ADAPT_CONFIG will be picked
   up.
2. bind a global window.adapt variable to allow the client code to call adapt() after changing the
   config.

Obviously, this whole thing could also be accomplished by wrapping the above in a reconfigure() method, which would allow the aliasing to be restored, too, but it would still require binding a global, which adapt currently doesn't.

If binding a global is a concern, it would be possible, I suppose to do that only if the initial config contains bindGlobal: true or something like that.

Anyway, I'd be happy to submit a pull request for this if there's any interest at all.

Hello, we have found a few issues with older IE browsers.

• IE7 - inconsistent layout when resizing - perhaps due to IE's sub-pixel rounding issue.
• IE6 - constant flickering after re-size event.

Thanks
Skully

I am using this in Rails and am using helper methods to get the full path to the CSS files. When I comment out the path definition in the CONFIG the script no longer inserts the stylesheet links.

When path is not set in the config it is set to an empty string on line 26.

Was it your intention to not insert links if path is not explicitly set?

I admit it: I'm a stickler for organization. Sometimes it makes sense to split some rules into a separate file. In this particular instance, I've brought in a stylesheet from an outside source (you!) and, rather than risk overwriting my work when I apply an update on your file, I want to put all of my rules somewhere else.

e.g.:

<script>
  var ADAPT_CONFIG = {
    path: 'css/',
    dynamic: true,
    range: [
      '0  to 760 - mobile.min.css',
      '760 to 980 = 720.min.css',
      '760 to 980 = amended-styles.css',
      '980 = 980.min.css'
    ]
  };
</script>

Thanks!

I did not see any other way to comment than to create an issue.

I like the callback feature however I needed to know the difference between page loading an resizing. I saw that you were checking url_old in adapt() so I added a boolean parameter to change() and pass it to callback():

function change(i, width, loading) {
.........

callback && callback(i, width, loading);

}

/////////////////////////////////////////////////////////////////////
And then in adapt() we call change like this:

if (!url_old) {
  // Apply changes.
  change(i, width, true);

...
else if (url_old !== url) {
// Apply changes.
change(i, width, false);

This works and my callback can behave differently on resize vs page load.

I was exploring the mobile and fluid versions of the adapt.js GS on my pages and I noticed that the fluid version doesn't follow the same kind of behavior that's expected in the normal 960.gs, here is a trivial example:

• http://jsfiddle.net/pgz2m/ (720px version)
• http://jsfiddle.net/pgz2m/1/ (fluid version)

I'm a CSS rookie but I'll try to come up with a solution and post an update if I find it.

The callback function is passed the width of the screen, which is useful, but doesn't reflect directly in the width of the containers.

Due to a jquery pĺugin I'm using, I have to set the width of some images based on the size of ".grid_12", which isn't defined before the callback since the css file has not been added yet to the document. I tried setting the 'onload' property of css but it didn''t work. Is there a way to call the callback just after the css has been actually loaded? (without some hacky setTimeout)

Due to delayed css insertion the styles are not applied when other scripts start their work. Especially this causes positioning and offset stuff assuming the site beeing rendered correctly to break.
There should be added some sort of event for triggering stuff after inserted css is loaded.

Example:

offsetLeft = 0 before css is loaded
offsetLeft is > 0 after css is loaded

now when you rely on such a value while positioning elements you have to wait until the css is loaded. But how if there's no event or callback possibility? There should be some sort of "onAdapt".
Startet developing on basis of Dean Edwards custom event solution and ended messing up with IE < 8

Hi…

It's hard to explain it… But, when we use mobile.css and we have a grid_x in a grid_x, we have margin-left and margin-right at 10px. But if we have .alpha or .omega, we have margin-left and margin-right at "0"…
OK…

But, for example :

(if you don't see above, below the representative code : )
div.grid_12
div.grid_4.alpha /div
div.grid_4 /div
div.grid_4.omega /div
/div.grid_12

So, for grid_4.alpha, we have margin-left and margin-right : "0"
for grid_4, margin-left and margin-right : 10px
grid_4.omega, margin-left and margin-right : "0"
and grid_12 margin-left and margin-right : 10px…

This creates a gap between the different .grid_4 in .grid_12

Do you see the problem ?

A possible solution would be to make margin-left and margin-right of grid_x in a grid_x to "0"…
An other solution : .alpha and .omega will have margin-left and margin-right at 10px…

First, let me say "great work!" Lately I've spent a great deal of time exploring adaptive/responsive design and, although I appreciate that no one solution is perfect, I like what adapt.js brings to the table.

I do have a couple of feature requests, which I'll split into two issues. The first addresses the all-or-nothing requirement for using callbacks/stylesheets; specifically, you can't just trigger a callback on one range and load a stylesheet on another. A combination may be desirable (as it was for me) when style inheritance creates issues. In my case, for mobile devices I need to set width:auto !important; to override values set inline. I can't simply create a generic rule in my default (mobile) stylesheet because that can only be overridden be specifying a new rule in a child stylesheet, when what I want is to use the styles set inline (effectively "undoing" the rule rather than overriding it).

(The inline values weren't my idea, by the way. I'm just stuck with them.)

How this would work:

In my default stylesheet (styles.min.css), I've specified #mobile .col1 { width:auto !important; }.

MY <head>:

<link rel="stylesheet" href="css/styles.min.css" />
<script>
  var ADAPT_CONFIG = {
    path: 'css/',
    dynamic: true,
    callback: layout,
    range: [
      '0  to 760',
      '760 to 980 = 720.min.css',
      '980 = 980.min.css'
    ]
  };
  function layout(i, width) {
    if (i === 0) {
      document.documentElement.id = 'mobile';
    }
  }
</script>
<script src="js/adapt.min.js"></script>

Obviously what will happen here is an extra <link> tag will be written out with "0" as the file, causing 404 warnings. Of course I could just create a separate stylesheet with one rule - and I certainly will if you disagree that flexibility here is needed.

I'm not sure it's the best way, but I've gotten this working pretty easily by modifying adapt.js as below. It essentially removes the requirement to specify 'path' and instead checks for a file.

Check if file is not a number (line 76):

  url = '';
  // Check for maxiumum or range.
  if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
    // Built full URL to CSS file.
    if (isNaN(file)) {
      url = path + file;
    }
    break;
  }

Check url instead of path (line 98):

  // Add the CSS, only if url is not empty.
  // Use faster document.head if possible.
  url && (d.head || d.getElementsByTagName('head')[0]).appendChild(css);

Of course your experienced eye may find I've missed something.

Thanks -

Hi

I use SSL on my site, and i get this bug

Mixed Content: The page at 'https://www.******.com/vb/' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/archivonarrow/v3/DsLzC9scoPnrGiwYYMQXpp4t0mJKPaLVqklzZuc32b4.woff'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://www.********.com/vb/' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/archivonarrow/v3/M__Wu4PAmHf4YZvQM8tWsHhM4mdXpoxYNWk7Ev34U70.woff'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://www.*******.com/vb/' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://www.*******.com/vb/' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2'. This request has been blocked; the content must be served over HTTPS.

how can I fix it ?

I'm running Chrome Version 22.0.1229.94 m. The test_class.html and test_id.html don't work properly when viewing the files locally. You have to F5 (refresh) in order for the DIV elements to display. I put the files on a live Apache server and they worked fine on first load. Not sure if this is a Chrome issue or code issue.

I'd love to add adapt.js to cdnjs, but they generally expect tagged versions of software. Do you feel the current state of adapt.js deserves a tag?

I understand the reasoning of wanting to only fire when the window is done resizing. However, it does make things really lagged out when resizing because of that. Removing or setting the timeout to something smaller drastically improves the response and "snappyness". It still only grabs the css once, and only when the resolution bounds change.

I haven't seen any negative impact so far, so I was just wondering what the reasoning behind that was and/or if I'm missing something.

Thanks!

Nick.

When you have nested grids and you are at mobile resolution, the nested divs are slightly indented. I was able to fix this by adding the following to mobile.css and mobile.min.css:

.alpha { margin-left: 0; }
.omega { margin-left: 0; }

Notice that omega has left set to 0 instead of right because there is only one column.,

My site draws charts whose size is based on the page width. For this reason, I need the print styles to match what's seen on the screen. I changed media="screen" to media="all" to allow for this. I think this would make a good configuration option for a future version.

Hey, maintainer(s) of nathansmith/adapt!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library nathansmith/adapt is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "nathansmith/adapt",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!