Cannot make it working

[suruja]

Hello @vzaccaria !

I like your approach. Thanks for sharing this lib. I wanted to try it on my new project but I could not make it working by following your website instructions.

After having installed the lib with Bower, adding the following line extracted from the website: <script src='bower_components/dyn-css/dyncss.js' type='text/javascript' /> raise an error in the web console. <script src='bower_components/dyn-css/lib/dyncss.js' type='text/javascript' /> seems to be the correct line, isn't it?

More importantly, while I can see it working on your demo/doc page, the -dyn-margin-top: '(@win-height - @el-height)/2.0'; css property does not update the related element style on my page, nor by default, nor by resizing the window, nor by scrolling the page. The lib does not seem to do anything, and yet the lib seems to be successfully imported since window.dynCss is actually defined.

A friend of mine also tried it on his project, unsuccessfully as well. Have you any idea of what may cause such an issue?

[vzaccaria]

Hi, make sure to:

1. serve the page from a web server (it can be even local)
2. bower_components is accessible from the root of the served directory. Otherwise, you should update the path in the src attribute.

Let me know if the error persists.

[potsky]

Hi !

Same problem here.

DynCss seems to not work at all. No console errors, no anormal behaviour. I have exactly the same result as if I did not load it.

1. There is this string in your code /Users/zaccaria/development/github/DynCSS/node_modules/gulp-browserify/node_modules/browserify/node_modules/insert-module-globals/node_modules/process/browser.js. Is it normal ?
2. I have set debug to true in your code. There is 1 element in my page and I have these console logs at launch :

[Log] dyncss-entry: Scanning for css (vendor.min.js, line 13)
[Log] dyncss-entry: Content loaded (vendor.min.js, line 13)
[Log] dyncss-entry: Initializing handler (vendor.min.js, line 13)

The element css is :

.location {
    position        : absolute;
    top             : 0;
    -dyn-margin-top : '(@win-height - @el-height)/2.0';
}

[vzaccaria]

@potsky you can also merge dyncss.js into your bundle; you should treat it like any other bower module.

1. That's a weird behavior due to browserify but it works, don't worry. It's just the key it uses to resolve require's.

2. DynCss looks for css files as specified in link tags:

   <link rel="stylesheet" href="css/client.css" type="text/css">
   ...
   

   when debug is set to true you should see something like this:

   dyncss-entry: Loaded http://localhost:4000/css/client.css 
   

   In your case, it seems that it cannot find the css file.

3. Have a look at this example I made for a tutorial on DynCss: https://github.com/vzaccaria/dyncss-example1

[potsky]

Ok perfect !

The problem was just the missing type="text/css".

Thanx!

ps : SASS/SCSS/Compass preprocessor do not like the #{} syntax in -dyn-webkit-transform: '"translate( 0px , #{-1*@win-scrollTop}px) "';for example

[vzaccaria]

ps : SASS/SCSS/Compass preprocessor do not like the #{} syntax in -dyn-webkit-transform: ‘“translate( 0px , #{-1*@win-scrollTop}px) “‘;for example

Did you try with escaping #? ​

On Tue, Jun 3, 2014 at 3:16 PM, Potsky [email protected] wrote:

Ok perfect !

The problem was just the missing type="text/css".

Thanx!

ps : SASS/SCSS/Compass preprocessor do not like the #{} syntax in -dyn-webkit-transform: '"translate( 0px , #{-1*@win-scrollTop}px) "';for example

— Reply to this email directly or view it on GitHub https://github.com/vzaccaria/DynCSS/issues/2#issuecomment-44962593.

[potsky]

Escaping # works