There is a page that uses PHP to fetch search results from Google Search API and then it puts the results on the page some funny way in a circle. The code may look crappy but seems that it works more or less fine in Firefox. When you enter a search query and click submit button or Next/Previous links, it fills the wheel with results. The problem is its work in IE. It works there very slowly and then it doesn't clear the wheel before filling in new data, but puts it over that. My friend asked me to help him with this code. Please give me a piece of advice how I can fix it. Thanks so much!
Raphael runs very slowly under IE documented here.
As I understand it, VML itself in IE is fast enough, but the Raphael layer has some inefficiency.
I see you're using Raphael.js, which renders vector in VML/SVG (depending on browser). IE8 has degraded support for VML, unfortunately, and I hear it's also quite a bit slower than IE7. BTW, in IE7 it's kinda funny looking.
In terms of Raphael, it may be something as simple as resetting some context, I'm not sure. I've looked at Raphael before, but never used it.
Related
I'm working on deploying web push for notifications. Everything is working great, but I've come to understand that some browsers do not support Notification.image, or at least do not display said image. However, they all do seem to support Notification.icon, and Firefox actually uses Notification.icon to display an image in their rich push example.
I would ideally like to use Notification.image when supported, but fallback to Notification.icon when not. However, it's not so simple as just supplying an image for both, as then on browsers that do support displaying Notification.image, you'll get it twice.
I'm wondering if anyone knows of a way to detect support. Unfortunately, even browsers that don't support display still know that Notification.image is a thing that exists, so basic feature detection is out. I'd also like to avoid UA detection if at all possible, as keeping up with supported UAs would likely be a nightmare. Anyone know of anything I'm missing, or how have you handled this in your own experience?
Okay. Well, now I feel stupid. Ah well, that's how we learn. Turns out, you can feature detect. I made an assumption that since Notification.image was in MDN, that Firefox at least would know about it, even though it is one of the browsers in particular that does not support displaying it. Then, I came across this actually very helpful site, and noticed that the buttons were greyed out if the particular section is not supported in your browser. The "Image" button was greyed out, so there must be a way to detect support, and after digging in the site's source, I face-palmed:
'image' in Notification.prototype
So, yes, it really is that simple. At least this might help someone else find the answer quicker.
Folks -
Longtime lurker, first time poster. I've found many answers here in the past, and have always appreciated the expertise. I'm a bit of a noob, so bear with me:
I have a landing page. It displays well in Chrome, Firefox, Safari, and older versions of IE. All of the above include the the Google ReCaptcha - no issues, widgets work, etc.
IE 11 turns this to mush. My graphic fails to load, and it seems the recaptcha moves itself to the full width of the page instead of the small part I've intended.
Oddly enough, if I grab the sides of the browser window and adjust the width in any way (wider or narrower) the image snaps in where it should be, and the page looks perfect. Likewise, if I inspect the element, the page loads exactly as intended.
This seems like it should mean something to me, but my knowledge is too limited to get exactly what I'm being told. Can anyone shed some light on this for me?
I can furnish source code and screenshots if that's required.
Regards, Cheers, and thanks for any thoughts -
CDM
#Romulo helped me tremendously with this issue. The entire page was being loaded by a script, and there were errors within the script itself that needed correcting. The solution required a style block to be moved, which solved the issue. This was probably a once-in-a-lifetime issue, but if you find this page and think this might be what you're dealing with, feel free to message me and I'll be happy to discuss further.
I am doing some pre-production on a project that requires drawing on a 3d canvas, which I think flash is the best way to go. But there is a chance down the line that this client might want the site to show up on the ipad, iphone or other mobile devices that don't support flash.
So I was playing with the idea of doing everything in html and javascript except for the actual drawing/3D area. Almost like using flash as the element. I think html5 is too premature to start using this, but might be beneficial down the line. Chances are I will just go the entire flash route, but I thought it would be interesting to try.
Anyway, my question is pretty top level. 1) how hard would it be to drag an object from an html page using javascript, and dropping it into the flashplayer. And then manipulating it from there.
Are there any examples out there that have tried to do this?
Communication between Flash and an HTML page requires the use of ExternalInterface. That's a good place to start. These guys seem to have figured out some of the details.
As far as the iPad and iPhone are concerned, Flash just ain't gonna happen.
However, I don't think it's fair to say HTML5 is "too premature". Lots of people are doing lots of cool things with the canvas element. You could too. :)
I'm looking for examples of processing.js working in Internet Explorer via ExplorerCanvas or similar.
It can be done! There are some gotchas, however. The page htxt links to is fine, as far as it goes, but please note the following:
1) Both script and canvas elements must have id attributes. The init function uses these attribute id's to associate a given script with a given canvas. I found the simplified init function easier to understand than the official one. You will want to master the official one if you have multiple canvases on one page.
2) If you use internet-style color designations, like #23ff9a, watch out! IE 8 wants all upper case hexadecimal color numbers from Processing.js/canvas. Write #23FF9A! This is what the documentation shows, so it shouldn't be a complete surprise. The error is a sometime thing, which makes it crazy to figure out. Mostly, larger numbers (for lighter colors) with lots of f's seem to be afflicted. White, #ffffff, is OK, but #ff00ff is not. Firefox and Safari are case-insensitive in this regard. The documentation says you can use an alternate hex notation with alpha channel (the CC) that looks like 0xCC006699. This didn't work for me; maybe it's on the to-do list.
3) The .equals() method on strings is missing! Andor Salga, one of the Seneca College crew working on Processing.js, wrote a simple boolean stringsEqual(str1, str2) function you can see here. This will do until the matter is definitively fixed.
4) It's not true that stroke() doesn't work with excanvas.js. It does. However, if your Processing.js code has even one little syntax error (I can't really categorize which kinds, but trying to use .equals() will do it) your routine will probably fail silently in IE8, whereas, in Safari or Firefox, your rectangles may lose their outlines, i.e. stroke() will quit working. IE on Vista, and Safari on the Mac, have both exhibited stronger syntax checking than Safari or Firefox on Vista, which will blow by certain errors and render a defective graphic.
5) Text, invoked using the text() function, renders in Firefox (in an unchangeable font of Firefox's choosing), but, as far as I can tell, not in IE8 or Safari. The Glyph Method is suggested here. The code is in place, but getting the fonts looks like a problem. Inkscape looks pretty impenetrable to me. As far as I can tell, what is needed is a lot like old pen-plotter fonts - a vector path with pen-up and pen-down commands between runs of nodes. Turns out FSF/GNU has some that might be massaged into the right format without too much trouble. I don't know where the format is defined, but it's probably over at W3C somewhere. The approach with real potential for presentable fonts is the IE/VML wing of Cufon. See How does it work? I really want this last link in the chain, but I could use some help.
Processing.js is one whale of a project that deserves our support. It has enormous potential. I would encourage you to pitch in if you are able.
The sparklines example on the processing.js exhibition page uses ExplorerCanvas. It seems like it's just a drop-in solution, no extra coding necessary.
This page describes how to get processing.js + excanvas working together.
It basically involves writing your own onload init method that IE can understand.
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.