FAQ Database Discussion Community


HTML : behavior when more than one option is selected

html,cross-browser
In this simple jsfiddle (code below), I have a regular <select>, not a <select multiple>, with two options having the selected attribute. In Chrome 39, I see "d" selected. Apparently the behavior is to select the last of the "selected" options, which seems logical. Is this a behavior I can...

Show datalist labels but submit the actual value

javascript,html,html5,cross-browser,html-datalist
Currently the HTML5 <datalist> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input. However, there seem to be some discrepancies between the implementation of the value attribute and the inner text on the <option>. For example: <input list="answers"...

Detect browser close event

javascript,browser,cross-browser,onbeforeunload
I want to capture the browser window/tab close event. I have tried the following But not working: <script type="text/javascript"> window.onbeforeunload = function(){ myUnloadEvent(); } function myUnloadEvent() { alert ('Calling some alert messages here'); } </script> <body> Body of the page goes here. </body> Tried these links also but no more...

Need consistent Bootstrap form inputs across browsers

css3,twitter-bootstrap-3,cross-browser
I have a grid of input fields on my form. Bootstrap is naturally adding a bit of horizontal space between the fields in Firefox, which is how I want the form to look, but the fields are getting jammed together in Chrome. In the Firefox image above, I have highlighted...

Web api Cross domain doesn't work

javascript,security,asp.net-web-api,cross-browser
Well, the title is really bad, Well. i have a web api2 runing on visual studio 2013 premium. on this Host: http://localhost:59040/ and the cross domain policy is to not allow anything. but when i run this java script : $.post( "http://localhost:59040/api/Email/SendEmails", { 'G': "aa94a7cf-7794-41ff-b8d0-fcfe34fcb19c" }, // put your parameters...

“Object doesn't support this property or method” when setting an object property in IE8

