cross-browser

How to convert an HTML Collection into Array in Firefox and IE

I need to convert an array-like object into a real array. I’m using getElementsByTagName to get the list of elements. var tablerow = document.body.getElementsByTagName(‘tr’); console.log(tablerow); var tablerowArr = Array.prototype.slice.call(tablerow) console.log(tablerowArr); In Chrome, tablerowArr correctly converts into an array with the same number of items. However in Firefox and IE, it has 0 items. What am I doing incorrectly? Note: I…
Read more

Why doesn’t this code work on safari?

What this code does is that when you scroll it moves down a title and fades. It works in chrome and mozilla but it doesn’t work on safari and I can’t figure out why. $(window).scroll(function () { $(“.title”).css(“padding-top”, 1 + ($(window).scrollTop() / 1.5) + “px”); $(“.title”).css(“opacity”, 1 – ($(window).scrollTop() / 400)); }); Source: cross-browser

nested svg ignores transformation in Chrome and Opera [duplicate]

This question already has an answer here: SVG translate seems to behave different in Chrome/Chromium 2 answers I experienced somewhat that I would call a bug. I have the following 2 svg: <svg height=”100%” width=”100%” xmlns:xlink=”http://www.w3.org/1999/xlink” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” id=”SvgjsSvg1004″> <defs id=”SvgjsDefs1005″></defs> <g transform=”matrix(2,0,0,2,50,50)” id=”SvgjsG1011″> <rect height=”50″ width=”50″ id=”SvgjsRect1012″></rect> </g> </svg> <svg height=”100%” width=”100%” xmlns:xlink=”http://www.w3.org/1999/xlink” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” id=”SvgjsSvg1004″> <defs id=”SvgjsDefs1005″></defs> <svg…
Read more

Cross-platform/browser .tiff web viewer

I’m trying to find a browser plugin or something like that to view/rotate/zoom/etc. multiple paged .tiff files. My requirements are that it must be cross-platform (Windows, Linux, …) and cross-browser (Chrome, Firefox, IE, …). The closest related topic I could find was this one, and almost everywhere points to AlternaTIFF, but it doesn’t work in Linux. Where can I find…
Read more

html link "media" attribute (ie8)

This question is strictly related to IE8, I understand CSS3 @media queries. Looking to switch a stylesheet based off the browser width, my code as is follows: <link rel=”stylesheet” type=”text/css” href=”small.css” media=”screen and (min-width: 1000px)”> <link rel=”stylesheet” type=”text/css” href=”large.css” media=”screen and (min-width: 1200px)”> (For simplicity/clarity – the stylesheets just change the color of a box) Now the above code work…
Read more

clipPath circle not inheriting the correct position in Firefox

I’m using a circular clip path for my nodes (in d3.js) as follows: <g class=”node” id=”140″ transform=”translate(392.3261241288836,64.3699106556645)”> <image class=”mainImage” xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”images/manual-story-140.jpg” width=”100″ height=”116.66705555685185″ x=”-50″ y=”-50″ clip-path=”url(#140)”> </image> <clipPath class=”clipPath” id=”140″> <circle class=”clipPathCircle” stroke-width=”1″ r=”42″></circle> </clipPath> <circle class=”outlinecircle” stroke=”#0099FF” fill=”url(#myLinearGradient1)” stroke-width=”3″ r=”42″></circle> </g> But in Firefox the images don’t load because the circle element within the clipPath element doesn’t inherit the…
Read more