http://www.rightoption.co/
You will find "Our Client" On RHS side of page, Click on thumbnails it opens popover(Firefox),
But it's not working in Google chrome, Please help me out of this
Edit : Website is no longer on hosting
This is because the default trigger for the popover is focus. In Firefox, when you click on something, it seems to gain focus but that does not seem to be true for Chrome in this case.
You can try one of 2 things:
Try to manually set the trigger on the tag to be "manual". So add this attribute data-trigger="manual"
OR
In your document onload, instead of doing:
$('#element, #element1').popover('toggle').popover('hide');
use this line instead:
$('#element, #element1')
.popover()
.click(function(e) {
e.preventDefault();
$(this).focus();
});
The accepted answer is pretty dated now, but it came up for me in a Google search, so I would like to add that as of version 2.3.0 Bootstrap now allows to send 'hover focus' as the trigger so it will work on both. And very importantly, it also allows a 'click' trigger that works as you'd expect (specifically for Chrome).
This worked for me!
var el = $('[data-toggle="popover"]');
el
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide');
$(document).off('click.popover');
});
})
.popover();
Update: The above had an issue whereby clicking another popover element while a popover is displayed closes the open popover but doesn't open the new one. The following will close the open popover AND open the new one with one click.
var el = $('[data-toggle="popover"]');
el
.on('click', function(e){
var el = $(this);
setTimeout(function(){
el.popover('show');
}, 200); // Must occur after document click event below.
})
.on('shown.bs.popover', function(){
$(document).on('click.popover', function() {
el.popover('hide'); // Hides all
});
})
.on('hide.bs.popover', function(){
$(document).off('click.popover');
});
Related
Sorry for the vague project title but I'm not having a great idea about how to explain this.
So, let's dive in to it. I was in need of a dropdown list with multiple select options to select recipients from.
I've started my search on Codepen and came across this: https://codepen.io/MaartenTe/pen/mXYLXj
I've forked it so I could tweak it myself. The snippets works perfect. The only thing missing is the ability of closing the dropdownlist when clicking outside of it.
So I started to approach it using javascript. So far I got following code:
$(document).click(function(e) {
var target = e.target; //target div recorded
if (!$(target).is('.multi-select ') ) {
$('.multi-select-options span').css('display', 'none');
$('.multi-select-options label').css('display', 'none');
}
});
Although this isn't working the way I want, I think it's the right approach?
Looking at how that works, its a checkbox that causes the toggle so you need to clear that when you click out the box.
$('.multi-select').on('click', function(e){
e.stopPropagation()
});
$(window).on('click', function(e) {
$('#toggle-open').attr({checked: false})
});
The stopPropagation will stop the window click even firing. https://codepen.io/anon/pen/rdwrya?editors=1111
What works in the given codepen:
var toggle = document.getElementById('toggle-open');
document.addEventListener('click', function(event) {
if (['INPUT', 'LABEL', 'SPAN'].indexOf(event.target.nodeName) + 1) return;
if (toggle.checked) toggle.checked = false;
});
Just handle click, exclude the relevant elements and uncheck if needed.
JS Fiddle Example
I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
$(document).on('click', '.dd-box', function() {
// Comment out the return statement below and the links will start working.
return false
});
The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
The reason I need this code is because I don't want the dropdown boxes to close when click events happen within them.
I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?
you should put stopPropagation
$(document).ready(function() {
$("a").click(function(e) {
e.stopPropagation();
});
...
see JSFiddle
Hello I'm trying to use the html drag and drop feature with jquery. I generate my draggable (a button) like this
$("#tb > tbody > tr").append(($("<td>")).append($("<input/>", {type:"button", id:"bt", draggable:"true", value:"test", class:"bt-test"}))).append($("</td>"));
So far, and after reading a bit on the subject, I'm trying to deal with the different events like this :
$(document).on("dragstart", ".bt-test", function(evt)
{
evt.originalEvent.dataTransfer.setData("text", $(this).val());
alert(evt.originalEvent.dataTransfer.getData("text"));
evt.originalEvent.preventDefault();
});
$(document).on('dragenter', function(evt){evt.originalEvent.preventDefault();});
$(document).on('dragleave', function(evt){evt.originalEvent.preventDefault();});
$(document).on('dragover', function(evt){evt.originalEvent.preventDefault();});
// still irrelevant at this point
$(document).on("drop", ".btCase", function(evt)
{
var data = evt.originalEvent.dataTransfer.getData("text");
$(this).val(data);
event.originalEvent.preventDefault();
});
The alert within the dragstart listener shows up just fine on chrome but it doesn't on firefox.
I already tried adding an ondragstart="dragstart_handler(event);" directly into my button as mentionned in https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API but the problem remains. I also tried replacing the event.originalEvent.preventDefault(); with return false();
Any tips?
edit : fiddle > http://jsfiddle.net/Nn4x2/4/
This works with a div element, see http://jsfiddle.net/Nn4x2/26/
It seems draggable input buttons are not supported in Firefox. It may be best to use a styled anchor element instead.
This is logged as a Firefox bug for button elements - see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
I have a standard bootstrap 3 accordion panel with a dynamic number of panels. I need to display another div with information specific to the panel that is open. I have trapped the open event and tried to identify the calling panel with the following code:
$(document).on('click', "#accordion_a", function(){
$('#accordion_a').on('shown.bs.collapse', function (e) {
alert('Calling #' + e.currentTarget.id);
})
})
However it just returns the parent panel set "#accordion_a." (and for some reason fires multiple times) So how can I identify which panel is open?
there are some issue in your javascript, I would suggest to use the
$(function() {});
instead of
$(document).on('click', "#accordion_a", function(){});
And then the event shown.bs.collapse must be triggered on the "collapse" block not on a link.
Please check this demo : http://jsfiddle.net/V8h9a/
And let me know if it solves your issue.
I have this script that run to fix my menu bar to the browser on scroll. Nothing really needs to change here (works as it should). However, you may need it...
var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');
var start = $(div).offset().top;
$(function fixedPackage(){
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
//Adds TOP margin to #main_wrapper (required)
$(editor).css('position',((p)>start) ? 'relative' : 'static');
$(editor).css('top',((p)>start) ? '88px' : '');
});
});
Now for the issue at hand. I have another script function that calls a modal pop-up (which again works as it should). However, it's not slick from a UI perspective when I scroll the page when the modals open. So I want to disable the script above when the modal script below is called. In other words, when I click to open the modal pop-up, the script above shouldn't work.
$(function () {
var setUp = $('.setupButton');
// SHOWS SPECIFIED VIEW
$(setUp).click(function () {
$('#setupPanel').modal('show');
//PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
$(setUp).unbind('click',fixedPackage);
});
})
As you can see above, I tried to unbind the scroll function (the first code snippet), but this is not correct.
These two scripts are in two separate js libraries.
I strongly disagree that you ought to be binding and unbinding the event. There's no need! A little logic in your scroll event to check to see if the modal is open should take care of the issue:
$(function fixedPackage(){
$(window).bind("scroll", function() {
// if the modal is displayed, do nothing
if ($('#setupPanel').is(':visible'))
return;
// -- existing code here --
});
});
This way, if the modal element is visible, the code simply stops where it is. Once you hide the element, the code will continue to work as before without having to manage the state of event in some other script... confusing!
Also, as mentioned in some other comments, don't use $.event.add, use the public API method bind
Documentation
jQuery is - http://api.jquery.com/is/
jQuery visible selector - http://api.jquery.com/visible-selector/
jQuery bind - http://api.jquery.com/bind/
When you store a jquery object into a var you can call functions directly:
var setUp = $('.setupButton');
var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');
setUp.click(...);
seTup.unbind(...);
editor.css(...);
div.css(...);
all you need to do is change your script to:
$(function () {
var setUp = $('.setupButton');
// SHOWS SPECIFIED VIEW
$(setUp).bind('click',function () {
$('#setupPanel').modal('show');
//PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
$(setUp).unbind('click');
});
})
As explained in the jQuery Docs, Event handlers attached with .bind() can be removed with .unbind() . For more information about bind and unbind:
.bind()
.unbind()
try
$(setUp).unbind('click').die('click')