javascript,internet-explorer,cross-browser
I'm trying to make draggable elements without using jQuery. I'd like it to be compatible with IE8. The following breaks at this.handle = { with the error, "Object doesn't support this property or method." Does IE9< have some goofy hang-up when it comes to setting object properties? var Draggable =...

What's wrong with the image?

image,cross-browser,jpeg
I got a image: http://images.tyler.lu/iphone-4s-a.jpg It looks different in different browsers. Chrome IE What's wrong with the image?...

Site is showing differently in browsers [closed]

jquery,html,css,cross-browser
I have a project where we are to create a portfolio of our work. But there is the problem: If you look at my site, and press the link "About", the bottom of the tab that shows up. It behaves differently in Chrome than in IE and Firefox. In IE...

Popup on mouseover event in Kango browser extension development

javascript,jquery,cross-browser,content-script,kango-framework
I am developing a browser extension using Kango Extension Framework By Using Content-scripts i have injected some code into the page like shown below <span onmouseover= "hello('testing_name')" style='width:17%;padding: 3px; background-color: red; color: white; /> I have the hello(str) function definition in the same content-script only, which is like below function...

Polymer - Getting content to appear in non-Chrome browsers

html,google-chrome,browser,cross-browser,polymer
I am using Polymer in a website that I am developing, and have had consistent results when developing in Google Chrome. However, when I test the content in other browsers (IE11, FireFox 32, Chrome on Android), I only see a blank screen or, occasionally, plain content without formatting. According to...

Jquery Cross-Browser Scroll Event Issues

jquery,scroll,cross-browser
I have a jquery function that animates items when the user scrolls past them. One of my items "stops" the user and prevents natural scrolling from occuring. Instead, it turns the natural scrolling into the progress bar of the item, downward scrolling bring the item to 100% completion, and then...

Firefox hides tables with no content and no set height

html,css,firefox,cross-browser,css-tables
I have an empty table or div with display:table: If I now add a border to the table - even though there is no content - I would expect to see the border. In Chrome and IE there is a border. In Firefox - the border takes up space, but...

flexbox cross browser issues chrome displays correctly firefox does not [duplicate]

cross-browser,flexbox
This question already has an answer here: How can I get FF 33.x Flexbox behavior in FF 34.x? 1 answer Trying to debug flexbox cross browser issues. I have a basic holy grail layout with scrollable content with fixed headers and a off-canvas left nav. The layout displays correctly...

Floated divs not clearing as expected in IE

html,css,cross-browser
I have encountered a rather pesky bug which only seems to happen with Internet Explorer. I have created a jsFiddle to illustrate my frustration. <div class="container" style="width: 802px;"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> The 4th block does not clear to the left even though the top...

How to properly deal with Silverlight deprecation?

javascript,google-chrome,silverlight,cross-browser,npapi
Recently, Chrome deprecated NPAPI support, so that means no Silverlight. Now, I've learned to be a good web developer and prefer feature detection over browser detection to deliver a good user experience. Unfortunately, it seems impossible to do NPAPI support feature detection properly. I've built a JavaScript replacement for our...

Supporting most common video formats cross browser [closed]

php,jquery,html,html5,cross-browser
I am building an application where users can upload videos and its important to give them the flexibility of uploading most common video formats like .mov, .mp4. But I realised that browsers mostly don't support .mov and I tried many jQuery plugins that could help like JPlayer, LeanBack player but...

CSS: Dropdown option text color not working on Mac OS X

html,css,osx,cross-browser
I want to set the color of the dropdown options text with value 1 to red. My HTML dropdown: <select name="ctl00$MainContent$TelephoneDD" id="MainContent_TelephoneDD" class="form-control"> <option value="">Select</option> <option value="1">33534543534</option> <option value="1">78678678678</option> <option value="0">99923444445</option> </select> CSS: #MainContent_TelephoneDD option[value="1"] { color: red; } This works in most of the browsers except in Chrome and...

Indenting text on html select tag

css,css3,cross-browser,styles
I have a select tag which I am trying to give some style. <select class="points-selection" ng-options="line as line.pick for line in slip.lines"> </select> then I have this .points-selection { background-color: get-color(nieve); border: 0; border-radius: get-space(xxx-small); color: get-color(night); cursor: pointer; margin-top: get-space(xxx-small) + 1.5; padding: get-space(xxx-small); text-indent: 32.5%; width: 100%; }...

My Javascript only works in Chrome

javascript,ruby-on-rails,google-chrome,cross-browser
I have javascript in a Rails project that only runs in Chrome. I've tested it in Firefox and IE and I get nothing. Am I overlooking something simple? <script> $(function() { $("#edit").on("click", function() { $("body").animate({"scrollTop": window.scrollY+130}, 1000); return false; }), $("#edit-on-two").on("click", function() { $("body").animate({"scrollTop": window.scrollY+130}, 1000); return false; }); })...

Piece of Javascript code causing unpredictable crashes in browsers

javascript,crash,cross-browser
There is some code a co-worker implemented a while back on a dev environment that we never got to test and implement into production, but now we are wanting to. Testing out the code I have no issues when using Chrome v43, or Firefox v37 on Ubuntu 12.04, however some...

CSS Works in Chrome but not Firefox [closed]

html,css,cross-browser
I've been working on a school project and i've made this layout quickly and I have no idea why this layout works perfectly on Chrome but crashes completly in Firefox! Does anybody have an idea what it could be? Here is the site: www.demo.filipsukic.com...

Safari 8 not for windows?

safari,cross-browser,indexeddb,pouchdb
I'm trying to execute my program cross-browser and I found that Apple's Safari for windows ends with version 5.1.7! But when I searched all over the internet to acquire Safari 8, I found that they had no support for windows. I very badly want Safari 8 for windows since it...

Browser compatibility of Polymer

cross-browser,polymer,compatibility,polymer-1.0
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"></link> <link rel="import" href="bower_components/iron-icons/iron-icons.html"> <title>Polymer...

What do browser do when a font weight is unavailable

css,fonts,cross-browser,webfonts,weight
If I load a google font that comes with 400 and 700 weights, but in my CSS I use font-weight:550; what does the browser do ?

Flexbox column heights

css,cross-browser,flexbox
I have this site: http://kudos-topspindigital.azurewebsites.net/#/netball If you open this in Chrome and IE you will see my issue. Basically in chrome, the right panels are around equal heights. I would like the bottom panels (the orange and dark gray one) to be twice as height as the top light gray...

get id of clicked button javascript

javascript,cross-browser,addeventlistener
I'm attempting to simply get the id of a clicked button and use alert to display it. The code below trys to addEventListener, if not falls back to attachEvent. To get the ID, Im trying to pass this.id as a parameter to myFunction. but this is not working. I've seen...

Cross-browser addevent function javascript

javascript,cross-browser,addeventlistener
I'm trying to create a function that adds an event to each button in a class. I have all of the buttons in an array and wanted to use Dustin Diaz's addevent() cross browser solution, but am unsure how to implement it. I'm used to using frameworks for this sort...

How to upload file with Selenium on Equafy

testing,selenium,cross-browser,web-deployment,web-testing
I've created a test on equafy.com platform and I need to upload a file using Selenuim. In my case the file is png image, but I cannot find a way to upload any type of file.

How to clear Firefox' console via javascript?

javascript,firefox,cross-browser
I have some functions that when executed show some info with console.log(). There is no problem with that. But, some times, the console looks strange... Because that, they sent me to clear the console when pressing 'l' (letter 'L' in lowercase). I took it as a simple task, I just...

local AJAX-call to remote site works in Safari but not in other browsers

javascript,jquery,ajax,cross-browser,cross-domain
I am maintaining a website that uses Javascript. The script uses jQuery and loads some content from the server at which the site is normally hosted. Just for convenience while maintaining the site, I run a local copy of the site on my iMac. This works perfectly fine when I...

Different text align behavior for firefox

html,css,cross-browser
It just a simple as body{ padding:0; margin:0; } <div style="font-size:34pt;">BRIDGES YEAH</div> Safari and Chrome are ok. But what wrong with a Firefox ? Is it different default value for something or what ?...

document.body.scrollTop Firefox returns 0 : ONLY JS

javascript,firefox,cross-browser
Any alternatives in pure javascript? The following works in opera, chrome and safari. Have not tested yet on explorer: http://monkey-me.herokuapp.com https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js At page load should scroll down to div '.content': var destiny = document.getElementsByClassName('content'); var destinyY = destiny[0].offsetTop; scrollTo(document.body, destinyY, 200); function scrollTo(element, to, duration) { if (duration <= 0)...

a href tag is not working in internet explorer

html,css,cross-browser,href,internet-explorer-11
I am creating a button using a href tag in my page which is working fine in chrome. but it is not at all working in internet explorer the code for the button is <td class='swMntTopMenu' style="text-align:right"> <button style="background-color:rgb(255,213,32)"> <a href ='list.php' style="text-decoration:none !important;"> <div class="link"> Back </div> </a> </td>...

Window.showModalDialog Replacement

javascript,asp.net,google-chrome,debugging,cross-browser
My project was totally involved in asp.net, We are working on browser compatibility issues, window.showModalDialog is not working in chrome please help me with any replacement, other than window.open ...

Proper try of Cesium creation, error catching, cross browser compatibility and developer errors

javascript,mobile,error-handling,cross-browser,cesium
I am currently working on a GIS project hat has to be cross browser, mobile, multiplatform and omnipotent. Cesium does not work without WebGL, on some older browser and other minor exceptions, but i have to catch them all. I decided to swich to OpenLayers when Cesium can't be an...

Firefox and IE9 different handling of scrollbars when overflow:auto

html,css,cross-browser,scrollbar,overflow
Hope you can help me. I am wanting my div with max-height and overflow:auto to render the scrollbars inside the element div { overflow:auto; max-height:700px; } Firefox and Chrome are, as desired, putting the vertical scrollbar inside the overflowing div, however IE9 is putting the scrollbar outside of the div....

AJAX Request returning No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin

jquery,ajax,cross-browser
How can I append the stock price and other information returned to the Div? Here is the code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> function getResults(){ alert(); $.get( "http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL", function( data ) { document.getElementById("myDiv").innerHTML = data; alert( "Load was performed." ); }); } </script> <head></head> <body> <h2>Click here to start</h2> <button type="button"...

Custom Validation on HTML Number Input Misbehaving

javascript,html,dojo,cross-browser
In putting together a small webapp, I'm trying to ensure that end users are unable to place invalid characters in a number field that can hold signed floats. I'm using Dojo to search on an applied CSS class (in this case, ogInputNumber) and set events on input, keyup, and blur....

CSS dropdown menu cross-browser

html,css,drop-down-menu,cross-browser
My CSS dropdown menu behaves strange in different browsers. It works fine in Chrome (Windows) but there are issues in Firefox and on Android. Firefox: Dropdown menu opens up to the right of the menu item instead of below. Also, the dropdown menu is not in line with the menu...

why innerHTML doesn't reflect changes made in an html form

javascript,html,cross-browser
this is a part of my html file: <form id="foo"> <select> <option value="1" selected>1</option> <option value="2">2</option> </select> </form> Now when I use the following javascript code, it gives me the exact content of the form: alert(getElementById("foo").innerHTML); However, after I change my options withing the form, the above code still returns...

Firefox svg rendering: how to get real g position?

javascript,css,svg,cross-browser
I have a page with a svg loaded via object. Then, I call a function that loads a div, using width, height, left and top of an internal g element var cartina = document.getElementById(whatMap); var cartinaContext; cartina.addEventListener("load",function(){ cartinaContext = cartina.contentDocument; var el = $("#mappaBase", cartinaContext)[0]; var rect = el.getBoundingClientRect(); var...

img tag width height issue in firefox

html,css,image,cross-browser
I have more img tag in my HTML code like below code, <div id="container" > <div> <img alt="Image1" id="Image1" src="" width="130px" height="90px" class="img"> <input type="file" id="files1" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> <br> <br> <img alt="Image2" id="Image2" src="" width="130px" height="90px" class="img"> <input type="file" id="files2" class="fileUpload" name="files1[]" style="display:none" value="Select Image"> <br> <br>...

website not working on Internet Explorer

internet-explorer,browser,cross-browser,hover
I have a vertical menu in a side bar with a hover over submenu however in IE the hover menu decides to appear in the middle of the page. I'm using IE11 so it doesnt support the IE only css. I'm not sure what has cause the problem..here is a...

How to run javascript function in web browser only when is not proccesing that function

javascript,performance,cross-browser
One of my javascript function is processing millions of data and it is called ~1 time every second from a hardware event. Then the web browser is idle in that function processing. I tried to set a flag for running (or not running) that function: if (!is_calculating) is_calculating = true;...

Eliminating Javascript daylight saving time gap, a cross-browser solution

javascript,date,cross-browser,timezone,dst
After lots of hassle I finally found the actual problem. It's the gap induced by daylight saving and the fact that different browsers act differently if timezone is set on UTC+3:30 (I'm not sure of other timezones). Here's a snippet to generate the problem (the problem is reproducible if your...

$(window).resize() in safari : why it works also if scroll window (but doesn't resize)?

javascript,jquery,html,cross-browser,mobile-safari
i noticed, with safari on my iphone5 that $(window).resize() it works strangely... i have this code: $(document).ready(function () { $(window).resize(function() { avviaChart(); initialize(); if($('#time').is(':checked')){ $("#time").removeAttr('checked'); $("#Time").css('border','2px solid #ffffff'); } }); }); this code should work only when sizes of window change.... with other browser work very good, but with safari...

Footer not 100% bottom crossbrowser

html,css,cross-browser,fullscreen,footer
This is my first question here, so bare in mind that we may have some issues with code. But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom. URL...

Regular expression to find all string literals

javascript,regex,cross-browser,string-literals
I'm writing a regular expression using javascript that is intended to capture string literals in javascript code in all the permutations that are allowed in javascript. This is what I've come up with: ([\"\'])(.*?(?:(\\"|\\').*?\3.*?)*?)\1 Description: The regular expression captures the starting quotation mark (" or ') in capture group 1...

Why Compatibility mode only in IE not in other browsers?

html,internet-explorer,cross-browser,compatibility
When i am checking my code with the developer tools (F12), I have seen the option Compatibility view only in IE browsers. Why don't other browsers have this compatibility view mode? I am confused about this. Can you guys clarify, is there any specific reason for this?...

making my html site compatible

html,css,cross-browser
Following code will show html file that i want to make compatible {% load staticfiles %} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>*****</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'bootstrap/css/dashboard.css' %}" rel="stylesheet">...

Why is position of html button in tablecell different in Firefox

html,css,firefox,cross-browser
Why is the position of a button element different in Firefox vs Chrome/IE when nested inside a li with display: table-cell? In Chrome and IE the button is aligned to the top of the cell while in Firefox it is aligned to the bottom. Can this be influenced in Firefox...

browser local storage, tied to the domain AND that only live as long as the browser window

html5,browser,cross-browser
Does browser local storage with the following characteristics exists : lives only as long as the browser window is tied to the domain (JS code from other domains cannot access it), OR is erased when the page reloads with a URL from another domain is stored only in RAM (not...

IBM claims “Firefox does not send JSON POST requests correctly” Is this true?

json,firefox,post,cross-browser
I've been working through an issue with Webseal, and I came across this statement which caught my interest. The statement was: Firefox does not send JSON POST requests correctly My assumption was that all three major browsers (Chrome, Firefox, IE) for the latest versions posted JSON in an identical fashion....

Chrome and Opera refuse to transition from flex: 0 to flex: 1

html,css,css3,cross-browser,blink
Chrome and Opera absolutely refuse to animate the transition between flex: 0 and flex: 1, which works fine in Firefox. On top of it, some Safari users report that it working, but with my Safari it fails to even change the slides. Plus it doesn't work with IE at all....

Mozilla Firefox input radio button styling and default settings

css,forms,firefox,cross-browser
I have various form elements on my page, but am having an issue with input radio buttons in Firefox. The radio buttons display perfectly in Safari and Chrome, but are entirely different in Firefox (circular instead of square!) and are :checked by default, which is also an issue. From my...

How make flexible blocks without flexbox for old IE

css3,cross-browser,internet-explorer-9,flexbox
There is a question about simple form, with input and button, Цe need a block filled 100% of the available space inside the box in which there may be other elements, without their wraps. This is easily done with the flexbox, but it does not support IE 8-9. Please help...

Object doesn't support property or method 'querySelectorAll' (sp.core.debug.js)

javascript,jquery,internet-explorer,sharepoint,cross-browser
First of all I want to tell I am new in SharePoint. I have developed a public website in SharePoint 2013. When I open my site in IE 7, following exceptions occurs in sp.core.debug.js Object doesn't support property or method 'querySelectorAll' Object doesn't support property or method 'querySelector' and sp.core.debug.js...

CSS3 circular movement doesn't work in chrome with @-webkit-keyframes, and works with @keyframes in Firefox

css,css3,cross-browser
Here is the circle which is NOT animated by orbit in Chrome. http://jsfiddle.net/ztkav838/ //CSS @-webkit-keyframes orbit { from{transform:rotate(360deg) translateX(150px) rotate(-360deg);} to{transform:rotate(0deg) translateX(150px) rotate(0deg);} } .round_btn { position: absolute; left: 50%; top: 50%; border-style: solid; border-color: #000000; border-radius:50% !important; margin-left:-15px; margin-top:-15px; width:30px !important; height:30px !important; } .satellite { animation:orbit 16s linear...

Chrome CSS border issue

css,google-chrome,cross-browser
I've found some very strange behaviour with Chrome with respect to the following CSS... CSS: table.addressBody { width: 100%; min-width: 100%; } table.addressBody tr td { padding: 4px; width: 40%; min-width: 40%; max-width: 40%; border: none; vertical-align: middle; } table.addressBody tr td.left, table.addressBody tr td.right { background-color: White; border: 2px...

Different “return null” results in Chrome and Firefox

javascript,google-chrome,firefox,cross-browser
Given the following code: jQuery(document).ready(function($) { $('[name="clickableTD"]').click(function() { window.document.location = $(this).attr("href"); }); }); function Add(id) { var stock = "2"; var quantity = prompt("SELECT QUANTITY:", 1); if (quantity == null) { return null; } else if (quantity <= stock) { alert("Good"); } else if (quantity > stock) { alert("Over"); }...

How to remove default arrow form