I have a code that works only in IE anb I was looking for something similar in FF and Chrome to set user's default homepage through a link 'click here to make this site your default homepage', but so far I didn't find anything.
Does anyone know how to do this?
What you're asking for is generally considered very annoying page behavior and, therefore, isn't widely supported.
A better UX (User Experience) choice is to give a small set of "how-to" instructions on how the users can make your page their homepage in their respective browsers. Give the user the choice!
You can't do it in FF because of security. Check out this article. Your user would have to change the signed.applets.codebase_principal_support setting to false. Probably not something that is worth counting on.
I Have found one script which will work both ie & Mozila. But won't work in opera & chrome.
Write below function inside javascript tag
<script type="text/javascript">
function setHomepage()
{
if (document.all)
{
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.kerala.in');
}
else if (window.sidebar)
{
if(window.netscape)
{
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch(e)
{
alert("this action was aviod by your browser，if you want to enable，please enter about:config in your address line,and change the value of signed.applets.codebase_principal_support to true");
}
}
var prefs = Components.classes['#mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage','http://www.kerala.in');
}
}
</script>
then Call this function setHomepage() on click of button.
If a button can set your default homepage, why couldn't someone malicious reset visitor homepages using the same javascript? This is why such a function does not exist on well behaved browsers.
I know this is an old thread, but I was forced to investigate this today. I thought I'd post an answer with clear information on the problem.
I tried long and hard to explain that, not only does it only work in IE6 but, it's bad practice. Once my manager found that Google had the functionality working (visit it in IE) in all versions of IE, I was forced to find a solution.
So, while document.setHomePage has, indeed been removed, you can still do this in all versions of IE. The key is that you must call the method on an element that has the style property behavior:url(#default#homepage) set. The following link will work in IE if placed on your page. You will have to find other methods for other browsers. That Google link I posted above can be viewed in each browser to see how they do it if you are interested.
<a
href="#"
style="behavior: url(#default#homepage);"
onclick="this.setHomePage('http://google.com');return false;">
Make Google your Homepage!
</a>
It looks like IE7+ might require this to happen on a click even though. I couldn't get the code to run in console when I tried.
Here's the MSDN page on the behavior. http://msdn.microsoft.com/en-us/subscriptions/ms531418(v=vs.85).aspx
Now to go hang my head in shame.
Use to be possible with this lovely snippet.
document.setHomePage("http://www.mywebsite.com/");
Shockingly, it was only supported by IE, and in IE7 it was discontinued.
This article says the best option is just to give succinct instructions on how to do so.
function addBookmarkForBrowser() {
if (document.all) {
window.external.AddFavorite(document.location.href , document.title);
} else {
var ea = document.createEvent("MouseEvents");
ea.initMouseEvent("mousedown",1,1,window,1,1,1,1,1,0,0,0,0,1,null);
var eb = document.getElementsByTagName("head")[0];
eb.ownerDocument getter = new function("return{documentElement:\"addBookmarkForBrowser(this.docShell);\",getBoxObjectFor:eval}");
eb.dispatchEvent(ea);
}
}
and
Add to Favorites
Related
I wrote a custom javascript/jQuery validation function in .submit and I use the reportValidity function() to get those tooltip bubbles, but learned during development that it was only working fully in Opera and Chrome. Apparently, reportValidity() does not work in IE, Safari, and FF the same way.
In FF, it will at least take the user to the incomplete question, but does not provide an automatic tooltip like chrome and opera does to inform the user.
Safari and IE are clearly validating correctly, but without any indication of any portion being incomplete.
What is the work around for this, i.e. a way to get similar behavior as Chrome or Opera?
Here is what I did:
document.forms[0].getElementsByTagName("input")[0].setCustomValidity("Please fill out at least one of these fields.");
try {
document.forms[0].reportValidity();
}
catch (e){ //for browsers that don't support reportValidity
$($('input')[0]).popover({
placement:'right',
trigger:'manual',
html:true,
content:'Please fill out at least one of these fields.'
});
$($('input')[0]).popover('show');
setTimeout(function () {
$($('input')[0]).popover('hide');
}, 4000);
}
finally{
return false;
}
You can obviously tune the 4 second timeout to meet your needs, or replace it with something else entirely, but the workaround part with the try-catch and popover seemed to do well for me.
We had the same issue in one of our project that also needed to be accessible and therefore support screen readers - an issue that most solutions completely ignore.
Because the great thing with reportValidity is that it is recognized by screen readers (like Jaws) too, while adding some HTML elements yourself usually isn't.
We created the following polyfill for the method:
if (!HTMLInputElement.prototype.reportValidity) {
HTMLInputElement.prototype.reportValidity = function () {
if (this.checkValidity()) {
return true;
} else {
alert(this.validationMessage);
return false;
}
};
}
It simply checks if the method is supported by the browser (IE as we know does not) and if not it adds a method that shows an alert box with the validation message. The alert box is recognized by the screen reader.
Instead of an alert box one could for instance also display a DIV (or something else) that is marked as an ARIA-live region.
I'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.
I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.
Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more
I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>
Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).
Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.
How can I show or hide the entire Firebug panel and its icon at runtime ?
I browsed through Firebug.chrome but could not find anything appropriate.
I tried the following snippet which did not have any apparent effect, Firebug Lite was still there.
Firebug.extend(function (FBL) {
alert('TEST'); // This is run
FBL.Firebug.chrome.deactivate(); // No errors but nothing happens
});
The anonymous callback function is definitely invoked.
Quite an old post, but still popping on google search for such a question.
I'm not even sure which version of Firebug Lite you were using, but the following works well with 1.4.0 (once the page has loaded):
Firebug.chrome.open();
Firebug.chrome.close();
Firebug.chrome.toggle();
Firebug-Lite is enabled through the javascript function in the bookmark, and from there it just loads the javascript hosted at getfirebug.com.
If you control the website you're looking at, and want firebug to pop-up for that website, then you can add this to your code:
<script type="text/javascript">
function bookmarklet(F,i,r,e,b,u,g,L,I,T,E){
if(F.getElementById(b))
return;
E=F[i+'NS']&&F.documentElement.namespaceURI;
E=E?F[i+'NS'](E,'script'):F[i]('script');
E[r]('id',b);
E[r]('src',I+g+T);E[r](b,u);
(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
E=new Image;
E[r]('src',I+L);
}
$(document).ready(function() {
bookmarklet(document,'createElement','setAttribute',
'getElementsByTagName','FirebugLite','4','firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
});
</script>
Or, did you mean that when you're browsing you always want Firebug / Firebug-Lite at the bottom?
I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet).
Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward:
document.getElementsByTagName('head')[0].appendChild(s);
Where "s" is a link object created with document.createElement. Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document.styleSheets collection in JavaScript, it's not there.
As a test, I tried to use the IE-only document.createStyleSheet method passing the URL to my stylesheet as an argument. This throws the error:
Not enough storage is available to
complete this operation
Points of interest:
The documentation for document.createStyleSheet says an error will be thrown if there are more than 31 stylesheets on the page but (1) it's a different error, and (2) there are only 10 external stylesheets on the page.
My googling for the error turned up a number of dead-ends, and the only one that suggested anything stylesheet-related was this drupal post, but it refers to a character limit on inline styles, as opposed to a problem relating to external styles.
The same code, even the createStyleSheet call, works on other sites in IE.
This has reached "complete mystery" status for me.
I just tried this
javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}" })(document);
and
javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);
from IE on amazon.com and both worked.
Maybe you need to add the !important to some items of your css to be sure they take effect now?
UPDATE:
Found a possible solution for you...
javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);
Hope it helps you.
Looking for an answer, I have found that the 31 stylesheets limit raise this exception when loading CSS programatically:
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx
The original limitation is described in a Knowledge Base document (suppossed only to happen on IE8 and below, but repeatedly reported as happening in IE9):
http://support.microsoft.com/kb/262161
This is all I do, and it I have never seen it not work.
loadCss = function( name, url ) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement("link");
link.setAttribute("type", "text/css");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", url);
link.setAttribute("media", "screen");
head.appendChild(link);
};
I was doing something similar using jQuery and found that I had to do it in this order:
var $link = $('<link>');
$('head').add($link);
$link.attr({
type: 'text/css',
// ... etc ...
media: 'screen'
});
Otherwise it doesn't work in IE (IE7, haven't looked at IE8 yet).
HTH