EzDevInfo.com

Unsafe JavaScript attempt to access frame with URL

I am getting the below error when i try to set a hash value to the parent url from iframe which contains another domain url:

Unsafe JavaScript attempt to access frame with URL "URL1" from frame with URL "URL2". Domains, protocols and ports must match.

How can I fix this problem?

Hiding textarea resize handle in Safari

I'm using textarea components in my application, and I control their height dynamically. As the user types, the height is increased whenever there is enough text. This works fine on IE, Firefox, and Safari.

However, in Safari, there is a "handle" tool in the lower right that allows user to resize the textarea by clicking and dragging. I also noticed this issue with the textarea in the stackoverflow Ask a Question page. This tool is confusing and basically gets in the way.

So, is there anyway to hide this resize handle?

(I'm not sure if "handle" is the right word, but I cannot think of a better term.)

WebKit issues with event.layerX and event.layerY

I just noticed that I get tons of deprecated warnings in the latest (canary) build of Chrome.

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Looks like jQuery is screwing thing up.

I'm using: jquery-1.6.1.min.js.

Would it help to upgrade to the latest jQuery version or isn't it fixed yet or is it a Chrome bug or is it something else.

PS

I cannot show you code because I think it's a general error, but I suspect the warnings get thrown when I try to access a jQuery object or when jQuery tries to access the layerX / layerY (well I'm pretty sure that's the case considering the error :P).

jQuery probably copies those properties into the jQuery object.

So...

What's going on?

EDIT

jQuery 1.7 is out and fixes this issue.

Read more at their blog, here.

Submitting a form on 'Enter' with jQuery?

I have a bog-standard login form - an email text field, a password field and a submit button on an AIR project that's using HTML/jQuery. When I hit Enter on the form, the entire form's contents vanish, but the form isn't submitted. Does anyone know if this is a Webkit issue (Adobe AIR uses Webkit for HTML), or if I've bunged things up?

I tried:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

But that neither stopped the clearing behavior, or submitted the form. There's no action associated with the form - could that be the issue? Can I put a javascript function in the action?

How to remove the border highlight on an input text element

When an html element is 'focused' (currently selected/tabbed in to), many browsers (at least Safari and Chrome) will put a blue border around it.

For the layout I am working on, this is distracting and does not look right.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

FireFox does not seem to do this, or at least, will let me control it with

border: x;

If someone can tell me how IE performs, I would be curious.

But getting Safari to remove this little bit of flare would be nice.

Thanks

Get real image width and height with JavaScript in Safari/Chrome?

I am creating a jQuery plugin.

How do I get real image width and height with Javascript in Safari?

Following works with Firefox 3, IE7 and Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

But in Webkit browsers like Safari and Google Chrome values are 0...

Doing this on server side is not an option.

How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

This works fine with the latest versions of FF, Opera and IE, but fails on the latest versions of Chrome and Safari.

It affects two descendants, which happen to be siblings. The first sibling updates, but the second doesn’t. A child of the second element also has focus and contains the <a> tag that contains the above code in an onclick attribute.

In the Chrome “Developer Tools” window if I nudge (e.g. uncheck & check) any attribute of any element, the second sibling updates to the correct style.

Is there a workaround to easily and programmatically “nudge” WebKit into doing the right thing?

Disable webkit's spin buttons on input type="number"?

I have a site which is primarily for mobile users but desktop too.

On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.

In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.

Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.

How can I debug javascript on Android?

I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.

How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?

Detect rotation of Android phone in the browser with javascript

I know that in Safari on an iPhone you can detect the screen's orientation and change of orientation by listening for the onorientationchange event and querying window.orientation for the angle.

Is this possible in the browser on Android phones?

To be clear, I am asking whether the rotation of an Android device can be detected by JavaScript running on a standard web page. It is possible on an iPhone and I wondered whether it could be done for Android phones.

Custom CSS Scrollbar for Firefox

I want to custom-style a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

::-webkit-scrollbar {
width: 15px;
height: 15px;
}


::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

How can I do the same thing for Firefox?

(I know I can easily do it using jQuery, but I would prefer to do it with CSS if it's doable.)

Would be grateful for somebody's expert advice!

CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.

What am I doing wrong?

EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. It's bloated enough with all the vendor prefixes. Also expanded the example code.

Convert Data URI to File then append to FormData

I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.

The issue is that while canvas has the toDataURL function to return a representation of the image file, the FormData object only accepts File or Blob objects from the File API.

The Mozilla solution used the following Firefox-only function on canvas:

var file = canvas.mozGetAsFile("foo.png");

...which isn't available on WebKit browsers. The best solution I could think of is to find some way to convert a Data URI into a File object, which I thought might be part of the File API, but I can't for the life of me find something to do that.

Is it possible? If not, any alternatives?

Thanks.

JavaScript: Is there a way to get Chrome to break on all errors?

I am looking for an equivalent in Chrome to the "break on all errors" functionality of Firebug. In the Scripts tab, Chrome has a "pause on all exceptions", but this is not quite the same as breaking on all errors.

For instance, when loading a page with the following code, I would like Chrome to break on the line foo.bar = 42. Instead, even when enabling the "Pause on all exceptions", I don't get the expected result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript">

            function doError() {
                foo.bar = 42;
            }

            window.onload = function() {
                try {
                    doError();
                } catch (e) {
                    console.log("Error", e);
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

You can try the code pasted above on this page or using this jsFiddle.

What is WebKit and how is it related to CSS?

More recently, I have been seeing questions with the tag "webkit". Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc...

So what is this "webkit" and how does it relate to CSS? I have also noticed a lot of -webkit-... properties in the source code for various websites. Are these two related?

Update

So from the answers so far... WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?

The ultimate question... Is WebKit supported by IE?

Update 2

Thank you for your answers. To follow up on what I have learned so far, all of the major browsers use different rendering engines. I guess this is a big reason why there are so many cross-browser compatibility issues!

So, is there some kind of project or movement to a standard rendering engine that ALL browsers will use? Will HTML5 bring an end to the cross-browser compatibility issues?

Thanks!

Thank you everyone for taking the time to answer my questions. I learned a lot from this short discussion, and there is a lot that I need to read over to catch up on what I've missed out on recently... apparently IE9 is about to be released (beta)... time to read up on these rendering engines :)