We Keep Coding

Drawing in canvas not working in iframe when in firefox

Hello I am trying to make a simulation of a ruler measuring a desk. The mousemove event works when I open the simulation alone but not when I open it in an iframe like here. The iframe works when opened with Chrome or Opera but not with Firefox. It also works with Edge after I press F12. Please help I am just a teacher not a developer and browser compatibility is far beyond my understanding.
Update: After the answer of murphy1312 I also noticed that my problem is also because the iframe is in a hidden tab that loads initially with display:none. Is there something I can do in the iframe document without changing anything in the parent page?

Resize the browser's width using JQuery

I'm looking for a way to resize the Chrome browser's width with a button. Preferentially using JQuery. My goal is to show the mobile version of the website to desktop users.
I know I can do this by just resizing the BODY tag (which is definitely easier) but I got curious.
I haven't found reliable answers to this question and sorry if it has already been asked.
Other ideas are always welcome.
Thanks. :)

Recent browsers (since FF7) aren't going to support window.resizeTo(x,y) unless it's a window you created that doesn't have any other tabs. This is to prevent abusive website code.
Check the notes on this MDN Window.resizeTo() help:
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
Like you mentioned, you can launch a new window with a specified size to preview a mobile experience. Alternatively, you could create an IFrame with a specified size:
<iframe src="/mobile" width="200" height="200">

As Pranspach mentioned you can't resize the actual chrome window, but if your site is responsive on resize you could wrap the whole site in a wrapper div and shrink that instead of body.

Have scrollbar scrolled to the bottom without using Javascript?

I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?

You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.

There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.

How to properly display iFrame in Opera Mobile

I have an iframe on my pages which is properly displayed almost on all browsers. But not in Opera Mobile. How to optimize html code to properly display my iframes on Opera Mobile too?
Thank you

Opera mobile and tablet seem to render iframes at the full size of their content (which prevents overflow scrolling). This is similar if not identical to the way iOS 5 handles iframes. You may need to allow the whole page to scroll rather than relying on the iframe to contain content in the window.

Prevent selection being greyed out in iframe in Firefox without using contenteditable

In Firefox 3 and later (and probably older versions), selecting content within an iframe always seems to use the grey selection background colour used for a document that doesn't currently have focus, even if the iframe does have focus. The only exception I have been able to find is when the content within the iframe is editable. This is not the case in other browsers. Here's an example illustrating this:
http://jsfiddle.net/97Vjz/
This unfortunately prevents styling the selection within an iframe using the ::-moz-selection CSS pseudo-element because it only applies to non-grey selections:
http://jsfiddle.net/YYXSY/1/
My question is: is it possible to prevent an iframe's selection being grey in Firefox without using contenteditable / designMode?
UPDATE
This only seems to happen on dynamically written iframes: using a separate file and the src attribute solves the problem. However, I do need it to work with dynamically written iframes.

I just tried to reproduce the problem with a "real" page as iframe content and then it works like you want: blue colored selection! (FF 5.0)
see: http://jsfiddle.net/97Vjz/8/
It seems only generated content has this problem, so you could make a page (php/asp(x)) that generates the content for you to circumvent the problem.
Another solution to use javascript generated content is to load it with src="javascript:'<html />'" (actually this is Tim's own solution from the comments below.)
A simple example script: http://jsfiddle.net/97Vjz/9/
iframe.src='javascript:\'<html><body>' + content + '</body></html>\'';

There is a property of the iframe exposed in Firebug's DOM inspector contentDocument->designMode which is set to false for you iFrames. Forcing it to true through the DOM inspector enables the blue highlight you're after.

Hypothesis: It seems that for dynamically written iFrames, either a XUL Iframe is rendered or the Gecko engine doesn't honor the styles.
Short of submitting a bug, the only workaround I can see is to wrap our contents in a textarea and style it to make it 'invisible': http://jsfiddle.net/mrchief/YYXSY/19/