Adding WYSIWYG to a site that is not your own? - javascript

This website that I use has a WYSIWYG that ONLY works in IE. And I refuse to use IE or to tell my non-tech team to use IE.
I was wondering if there is a user script or browser plugin that would enable anyone to inject a WYSIWYG such as CKeditor.com onto any site textarea?
Edit: I would also be willing to work on it myself if anyone wants to help or give advice. We could then post it on userscripts or something ...

Since you don't have access to the code, anything you do will be a hack.
With that in mind, I would start looking at Greasemonkey. It is a firefox plugin that allows you to inject javascript code into any web page on your machine. Its a long road, but that's probably your first step.
One word of warning however: While I share in your dislike of IE, it sounds like your hatred has grown to the point where it is being counterproductive. Seriously consider whether what you are about to do is worth the effort.

You can use this extension in Firefox as long as you get at least a textarea in that CMS: https://addons.mozilla.org/en-US/firefox/addon/6147/

Would a Firefox extension that displays websites as if they were in IE do the trick?

I like Stargazer712's answer (look into Greasemonkey), but there is another option.
Suck it up and use IE for just this site.
Hey, I hate IE6 and 7 as much as the next Web developer. I advise non-techies to stay away from it, and to use Firefox or Chrome. My answer isn't meant to be flip or funny.
Sometimes, if you need to get the job done, you choose the best tool for the job (even if you don't like using the tool) to get the work done in the most efficient manner possible. In this case, it sounds like using IE to access this particular Web site takes care of the problem without a single line of code or documentation written on your part.
The alternative is spending hours finding (and testing -- because you won't be the only user) an alternative...or worse, spending hours or days developing (and, again, testing) your own code to fix the problem that, at the end of the day, is really only caused by your strong dislike of the one software application that works.

Related

Why and how does firefox reveal its user is in a private mode?

I use firefox and browse a link from this website. It easily detects whether I use private mode and then it blocks me if I am in the private mode.
I searched on stackoverflow.
This answer says it is impossible. But, this website has made it possible.
Another answer suggests
var db = indexedDB.open("test");
db.onerror = function(){alert('Firefox PB enabled')};
db.onsuccess =function(){alert('Not enabled')};
And this method works fine. Although, I am not sure if the mentioned website uses the same technique.
Then, I am wondering about two questions:
1- Is this the only way to detect the private mode in firefox?
2- Why does firefox stab back its users? Is it a part of its design or is it a bug in firefox?
See this bug report. Reading that should answer you second questions. They know the problem, have tried to work on it, but clearly without success up to now. Some developers think it's stupid to make indexedDB (partially) work:
Don't expose the API if every operation is going to fail.
As for your first question. There are other methods, and most browsers seem to be susceptible. Here's an article from February '19: Google wants to make it harder for sites to detect that you’re using Chrome’s Incognito Mode.
I want to add that every website has the right to refuse visitors for whatever reason they see fit. Visiting a website is not a right, it's a privilege. Your link to the joplinglobe.com for instance, doesn't work for me because I am in Europe. This happens on a lot of sites in the USA. The reason is that they want to track users in a way that is not compatible with European law (basically: Tell people what you do, and provide or remove personal data when requested), it is easier for the sites to block access to visitors they don't care about than to spent a day thinking about the privacy of their visitors.

Layout problems in CRM for Outlook

I just realized that what is a nice and working layout of a form with a webresource in on-line version, looses some (but not all) of the formatting when accessed via Outlook. It looks ugly and, I also get errors.
It's somehow related to the JavaScript added to the solution. Or, rather, the web resources, I'd say. Any suggestions on how to debug? F12 doesn't show the console when run from Outlook. I haven't done much with that version so any hint might be of help.
Are you able to narrow down your problem to a part of the script? Could you for instance disable and enable parts of the script(s) to see what works and what does not?
Since the layout is also being influenced, I think you are doing some (or a lot of?) DOM manipulation. This page on MSDN states:
HTML DOM manipulation is not supported
But there should not be that much of a problem (heard that one before...) using Outlook: Dynamics CRM 2011 Outlook client and browser rendering
Edit:
Just to prevent people overlooking the link to a related post from the comments: Random JavaScript Errors in CRM 2011 Outlook Client
Although the page you see in the CRM-Outlook is indeed rendered by IE, it's being served from another version of the engine than what is used to browse. During the rendition process it's "picturized" (lacking a better word for it) so what you see originates in a webpage but isn't one.
I don't think there's a way to debug that version. You can only rely that the development you've tested will work as supposed to. Note that there's no connected process of IE run at the same time as the Outlook client.
I'll gladly stand corrected but as far I've tried (and I've tried a lot, a lot), there's no way to get there.

Narrowing down JavaScript performance issues on a page using a lot of jQuery calls?

My pages seem to be reacting slow.
There is a lot of JavaScript (jQuery) code on the page. How can I narrow it down? What is taking so long?
The YSlow add-on is the best solution to know why your website is slow.
There are many issues which could be the reason for slowness.
Combining many jQuery to one could help you increasing your performance.
Also you can put the script at the bottom of your page and CSS at top.
If you use Firefox, you can install Firebug and use the profiler.
You can read more about it in Understanding Firebug profiler output, and there is a tutorial in Firebug Tutorial – Logging, Profiling and CommandLine (Part I).
If you use Internet Explorer, you can use dynaTrace Ajax edition.
Read more about it in A Step-by-Step Guide to dynaTrace Ajax Edition, available today for public download .
There's also a built-in profiler in Google Chrome that you can play around with.
Both these solutions will help you narrow down what JavaScript function calls are the most costly, and with repeated profilings you will be able to see the effect your changes has.
Using tools like these will not only make you a better programmer (if you take the lessons to heart, and avoid the same mistakes they point out in the future), they will also give you a new appreciation of what happens in your code, since you will get a behind-the-scenes glimpse you haven't seen before ;)
Also, if you don't know YSlow, like Wazzy is talking about - get to know it... maybe your problem isn't even slow JavaScript code :)

What are the chronological steps in building a cross browser compatible site? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 12 years ago.
Improve this question
I am working on my first project that requires me to worry about cross browser compatibility. Since this is my first time doing so, I dont know how to go about completing the project. I am specifically worried about IE. Should I complete my project in a more graceful browser then hack it to work in IE, or should I simultaneously build my program up in both environments?
Design your site to work in standards complaint browsers first. I always start with Firefox, even when developing on my company Intranet (where everyone uses IE). Doing so will let you focus on getting your markup and CSS correct. This is what is most important.
The important thing to note is that you'll want to "future proof" your site, and concentrating on a standards compliant browser will help you do that.
Then, once you're confident your site is looking correct (validators are your friend!), try it out in the versions of IE you want to support. In order to get your layout to look OK in IE, I strongly suggest using different stylesheets for each version of IE, using conditional comments.
Also, you should note that many others have been in the same scenario as yourself, and there is quite a bit of help available. One popular method of forcing IE to behave is the ie-7.js project.
Lastly, be mindful of the top IE bugs, such as:
IE6 Box Model Bug
IE6 transparent PNG images (I have used this fix in the past)
A few tips:
Code to Standards — Start by ensuring that what you've just developed works in Firefox and Chrome, and then verify it in IE. I'll usually then check it out in Safari. It's always better to make sure your markup/code works in a more standards compliant browser first.
Validate Early, Validate Often — You don't want your design to look perfect in one browser, find out that it's broken in another, discover that to fix the broken layout you needed to correct some invalid HTML/CSS, only to find that now the first browser looks wrong.
Progressive enhancement — will be your friend. Start basic, with simple HTML and simple CSS, and no JavaScript whatsoever. Repeat tips #1 and #2, then move on to more complex styles and layout. Contiue this iterative process until you are happy with the design in all browsers. Only then should you consider JavaScript to polish the site.
Check each browser often — Don't develop the entire website in a single, compliant browser like Firefox, and then decide to "see what's broken" in IE. If you've got a complex, dynamic website, there could be MANY problems in Internet Explorer. Trying to decipher each one when they are compounding on each other is a nightmare.
Reset Stylesheet — As #Eir mentioned in the comments, find a good reset stylesheet. Although, they have fallen out of favor for some people, I find putting every browser on the same footing from the start helps tremendously.
Use a Framework — I find CSS Frameworks to be excessive, but some people swear by them, so to each his own. On the other hand, as soon as you have made it to the JavaScript phase of development, I highly recommended using jQuery or MooTools. They are very focused on circumventing cross-browser inconsistencies.
Let JSLint hurt your feelings — Even when using a JavaScript framework, there are certain standards of coding to which JSLint will help you conform. Some of the options are a bit overly strict, but I promise that if you clean your scripts through this tool often enough during development, you will almost never encounter those strange times when everything seems to work in all browsers except IE.
And some great tools! Everything in the above list you should consider mandatory practice. The following can spice it up for you in a pinch, but is optional:
CSS Browser Selector — it is rare that you will need this, but if all else fails, it's way cooler than using a separate stylesheet just for one browser (I despise conditional comments). It basically adds classes to your <html> tag, so you can do things like the following in your main stylesheet: .ie7 #header {/*stylese here for IE7 only*/}. It supports a lot of browsers on many operating systems. And it's fast.
Browsershots — Nothing beats the real thing, but if you can't install a suite of browsers, this and other tools like it can help.
IE6 CSS Fixer — I outright refuse to debug my designs in IE6. I coerced my company (via many chagrin-filled meetings with IT and management) to drop support for it (thank god). It's just counter-productive to waste so much time forcing this pile-of-ahem... Anyway, if you aren't like me and need to support IE6, this tool can help.
Also you should focus on resetting css like this
OOoooo, good question:
here's my take:
Decide which browsers you are supporting. I suggest IE 7 + 8, FF, Chrome and Safari as in order of importance. (only support IE6 if you absolutely have to!). It helps if you know your userbase here.
Use a css reset. Different browsers have different default styles. a css reset gives you a consistent base.
Keep your markup as simple as possible. Follow Standards (and see progressive enhancement on Stephen's answer).
Test every step of the way on your target browsers. That way you can correct problems right away. http://crossbrowsertesting.com/ is the best resource for this, but there are free ones for screenshots as well.
Avoid Hacks as much as possible. Most cross-browser issues these days can be solved without resorting to hacks.
Ask questions here when you get stuck. If this is your first project dealing with browsers, you will get bewildered by inconsistencies. We all face these issues, and are glad to help.
Be ok with the fact that webpages are not going to look exactly the same in all browsers. (once again, see progressive enhancement).
Good luck coding!
I develop for Firefox first, and then work out the IE buggery. Rarely do I "hack" it, rather find something that works in both, or at worst use IE conditional comments. Just one coder's preference. Always a good idea to test with Safari, too.
Two big advantages of Firefox are: the Error Console, and the Firebug plugin.
there is alot of greate tools that makes life alot easier for you there is for example a
css framework called blueprint you could use, it has already everything set for every specific browser so that you get the same outcome in all browsers. And using jquery as your javascript framework does add an extra insurance that you'll have it working in most browser.
but remeber there is no such thing as 100% cross browser compatibility for all the browsers and all the versions in world.
In theory would be best to develop for all browsers at once, always testing for every browser...
Realistically, that rarely happens... I typically develop/test with firefox. when I introduce complex javascript or css, I check in ie... this tool is incredibly handy for checking all versions at once... google ie tester.
By checking all browsers at regular intervals, and when you make complex changes, you ensure that major features are compatable :)
Also, ensuring that all of your code is valid is not only good practice, but helps identify cross browser issues.. google w3schools validator :)
Using javascript libraries such as jquery also aid in cross browser compatability, and some even come with css libraries as well. These libraries are purpose built for quick, reliable features that are typically cross browser guaranteed.
Finally, before launching, use launchlist to check that all works: http://lite.launchlist.net/
Hope all that makes sense and helps with your first project :)

