How do I implement jQuery Sifr Plugin properly? - javascript

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).

Related

CSS Variables Polyfil - IE11 for LitePicker JS

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.

VS code Intellisense support in PHTML-files for inline css / inline javascript

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

have NETWORK_ERR with less.js

I'm using less.js for better responsive css design, but now I encounter NETWORK_ERR while using webkit based browser and also chrome. However firefox would not have this kinda issue.
I trying to google my question but it seems the only solution is to put less files on other server or it's unavoidable to read less.js' src as "file:///*xxxx/less.js" instead of "file://*xxxx/less.js" .
My question is , is there any way to do to change the way as file:/// to file://?
and one more question , is there any better css framework which can do better responsive and organized design? Less.js is good to organize and I also use javascript to change some variable dynamic.
Thanks.
It is always good to serve css js and images from a different server which can act as CDN. and in your case you can also over come the chrome issue.
here are some of the solutions for your file:/// to file:// issue (not sure if you have already seen these)
look at this link
you can over come this in couple of ways look at Nathan Strutz's answer where he is suggesting to add a command-line switch -allow-file-access-from-files to your shortcut and Chrome will allow you to load LESS.JS without any problem, and also below you can how to add the command line switch.
also i am particularly interested in MrClean's answer (last answer) I havent tried it out though but you can give it a try.
and to answer your second question there are bunch of frameworks which can do css responsive designes click here for list i am particularly interested in foundation, mqframework, Golden Grid System framework and Fluid Baseline Grid.

Custom jQuery UI

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.

Are there any drawbacks to using head.js?

Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js
Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.
Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.
I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.
There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique
head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.

Categories