I am trying to make sure the popover gets closed if i click anywhere on ui. Please have a look at the sample code at https://jsfiddle.net/vk23nmy8/15/ .
On click of Add, it adds rows to table. Each row has its popover. It works for first few clicks but then does not work at all. I am not sure what I am doing wrong here.Below is the code I am using to close tje pop-up.
$('body').on('click', function(e) {
var count = 0;
$("#tbody > tr").each(function() {
$('[data-toggle="popover' + count + '"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
count++;
});
});
Thanks for your help.
Related
I'm trying to disable a submit button to check if all the input fields are filled before submitting. I've checked and used most of the codes here. I have found a handful that works, but the problem is the code works when I check it on a console window, but it doesn't work when I include it on a WordPress site. I'm using Skyboot Custom Script Panel and i have put the script after the footer.
Here is the code:
var $ = jQuery.noConflict();
$(document).ready(function() {
$('button').attr('disabled', true);
$('input').on('keyup blur', function() {
if ($('[data-wof-field~="primary_email"]').val() != '' && $('[data-wof-field~="text_2"]').val() != '' && $('[data-wof-field~="number_1"]').val() != '' && $('[data-wof-field~="text_1"]').val() != '') {
$('button').attr('disabled', false);
} else {
$('button').attr('disabled', true);
}
});
});
Thanks in advance,
I have a pop up menu that appears when the users name is hovered over using onmouseeneter and the menu disapeers when onmouseleave is triggerd.
The problem i have is that on occasion the mouseleave is not triggered and the menu stays showing, which is ok but i require another check to see if mouse is within the div on mouse move. and also a click event to close the div if the click is outside of the div.
How can i check weather a click or a mousemove is within a div or not.
I have tried the following with no luck. allthough the code is fine i require another way.
<div id='overlay' class='overlay' style='display:none;'
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>
function showoverlay() {
var overlay=document.getElementById("overlay");
overlay.style.display="block";
overlay.style.zIndex="999";
overlay.style.opacity="1";
}
function removeoverlay() {
var overlay = document.getElementById("overlay");
overlay.style.opacity="0";
overlay.style.display="none"
overlay.style.zIndex="-999";
}
$(document).ready(function(){
$(document).mouse(function(e)
{
var subject = $("#overlay");
if(e.target.id != subject.attr('id') &&
!subject.has(e.target).length)
{
removeoverlay();
}
});
});
You can use is jQuery function like so:
$(function() {
$('ul').on('click', function (event) {
let target = $(event.target);
let handle = $(this).find('i');
let checkbox = $(this).find('input[type=checkbox]');
if (false === target.is(handle) && false === target.is(checkbox)) {
checkbox.prop('checked', !checkbox.prop('checked'));
}
});
});
I am having problems displaying a google map in a Bootstrap modal. See below
Does anyone know why this is?
I don't know whats wrong with that, but i try to solve your problem.
This is for replacing the modal, may you can use this code to replace map again.
$.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// add whatever conditions you need here:
&&
!$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
});
};
Hi guys I have a website using opencart and I have a notification bar which tells users there is 10% off there first order however there is a close button but once you click close and refresh the page or visit it at a later time then it will show again, what I want is that when the user clicks close then it will not show again for 24 hours.
http://intoyoufashion.co.uk is my site which you can check it out to see what i mean.
Below is the code
<div id="Notify" style=" background-color:#DAA520; z-index:999;font-size:16px; text-align:center; color:#fff; position:fixed;width:100%;height:18px;top:0px;">Use code open10 at checkout for 10% off your first order<button class="close" onclick="document.getElementById('Notify').style.display='none'" >Close</button></div>
Thanks, if you guys can be of help.
please add the following code blocks to your common.js
//First code block ---start
$('#Notify button').click(function(){
$('#Notify').css("display", "none");
localStorage.setItem("offer_exp", new Date().getTime() + (60 * 60 * 24));
});
// ----End of first code block
$(document).ready(function() {
//second code block --start
if (localStorage.hasOwnProperty("offer_exp")) {
if (localStorage.getItem("offer_exp") <= new Date().getTime()) {
$('#Notify').css("display", "block");
}
else{
$('#Notify').css("display", "none");
}
} else {
$('#Notify').css("display", "block");
}
//-----end of second code block
/* Search */
$('.button-search').bind('click', function() {
url = $('base').attr('href') + 'index.php?route=product/search';
var search = $('input[name=\'search\']').attr('value');
if (search) {
url += '&search=' + encodeURIComponent(search);
}
location = url;
});
I am using WebKit Notifications for my app. Say if I am using this code:
var n = window.webkitNotifications.createNotification(
'icon.png',
'New Comment',
'Praveen commented on your post!'
);
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();
PS 1: The first five lines are actually a single line. Just for readability I have posted this way.
PS 2: For the full code, please see this: Unable to show Desktop Notifications using Google Chrome.
My question is, what if I have more than one tab opened?
Say if this is gonna get fired when a new comment appears on my app. What if I have more than one tab open? Will this generate many notifications? Say, I have 10 - 15 tabs open and I get two notifications fired. How many notifications will be generated, 20 - 30?
If that is the case, how to prevent generation of a single notification multiple times for each opened tab?
You just need to specify "tag" option for notification. Notifications with the same value in tag only shows once even if many tabs are opened.
For example:
var notification = new Notification('Hey!', {
body : 'So nice to hear from you',
tag : 'greeting-notify',
icon : 'https://mysite.com/my_funny_icon.png'
});
A detailed explanation of Tagging notifications so only the last one appears is available
on the MDN docs site
An excerpt of the code [just in case the docs go down]
The HTML
<button>Notify me!</button>
The JS
window.addEventListener('load', function () {
// At first, let's check if we have permission for notification
// If not, let's ask for it
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', function () {
// If the user agreed to get notified
// Let's try to send ten notifications
if (Notification && Notification.permission === "granted") {
for (var i = 0; i < 10; i++) {
// Thanks to the tag, we should only see the "Hi! 9" notification
var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
}
// If the user hasn't told if he wants to be notified or not
// Note: because of Chrome, we are not sure the permission property
// is set, therefore it's unsafe to check for the "default" value.
else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user said okay
if (status === "granted") {
for (var i = 0; i < 10; i++) {
// Thanks to the tag, we should only see the "Hi! 9" notification
var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
}
// Otherwise, we can fallback to a regular modal alert
else {
alert("Hi!");
}
});
}
// If the user refuses to get notified
else {
// We can fallback to a regular modal alert
alert("Hi!");
}
});
});