Is there a "de facto" standard link to give to users to show them how to enable JavaScript?

This is an often used HTML piece on websites.
<noscript>
Please enable JavaScript or use a JavaScript capable device to get the maximum benefit of this site.
</noscript>
I want to link it to some directions or similar to enable JavaScript. I don't want to make my own list, as it would require me to update it.
I have found the Google link before, which was pretty good, but I was wondering if there is any de facto link that developers link to give users step by step instructions on how to enable JavaScript.
I realise that most people with it off probably do know how to re-enable it, I just thought for completeness a link couldn't hurt (maybe their more web savvy brother disabled it on a shared computer).
Looked up a bit and found http://www.enable-javascript.com/.
Seems to be a bit more updated i.e includes chrome etc and has screen images as well for those who prefer the visual route.
Also, doesn't seem to have a lot of pesky ads etc. Hope it helps!
Caveat: Must add that I have never used this before and am not sure of how frequently it will be updated but it looks promising!
Is this still a major concern in 2010? In my experience, people who see the <noscript> content have either:
disabled JS themselves, and therefore would know how to enable it (e.g. NoScript users)
or don't have JS capabilities (e.g. text-only or low-end mobile browsers)
Above that, browser landscape is varied enough that it's rather hard to keep up with various browser versions and their JS settings.
I'd say "just display 'this works better with JS' and degrade gracefully".
I have found activatejavascript.org. It is a little outdated, e.g. not providing instructions for Google Chrome.
I am also weary of sites that look like just a quick + dirty platform for advertisements (I got that impression).
There is probably something better.
Why don't you do it yourself?
It only takes a little browser sniffing and browser screenshots.

Categories