Foundation utils is not working in ie8 - internet-explorer-8

I am trying to use Foundation.utils in IE8 but I always get true on small only and false on the rest, for example:
Foundation.utils.is_small_only() = true all the time
Foundation.utils.is_small_up() = false
Of course the above can't happen because if it is small only, then it's for sure small up...
Any fix for that?

Foundation 5 doesn't support IE 8 at all but you can try this.
Quoted from Foundation FAQ:
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of
today's popular browsers automatically upgrade themselves including
Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE
supported on Windows XP, which Microsoft will officially stop
supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first,
meaning it relies on media queries to layer in more complex layouts
and components. Browsers or devices that don't support media queries
will be restricted to a simple, single-column layout. In some ways,
Foundation 4 better supports IE6-7 insomuch as it provides a mobile
but not entirely broken experience. If IE8 support is important for
your users / customers, you can use Foundation 3.2, which supports
IE8. It's not mobile first but it's good stuff.

I've written my own solution to support utils in ie8.
I built it specific for my use (it could be done much better but why to make the effort? it's only for ie8..), still I believe you can use it, even with minor tweaks.
var win = $(window),
bodyFontSize = parseInt(body.css('fontSize'));
function matchMediaQuery(mediaQuery)
{
var winWidth = win.outerWidth(),
winHeight = win.outerHeight(),
mediaQuerySizes = mediaQuery.match(/\d+\.?\d*em/g);
if (mediaQuerySizes == null)
{
return true;
}
else
{
mediaQuery = mediaQuery.replace(/^(only screen)( and )?/,'').replace('min-width:',winWidth + '>=').replace('max-width:',winWidth + '<').replace('min-height:',winHeight + '>=').replace('max-height:',winHeight + '<').replace('orientation:landscape',winHeight + '>' + winWidth).replace(' and ',' && ').replace(' or ',' || ');
for (var i = 0, len = mediaQuerySizes.length; i < len; i++)
{
mediaQuery = mediaQuery.replace(mediaQuerySizes[i],parseInt(mediaQuerySizes[i])*bodyFontSize);
}
return eval(mediaQuery);
}
}
$.each(Foundation.media_queries, function(key, value)
{
eval('Foundation.utils.is_' + ((key.indexOf('-') > -1) ? key.replace('-','_') : key + '_up') + ' = function() { return matchMediaQuery("'+value+'"); }');
});

Related

ExtJs 6.2 classic does not work with Firefox and a touchscreen

ExtJs 6.2.0 does not work on Firefox if the screen is touch enabled. I noticed the problem using the classic version of the framework, I cannot tell if the modern version is also affected.
This is the exact problem: If the screen is touch enabled, it is possible to use the application with gestures, but not with the mouse. The mouse click does not fire the click events.
There is a mention of this problem on Sencha forum, but what is very frustrating is that Sencha fixes the problem for subscribers, but does not release a new GPL version. There is also a code snippet, but it was not quite clear to me how to use it:
// Undo sencha's logic
// Needed for top nav buttons to not open links in new tabs/windows when clicked in IE11 EXTJS-13775
// Firefox 52 is getting deteceted now as ALWAYS having pointer events
// chromeOS causing issues too
// unit tests failing
if (Ext.isIE || Ext.isEdge || (Ext.firefoxVersion >= 52) || Ext.os.is.ChromeOS || window.inUnitTest) {
// sorry windows mobile phones...
var eventMap = Ext.dom.Element.prototype.eventMap;
eventMap.click = 'click';
eventMap.dblclick = 'dblclick';
}
After some trial and error, and comparing console.logs and rifling in the code, I came up with an override that fixes the bug.
/**
* workaround for bug in ExtJs 6.2.0.
* Resolved in current yet unreleased version
*/
Ext.define('Mb.override.dom.Element', {
override: 'Ext.dom.Element'
},
function(){
var additiveEvents = this.prototype.additiveEvents,
eventMap = this.prototype.eventMap;
if(Ext.supports.TouchEvents && Ext.firefoxVersion >= 52 && Ext.os.is.Desktop){
eventMap['touchstart'] = 'mousedown';
eventMap['touchmove'] = 'mousemove';
eventMap['touchend'] = 'mouseup';
eventMap['touchcancel'] = 'mouseup';
eventMap['click'] = 'click';
eventMap['dblclick'] = 'dblclick';
additiveEvents['mousedown'] = 'mousedown';
additiveEvents['mousemove'] = 'mousemove';
additiveEvents['mouseup'] = 'mouseup';
additiveEvents['touchstart'] = 'touchstart';
additiveEvents['touchmove'] = 'touchmove';
additiveEvents['touchend'] = 'touchend';
additiveEvents['touchcancel'] = 'touchcancel';
additiveEvents['pointerdown'] = 'mousedown';
additiveEvents['pointermove'] = 'mousemove';
additiveEvents['pointerup'] = 'mouseup';
additiveEvents['pointercancel'] = 'mouseup';
}
})
I didn't test if every event translation combination is working. The lines needed especially for click event fired by the mouse with a touchscreen are
eventMap['click'] = 'click';
eventMap['dblclick'] = 'dblclick';
It's a known issue. See our site compatibility note for details:
https://www.fxsitecompat.com/en-CA/docs/2016/touch-event-support-has-been-re-enabled-on-windows-desktop/

VBScript not working in IE 11

This is the shocking news from Microsoft, Internet Explorer 11 no longer supports the VBScript. I've tried possible ways to run the vbscript in the IE 11 but not effective. Please provide the solution/suggestions.
<meta http-equiv="X-UA-Compatible" content="IE=10">
I've tired this and below js (will runs the vbscript in IE 11)
function callVBS(scriptName) {
//-Variables--------------------------------------------------------
var wsh, pathName;
if ("ActiveXObject" in window) {
wsh = new ActiveXObject("WScript.Shell");
if (typeof(wsh) == 'object') {
pathName = location.pathname.substr(0, location.pathname.lastIndexOf("/"))+"/";
pathName = pathName.slice(1);
wsh.run("wscript.exe \"" + pathName + scriptName + ".vbs\"", 1, true);
wsh = null;
}
}
else {
alert("Your Browser doesn't support ActiveXObject");
}
}
Ie isn't available anymore, but i will give the answer.
Scripts and ActiveX Objects are disabled in ie11 bt default.
There is something called Edge Mode, that should be off.
Find Tools, click Internet Options.
Select Security, click Custom level.
Under the "Active Scripting", there should be a radio, enable it.
And finally click OK.

HTML5 Input type "number" in Firefox

I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
I was working on a very simple feature:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
Firefox ... not so much. It acts as if I had a "text" type.
Is that a known issue? Workaround?
Thanks
First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
This page has details on HTML5 forms and the current bugs
https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.
Is that a known issue?
Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)
Workaround?
JavaScript
input type="number" is not implemented in Firefox yet as of version 25 (November 2013).
Bug 344616 is the relevant ticket in Bugzilla#Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Update 10 March 2014 - Good news! Looks like the ticket was fixed in Firefox 29, scheduled for release on 29 April 2014.
Update 30 April 2014 - Confirmed, I just gave it a try, and Firefox 29 has support for input type="number".
No browser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.
Opera will show you an UI letting you click arrows up and down to increase or decrease the number.
You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.
Chrome has no UI for the number yet, thus there is no help or no visual hint that a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.
You are using the :invalid pseudo-class to make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.
Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.
i am using firefox, i had the same issue developing my input type number typing caracters and spaces etc...
anyway i m using angular 2 in this examples, its almost similar to javascript, so you can use this code in every case :
here is the html :
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
here is the function FilterInput :
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
in this function i had to just let the keypress of numbers, direction, deletes enter, so this function is just for the positive integer not doubles.
Firefox has supported patterns since 4.0
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
(For help, see http://html5pattern.com/)

Letter-sized Document truncated when printing from browser on Mac OS X

The bottom of the page is truncated when printed. (Approx 1/2 to 1").
This printing problem does not seem to be specific to Flash (printing certain PDFs also yields this problem), but that is where we found it.
The problem does not occur in older versions of OS X, but does occur in the most recent versions (10.5.5 and up). Not sure where the line is. The same application on Windows works fine.
It happens in Safari and Firefox.
Our Flash CS3 (AS2) application uses the PrintJob object to send pages to the printer. The pages are supposed to be letter-sized. On Windows they are letter-sized and print fine. But on the Mac, the pages are truncated. When the browser Print dialog comes up, if you change paper size to A4, the document prints fine. IT IS NOT SUPPOSED TO BE A4.
What is going on?
Here is a fraction of our printing code:
private function runPagePrintJob(pages:Array):Void {
var pj:PrintJob = new PrintJob();
if (pj.start()) {
var paperHeight:Number = this.pointsToPixels(pj.pageHeight);
var paperWidth:Number = this.pointsToPixels(pj.pageWidth);
for (var i:Number=0; i<pages.length; i++) {
var mc:PrintablePage = pages[i];
var xScale:Number = paperWidth / mc._width;
var yScale:Number = paperHeight / mc._height;
if ((xScale < 1) || (yScale < 1)) {
mc.setScale(Math.min(xScale, yScale) * 100);
}
mc.setBGSize(paperWidth, paperHeight);
var xMin:Number = 0;
var xMax:Number = paperWidth;
var yMin:Number = 0;
var yMax:Number = paperHeight;
pj.addPage(mc, {xMin:xMin, xMax:xMax, yMin:yMin, yMax:yMax}, {printAsBitmap:true});
}
pj.send();
}
delete pj;
this.close();
}
private function pointsToPixels(pts:Number):Number {
return pts/72*System.capabilities.screenDPI;
}
Have you tried this with more than one printer model? I've seen similar problems that have been the result of a buggy printer driver.

mouse double click is not working quite good

I am using the following code to record screen, when recording, when using mouse to double click some item, for example double click a ppt to open it in PowerPoint, it is not very responsive. I have tried and it is much better when using screen recording function of Windows Media Encoder 9. Any ideas what is wrong?
My environment: Windows Vista + Windows Media Encoder 9 + VSTS 2008 + C#. I wrote the following code in the initialization code of a Windows Forms application, and I suspect something wrong with my Windows Forms application?
My code,
IWMEncSourceGroup SrcGrp;
IWMEncSourceGroupCollection SrcGrpColl;
SrcGrpColl = encoder.SourceGroupCollection;
SrcGrp = (IWMEncSourceGroup)SrcGrpColl.Add("SG_1");
IWMEncVideoSource2 SrcVid;
IWMEncSource SrcAud;
SrcVid = (IWMEncVideoSource2)SrcGrp.AddSource(WMENC_SOURCE_TYPE.WMENC_VIDEO);
SrcAud = SrcGrp.AddSource(WMENC_SOURCE_TYPE.WMENC_AUDIO);
SrcVid.SetInput("ScreenCap://ScreenCapture1", "", "");
SrcAud.SetInput("Device://Default_Audio_Device", "", "");
// Specify a file object in which to save encoded content.
IWMEncFile File = encoder.File;
string CurrentFileName = Guid.NewGuid().ToString();
File.LocalFileName = CurrentFileName;
CurrentFileName = File.LocalFileName;
// Choose a profile from the collection.
IWMEncProfileCollection ProColl = encoder.ProfileCollection;
IWMEncProfile Pro;
for (int i = 0; i < ProColl.Count; i++)
{
Pro = ProColl.Item(i);
if (Pro.Name == "Screen Video/Audio High (CBR)")
{
SrcGrp.set_Profile(Pro);
break;
}
}
encoder.Start();
thanks in advance,
George
I faced the same problem. But the problem doesn't reside in your code or mine. When I tried to capture screen from Windows Media Encoder application itself I faced the same problem too in about 50% of the sessions. It's evident that it's a bug in WindowsMediaEncoder itself.
George
Here are a couple options (from http://www.windowsmoviemakers.net/Forums/ShowPost.aspx?PostID=1982):
Enable the MouseKeys Accessibility option, and type + to double-click
Run the encoder and target application on different machines, and capture a remote desktop session

Resources