I am using a DatePicker js library called LitePicker JS for a project which has been flawless so far. It uses no dependencies and has been easy to style. The only issue is that it does not work in I.E11 due to the litepicker using CSS variables. The documentation on the LitePicker Js library site recommends using an ie11CustomProperties polyfill to make it work but It. I installed the script via npm - tried it, the script does load fine (i can see it in the header using dev tools for IE), the datepicker opens when you click in the form field but the styling is still all broken in I.E11.
From me checking one of the CSS properties using dev tools, this is what is happening:
instead of width: 266px;
the browser is reading it as:
-ieVar-width: var(--litepickerDayWidth);
Which is incorrect.
As much as IE11 is ridiculous to need to support these days unfortunately I've been told it needs to work in it. If anyone has any experience with this polyfill could I get some advice on what is going wrong? This is the LitePicker:
https://wakirin.github.io/Litepicker/
and this is the polyfill:
https://github.com/nuxodin/ie11CustomProperties
Any help would be massively appreciated.
Thank you
Hi i am the author of this polyfill.
To make css-variables work, i have to rewrite all the stylesheets.
In IE11 width:var(...) fails and is skipped by the css-parser.
Bud -ieVar-width: var(...) is not skipped and the polyfill later can read it.
If you can make me a demo on https://jsbin.com/, I can check it out.
Related
I am using Visual Studio Code since a few days and I was wondering if it is possible to have support for Intellisense inside inlined css-blocks and/or inlined javascript in '.phtml'-files.
I could not find a solution online only a few people complaining about this not working from a few months back but I nothing that worked for me.
It would really help me a lot if someone has any idea how to solve this or at least a step in the right direction, or if I have to move the css and js into external files (of course thats better(!) but thats not the point here ;))
Thanks in advance.
This works for me after 2 changes in vscode.
User settings
I added below to the user settings
"files.associations": {
"*.phtml": "php"
},
Extension
Installing the intelliphense extension
And now both php as well as css intellisense works
Make sure you have no other conflicting extension enabled which may cause issue.
Also do have a look at the below open thread
https://github.com/Microsoft/vscode/issues/670
I'm currently updating the website http://www.dev.optiekvandevecht.nl/, I updated it from Joomla 3.3.6 to Joomla 3.4.1. Before updating to 3.4.1, a few lightbox thigns wouldn't work. Right now, I've updated Joomla, and the lightboxes work fine, however, now the nivoSlider seems to be broken (and I suppose it's got to do with jQuery errors, .nivoSlider is not a function.
I honestly don't see what is wrong, it's a Joomla module called ARI Image Slider, but I can't find anything related to the issues I run into.
I deleted an (apparently) unused extension and the problem was solved
It seems like the jquery is already included in any of the extension. Try disabling jquery in any one extension then check it. I hope it would work.
For starters, I don't know js. What I do know, I've pick pocketed from other people's work. I know that's lame so I'm trying to learn. I am trying to polyfill my nav that use css transitions with Modernizr. I've got the <script> in the HTML that calls for Modernizr. What I don't know is what js to use to call the correct load function - I think. I've looked all over the internet for tutorials, but they all assume that I already know js so they are no help.
This is my site in progress. What I'm working on is the navigation. It works correctly in Firefox. I'm trying to make it work in IE.
Firstly, there's no need to apologise for learning from others. This is how we all learn.
Modernizr is great for helping you deal with older browsers. But the important thing to know about Modernizr is that it doesn't actually do any polyfills itself; it simply tells you whether a polyfill is needed for any given feature. You still need to provide that polyfill code.
In your case, you're referencing a file called polyfillfortransition.js, but this doesn't seem to exist on your site. This is why nothing is working: you're detecting that the polyfill needed, but you're not actually polyfilling it.
So you need a polyfill script for it. I don't actually know of one that will suit, and a quick search didn't turn one up, but hopefully this will help point you in the right direction.
I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?
You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.
I have been trying all afternoon to get the jQuery Sifr Plugin (http://jquery.thewikies.com/sifr/) to work, without success. The plugin's site has limited documentation and for something so apparently easy, I'm sure I must be nearly there. I also found some info at http://www.eona.com/sifr/ but I think it's for an older version of the plugin.
I have made my own font files using the online Sifr Generator (http://www.sifrgenerator.com/) and also on my own using Flash CS4 and neither seem to work.
Here's my code:
$(document).ready(function(){
$.sifr({
path: 'http://**.com/js/',
save: true
});
$('.pageInfo h1').sifr({
font: 'soho',
debug: true
});
});
Now, the "save: true" is not in the docs for this plugin but I did find it elsewhere on the plugin's site, the funny thing is, that without it, nothing happens but with it included, all I get is the default "Rendered with sIFR3" message instead of the text of my element.
The plugin's site also says "It supports sIFR version 2 and version 3 fonts.", what does this mean? Could my font files be in the newer v3 type?
I would really appreciate any and all help.
Thank you in advance
Here I Am!
Sorry for delay. :)
You must specify at least build and version.
Here's a sample:
$.sifr({
build: 436,
version: 3,
path: 'http://**.com/js/',
save: true
});
I had the same issue using the jQuery plugin (which uses sIFR 3 now), for me it was that the pre-published swf's were < version 436 - specifically fonts from sifrvault. Likely your font needs to be re-published, grab the ttf and use OpensIFRr.
-Jay
Have you tried skipping the font option and passing a direct reference to the swf (including the .swf file extension) to the path option? I experimented with that plugin just a few weeks ago I think that may have been necessary to get things started.
YMMV, but my experience was that many odd little bugs crept in w/ the plugin and it's was far less frustrating (plus just as easy and performant) to run a normal sifr.replaceElement inside your document(ready) code using the official sIFR 2.0.7 release from http://wiki.novemberborn.net/sifr/.
I don't believe the jQuery plugin is compatible with sIFR 3 (which I would recommend you use anyway).