Cross-browser bookmark/add to favorites JavaScript [duplicate] - javascript

This question already has answers here:
How do I add an "Add to Favorites" button or link on my website?
(5 answers)
Closed 9 years ago.
Is there any cross-browser bookmark/add to favorites using JavaScript.
Searched for some list but none is working. Can you please suggest any?

jQuery Version
JavaScript (modified from a script I found on someone's site - I just can't find the site again, so I can't give the person credit):
$(document).ready(function() {
$("#bookmarkme").click(function() {
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(location.href,document.title,"");
} else if(window.external) { // IE Favorite
window.external.AddFavorite(location.href,document.title); }
else if(window.opera && window.print) { // Opera Hotlist
this.title=document.title;
return true;
}
});
});
HTML:
<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
IE will show an error if you don't run it off a server (it doesn't allow JavaScript bookmarks via JavaScript when viewing it as a file://...).

function bookmark(title, url) {
if (window.sidebar) {
// Firefox
window.sidebar.addPanel(title, url, '');
}
else if (window.opera && window.print)
{
// Opera
var elem = document.createElement('a');
elem.setAttribute('href', url);
elem.setAttribute('title', title);
elem.setAttribute('rel', 'sidebar');
elem.click(); //this.title=document.title;
}
else if (document.all)
{
// ie
window.external.AddFavorite(url, title);
}
}
I used this & works great in IE, FF, Netscape.
Chrome, Opera and safari do not support it!

How about using a drop-in solution like ShareThis or AddThis? They have similar functionality, so it's quite possible they already solved the problem.
AddThis's code has a huge if/else browser version fork for saving favorites, though, with most branches ending in prompting the user to manually add the favorite themselves, so I am thinking that no such pure JavaScript implementation exists.
Otherwise, if you only need to support IE and Firefox, you have IE's window.externalAddFavorite( ) and Mozilla's window.sidebar.addPanel( ).

Related

Detecting Mobile Devices with JavaScript [duplicate]

This question already has answers here:
Detecting a mobile browser
(46 answers)
Closed 8 years ago.
I am using the below code to detect for mobile and I want to detect either Android only or iOS only. I tested the mobile detect with if( isMobile.iOS() ) alert('iOS'); and it shows the alert.
But I want to display the Android Google Play badge if it is Android and the Apple store badge if it is iOS but for some reason the below code isn't working. Can someone tell me what I am doing wrong?
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad /i);
},
};
if (isMobile.Android()) {
document.getElementById("googlePlayBadge").innerHTML = "<img src='modal-img/googlePlayBadge.png' alt='Google Play' class='img-responsive' />";
} else {
if (isMobile.iOS())
document.getElementById("appStoreBadge").innerHTML = "<img src='modal-img/appStoreBadge.png' alt='App Store' class='img-responsive' />";
};
<section class="text-center">
<div id="appStoreBadge"></div>
<div id="googlePlayBadge"></div>
</section>
Reliably detecting devices using JS is hard, man. Most sane people will avoid it.
There are libraries that do this, but if that's too much overhead:
var useragent = navigator.userAgent.toLowerCase();
var isAndroid = useragent.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert('I am an android device');
}
If for some reason you don't care at all about anything other than android or iOS (such as windows phones, blackberries, etc.) you could check if a touch event is available, then check if it's iOS (since that is more reliable), and if it != iOS but does have touch, you can show the play store icon.
sorry, I should also mention that I've used that JS successfully, but it's from here: http://davidwalsh.name/detect-android

Why target blank is not working in ie 8? [duplicate]

IE8 will sometimes prevent links from spawning if they have target=_blank set.
This problem appears to be limited to corrupt installs of IE, such as when installing several versions side-by-side.
I edited this question once I found the answer, and hopefully this will save someone else some time. The answer is in the comments of the first answer listed.
This depends upon which stand-alone IE8 that you use. I found this to be a problem while using "Final Builds Site - Internet Explorer Collection" (http://finalbuilds.edskes.net/iecollection.htm) version 1.6.0.3. The developer has now fixed this bug as of Ver. 1.6.0.4, and links with target="_blank" now work as expected.
I know this is already answered, but I just wanted to tell about the jQuery's live binding functionality:
$("a.myclass").live("click",function() {
$(this).attr("target","_blank");
});
This example sets the 'target="_blank"' attribute to any link with the class "myclass", even those created with Javascript.
What about if you use target='blank' ? I know it's not THE same, but you will get the popup/window open in a new instance, and your site could validate for XHTML Strict Mode :)
Yeah, XHTML Strict Mode doesn't accept target="_blank".
If you don't want to keep using window.open everywhere, you can use rel="external" and some extra Javascript like the following, using JQuery:
$(document).ready(function() {
$("a[rel='external']").attr("target","_blank");
});
EDIT: To set all generated links:
$("a[rel='external']").ready(function() {
$("a[rel='external']").attr("target","_blank");
});
Or, without jQuery, you can use the script, found here:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
This is because target="_blank" is not valid under XHTML Strict Mode. See:
http://www.8164.org/xhtml-strict/
The following should work in all cases.
<script>window.open("http://www.80vul.com/test/ie8-1.htm");</script>
I presume that as of IE8 Beta 1, the default mode is now STRICT instead of TRANSITIONAL.

Javascript/jQuery not working in IE

This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?
Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.
I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.

Getting unload to work cross-browser's with a button

I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click(), now I am working on different methods for different browsers but I can't seem to get them it working together.
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? Here is the code I am trying to get working:
window.onunload=leave;
function leave() {
// For Internet Explorer only.
if (navigator.appName == "Explorer"){
document.getElementById('kioskform:broswerCloseSubmit').click();
}
// For Chrome only
if (navigator.appName == "Chrome"){
// add code for Chrome to use.
}
// for Safari only
if (navigator.appName == "Safari"){
// add code for Safari to use
}
// for Firefox only
if (navigator.appName == "Firefox"){
// add code for Firefox to use
}
}
So far the only thing working is IE but the other web browsers are not liking the code in the document. But I want to try other methods for the other browsers I am working with. But I can't seem to get browser detection to work at all, any idea's or suggestions or advice is greatly appreciated thank you.
Some browsers (Chrome / FF) does not support the window.onunload method.
See: http://bugs.jquery.com/ticket/10509

Running a JavaScript code when a browser bookmark is clicked

I've written a code that has successfully created a bookmark for any of the following browsers - IE, Firefox and Opera.
<script language="JavaScript" type="text/javascript">
function bookmark()
{
var title = 'Google';
var url = 'http://google.com';
if (document.all)// Check if the browser is Internet Explorer
window.external.AddFavorite(url, title);
else if (window.sidebar) //If the given browser is Mozilla Firefox
window.sidebar.addPanel(title, url, "");
else if (window.opera && window.print) //If the given browser is Opera
{
var bookmark_element = document.createElement('a');
bookmark_element.setAttribute('href', url);
bookmark_element.setAttribute('title', title);
bookmark_element.setAttribute('rel', 'sidebar');
bookmark_element.click();
}
}
</script>
Now I want my bookmark to run a piece of JavaScript code instead of surfing to Google, when the user clicks on it.
This is called a bookmarklet. You could try replacing 'http://google.com' with "javascript:alert('Annoying message');". However, Firefox at least doesn't allow adding bookmarklets using this API. I suspect IE and Opera may be the same.
You can try putting the js code in an html and then bookmark that html.

Categories

Resources