I have a word as a custom "Add to Favorites" button. Clicking on the word link should add the website's URL to the user browser's favorites (bookmarks). This should work for all browsers, IE7+, FF, Opera, Chrome. As my code is working but i think i lack of something, it doesn't when clicked it will auto bookmarks instead of clicking the dialog alert. Kindly advise
Here my code :
$(function(){
function AddFavorite(sURL, sTitle)
{
try
{
window.external.addFavorite(sURL, sTitle);
}
catch (e)
{
try
{
window.sidebar.addPanel(sTitle, sURL, "");
}
catch (e)
{
alert("请使用Ctrl+D进行添加");
}
}
}
$('div.link_r').find('a').on('click',function(){
AddFavorite(location.herf,'新蔡');
return false;
});
HTML :
<div class="link_r">
收藏此页面,开奖即时查看
</div>
$(function() {
function AddFavorite(sURL, sTitle) {
if (/firefox/i.test(navigator.userAgent)) {
return false; //firefox work with attr "rel=sidebar"
} else if (window.external && window.external.addFavorite) {
window.external.addFavorite(sURL, sTitle);
return true;
} else if (window.sidebar && window.sidebar.addPanel) {
window.sidebar.addPanel(sTitle, sURL, "");
return true;
} else {
var touch = (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL');
alert('Press ' + touch + ' + D to bookmark this page.');
return false;
}
}
$("div.link_r a").attr("rel", "sidebar").click(function() {
return !AddFavorite(window.location.href, $(this).attr("title"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link_r">
收藏此页面,开奖即时查看
</div>
See : How do I add an "Add to Favorites" button or link on my website?
This works on some browsers :
$('#bookmark_me').click(function(e){
e.preventDefault();
var bookmarkURL = this.href;
var bookmarkTitle = this.title;
try {
if (window.sidebar) { // moz
window.sidebar.addPanel(bookmarkTitle, bookmarkURL, "");
} else if (window.external || document.all) { // ie
window.external.AddFavorite(bookmarkURL, bookmarkTitle);
} else if (window.opera) { // duh
$('a#bookmark').attr('href',bookmarkURL);
$('a#bookmark').attr('title',bookmarkTitle);
$('a#bookmark').attr('rel','sidebar');
}
} catch (err) { // catch all incl webkit
alert('Sorry. Your browser does not support this bookmark action. Please bookmark this page manually.');
}
});
DEMO
Related
I am trying to write a jquery function on button click nut it's showing an error ',' expected.
------Code-------
$("#submit").click(funtion(){
if ($("#totalizerform").valid())
{
return true;
}
else
{
return false;
}
});
please give this a go:
$("#submit").on("click", function() {
if ($("#totalizerform").valid()) {
return true;
} else {
return false;
}
});
The function I have only responded to a button click but not the image click. Can anyone tell me what would I need to modify in the function so that it responds to both button & image clicks?
function clickMe(a,b) {
$("#q"+b+" input[type='button']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
You are probably expecting this $("#q"+b+" input[type='button'], #q"+b+" input[type='image']")
function clickMe(a,b) {
$("#q"+b+" input[type='button'], #q"+b+" input[type='image']").click(function(event) {
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
if(b !== $(".qc").length) {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250);
});
} else {
$("h1").html(a);
$("#q"+b).hide(250, function() {
$("#q"+b).next().fadeIn(250, function() {
loading(0);
});
});
}
});
}
I hope this solves your problem. If not then no worries :) just update/add your html in the test case bellow:
https://codebrace.com/editor/b02f036fa
I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?
The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle
Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!
I have made this script below is working fine in chrome by the help of someone in stackoverflow.
(function($) {
$.fn.enterAsTab = function(options) {
var settings = $.extend({
'allowSubmit': false
}, options);
$(this).find('input, select, textarea, button').on("keypress", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch (err) {
// handle objects not offering select
}
return false;
}
});
return this;
};
})(jQuery);
But this code is not fully working in Firefox. The not working part is the select. I cannot use enter to move to next field when I am in a dropdown (Select).
Thank you in advance.
event.keycode is not supported by Firefox. You need to use event.which for Firefox.
Take a look: window.event.keyCode how to do it on Firefox?
I have some code which was written by someone else, which is supposed to open a popup if a zipcode is not in the correct format and stop the page from being submitted. It works correctly in IE and chrome. But in firefox i get the popup, click ok, and then the page submits. Can someone look over the code and let me know what's being done incorrectly? Code pasted at the end of this message.
Thank you
<script type="text/javascript">
$(init);
function init() {
$('form').validate({
error_messages: {
},
failure: function (errors) {
//alert(errors);
$(".errMsg").show();
return false;
},
success: function () {
//alert('passed');
//return true;
}
});
$('#<%= btnAdd.ClientID %>').click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
}
function clearText(mybox, mymsg) {
if (document.forms['form1'].elements[mybox].value == mymsg) {
document.forms['form1'].elements[mybox].value = '';
document.forms['form1'].elements[mybox].style.color = '#000000';
}
}
function resetText(mybox, mymsg) {
if (document.forms['form1'].elements[mybox].value == '') {
document.forms['form1'].elements[mybox].value = mymsg;
document.forms['form1'].elements[mybox].style.color = '#C0C0C0';
}
}
function beginZipValidation() {
//alert('begin validation');
var zip = $('#<%= Zip.ClientID %>').val().replace(/ /g, '').toUpperCase();
var cID = $("#<%= ddlCountry.ClientID %> option:selected").val();
if (!zipCodeValidation(true, cID, zip)) {
return false;
}
//alert('true');
return true;
}
function zipCodeValidation(shouldValidateEmpty, countryID, zc) {
//alert('zipCodeValidation');
if (zc == '' || zc == 'POSTALCODE') {
if (!shouldValidateEmpty) {
return true;
}
}
else {
switch (countryID) {
case '226':
if (/^\d{5}(-\d{4})?$/.test(zc))
return true;
break;
case '38':
if (/^([ABCEGHJKLMNPRSTVXY][0-9][ABCEGHJKLMNPRSTVWXYZ])\ ?([0-9][ABCEGHJKLMNPRSTVWXYZ][0-9])$/.test(zc))
return true;
break;
case '225':
if (/^(GIR 0AA|[A-PR-UWYZ]([0-9][0-9A-HJKPS-UW]?|[A-HK-Y][0-9][0-9ABEHMNPRV-Y]?)[0-9][ABD-HJLNP-UW-Z]{2})$/.test(zc))
return true;
break;
case '13':
if (/^(((2|8|9)\d{2})|((02|08|09)\d{2})|([1-9]\d{3}))$/.test(zc))
return true;
break;
}
}
alert('The postal code provided does not fit the format for the selected country. Please adjust and try again.');
if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
event.preventDefault();
return false;
}
It might be as simple as the selector being wrong:
Try changing this:
$('#<%= btnAdd.ClientID %>').click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
Instead be a bit more verbose like:
var myButtonId = "<%= btnAdd.ClientID %>"; // Now you know what this evaluates to client-side
var btnSelector = "#" + myButtonId;
$(btnSelector).click(function (event) {
if (beginZipValidation()) {
//event.preventDefault();
return;
}
});
Are you using the standard tools like Firebug or Chrome Developer tools to debug? If so, throw a few console.log("myButtonId: " + myButtonId); statements in there!