I am using the qtip jquery plugin, and ran into a strange problem. I have a large "tooltip" that scrolls. fiddle here: http://jsfiddle.net/yu9tb1wn/
In firefox if I click and try to select text, the div will scroll when I leave through the top or bottom. This is expected and desired because that's how most windows behave.
However in IE and Chrome the tooltip disappears, because it is supposed to disappear on mouseleave.
How can I get IE and Chrome to behave like Firefox? Maybe there are some events I need to use that I'm unaware of.
If you try that fiddle in the different browsers, try to select all the text and you should see the behavior I'm talking about.
simple qtip code:
$('a[title]').qtip({
hide: {
delay:250,
fixed: true,
}
});
I manage to make this work on Chrome : http://jsfiddle.net/d6b5wmLk/12/
var b = true;
$('a[title]').qtip({
hide: {
delay:250,
fixed: true,
},
events: {
hide: function(event, api) {
if(!b) {
event.preventDefault();
}
}
}
});
$( "html" ).mousedown(function() {
b = false;
});
$( "html" ).mouseup(function() {
b = true;
$('a[title]').qtip('hide');
});
i was looking and the library and i believe that you can increment the delay a little more to achieve that. But besides that i don't see any other way without modifying the library
Related
I am using a BJQS slider on my website.
I am also using fancybox on the same website.
I would like BJQS to pause when the fancybox is open and resume when closed.
Does anyone know how I could create a pause/play toggle button for BJQS?
Thanks
fancybox comes with some callbacks, so you should be able to do something like:
Adopting Lee and Edwards idea about virtual hovering..
$(".fancybox").fancybox({
padding : 0,
openEffect : 'elastic',
closeEffect: 'elastic',
beforeLoad: function(){
$(".banner").trigger("mouseover");
},
afterClose: function(){
$(".banner").trigger("mouseout");
}
});
Without editing the source file to provide either a method to pause the slider, or add in a button you can hide and trigger a click on, the quickest method is to trigger the mouse events that cause the slider to pause.
Looking at the demo, you can see that when you mouseover the slider, the slider stops animating until you move your mouse outside of it. Therefore you can simulate these events.
Assuming your slider div is #slider like the demo on the BJQS site, you would do:
On fancybox open
$('#slider').trigger('mouseover');
On fancybox close
$('#slider').trigger('mouseout');
Go here: http://fancybox.net/api to see how to define open/close callbacks (see near bottom of first table, the "on" options)
I check the plugin but I cant' find any method to pause/play the slider.
I see an option called:
hoverpause : true, // enable/disable pause slides on hover
So we can "hack" in this way using it by triggering the over state on the slider itself:
var stopbjqs = false;
$(function () {
$('#dialog').bjqs({
'showmarkers': false,
'responsive': true,
'automatic': true
});
$("#btn").click(function () {
if (!stopbjqs) {
$("#dialog").trigger("mouseover");
stopbjqs=true;
} else {
$("#dialog").trigger("mouseout");
stopbjqs=false;
}
});
});
But it will be definitely better to have some methods to manipulate the slider.
Demo: http://jsfiddle.net/IrvinDominin/P8UgQ/
Came across this whilst trying add a play/pause button to the plugin. #Irvin Dominin's suggestion relating to hoverpause is good but it will fail as soon as you hover the banners as the mouseover/mouseout is triggered.
I decided to extend the plugin with a new setting and turn off hoverpause.
First add the setting to the defaults object e.g.
// slider default settings
var defaults = {
enableplaypause: false // shows play/pause button
};
Next you'll want to set the click binding to your button, this is done in the init() function e.g.
// run through options and initialise settings
var init = function () {
// configurations only avaliable if more than 1 slide
if (state.slidecount > 1) {
//enable play/pause button using setting we defined earlier
if (settings.enableplaypause) {
conf_enableplaypause();
}
}
};
Now for the conf_enableplaypause(); function which handles the state + button bindings:
var conf_enableplaypause = function () {
$('#btn').click(function () {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
$('#btn').text('PAUSED');
} else {
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
state.paused = false;
$('#btn').text('PLAYING');
}
});
};
Pretty straightforward and is essentially a copy of what hoverpause does except on a button click along with updating the button text.
Hopefully this helps someone
I want to show a popup many on click. I want that many to be in a bubble. So I created a demo: here. But that Bubble generator plugin i use tends to keep tons of trash in the DOM each time it shows a popup. Well so I tried to destroy trash via
$('.grumble-text').remove();
$('.grumble').remove();
$('.grumble-button').remove();
But it somehow brakes it at all=( So how to change grumble-bubble popup plugin code to make it either keep DOM clean or at least make plugin independent of trash it creates?
I've recently updated the plugin to provide better control of positioning and angle. The update also persists the grumble, invoking the plugin more than once on an element will not create extra left over DOM.
Try updating to the latest code. The code below should now work as you expect.
var html = ''
+'Download me'
+'<br/>'
+'Edit me'
+'<br/>'
+'Delete me';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
$grumble.grumble({
text: html ,
angle: (Math.random() * 360 + 150),
distance: 30,
hideOnClick: true,
onShow: function() {
$grumble.addClass("hilight");
},
onBeginHide: function() {
$grumble.removeClass("hilight");
}
});
}).mousedown(function() {
$grumble.addClass("hilight");
});
Thanks for your interest. If there are any further problems please raise them as bugs on the github page. https://github.com/jamescryer/grumble.js
Use the grumble and button parameters on the onHide callback like this:
$('#grumble').grumble({
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
onHide: function(grumble, button) {
grumble.bubble.remove();
grumble.text.remove();
button && button.remove();
}
});
This allows you to remove only the "trash" (I prefer "leftovers") associated with that specific tooltip/popup/bubble. Note that button only exists if hasHideButton is true, hence the button && existence check.
Why do you want to remove it? Is the 'trash' causing problems with browser performance?
In general, the only way to do this is to dig into the plugin source and add a function to remove the plugin, if one is not already present. If you just remove the related DOM elements you will leave behind references to them and events handlers that access them.
I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:
$("span.menu_head").hover(function(){
$(this).next().slideDown('medium');
}, function(){
});
$("ul.menu_body").hover(function(){
}, function(){
$(this).slideUp('medium');
});
So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?
Thanks,
Paul
I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).
I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.
var overBody = false;
function mnuOpen() {
$(this).next().slideDown('medium');
}
function mnuClose() {
if (!overBody) {
$(this).next().slideUp('medium');
}
}
var headConfig = {
over: mnuOpen,
timeout: 250,
out: mnuClose
}
$("span.menu_head").hoverIntent(config);
$("ul.menu_body").hover(function(){
overBody = true;
}, function(){
overBody = false;
$(this).slideUp('medium');
});
This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.
Paul
I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)
The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);
Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;
I've been trying to get Zero Clipboard and jQuery UI Dialog to play nice together, and it's proving to be rather difficult.
Zero Clipboard allows copying to clipboard from Javascript by placing a transparent Flash movie over a button, so that the user clicks on the Flash when he tried to click the button. This works nicely and cross-browser as you can see in the demo page.
However, when trying to use this in a jQuery UI Dialog box something seems to go wrong.
First, I discovered that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means I can't use the glue convenience method, but that's OK.
However, now IE for some reason won't accept the setText method on the Flash element.
An example of what I did is here. My code starts around line 300, and the most relevant lines are:
$("#showme").dialog({autoOpen: false, width: 550, height: 200});
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.html(clip.getHTML(btn.width(), btn.height()))
.appendTo("#showme");
}
});
I colored the div red so it's easier to spot and set its z-index to 9999, just to be safe. I then set the position and size to cover the "button", and add the HTML for the Flash element with clip.getHTML().
I've been working on this for several hours now, so any help would be greatly appreciated.
Almost forgot: my problem is that IE7 says "Object does not support this property or method" inside the Zero Clipboard code.
UPDATE
powtac's comment points to something that looks really promising:
I forgot the own golden rule: In
order for the Flash ExternalInterface
to work in IE 7, you have to stuff the
EMBED/OBJECT HTML into the DIV element
AFTER it gets appended to the DOM. Stupid IE.
However, switching the lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") didn't help. Even doing a setTimeout for adding the flash HTML later did not help. I feel like I'm really close, though...
OK, so powtac did point me in the right direction, but there was one element missing: using the jQuery html() function did not have the same effect as simply setting innerHTML. If would be nice if somebody could explain why.
So, the fixed code looks like this:
$("#showme").bind("dialogopen", function() {
if($("#clipflash").length == 0) {
var btn = $("#d_clip_button");
$("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />")
.css(btn.position())
.width(btn.width())
.height(btn.height())
.appendTo("#showme")
[0].innerHTML = clip.getHTML(btn.width(), btn.height());
}
});
Also, I forgot to put DOCTYPE in the example page, so the offsets are wrong in IE. My bad.
I adapted your answer to a reusable method, and fixed a few position issues (I had to add position:absolute, and use outerWidth() and outerHeight().
Demo.
function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){
var copiedText = $(selector).text();
ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.setText(copiedText);
clip.addEventListener('complete', callback);
$(buttonSelector).each(function(){
clip.glue(this);
});
// Make sure Zero Clipboard is on top
$("#ZeroClipboardMovie_1").
parent().
css("z-index", 2000);
if (opt_dialogSelector) {
$(opt_dialogSelector).bind("dialogopen", function() {
if($("#clipflash").length === 0) {
var btn = $(opt_dialogSelector).find(buttonSelector);
$("<div id='clipflash' style='position:absolute; z-index: 9999' />")
.css(btn.position())
.width(btn.outerWidth())
.height(btn.outerHeight())
.appendTo(opt_dialogSelector)
[0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight());
}
});
}
}
$(function(){
setupCopier('#copy-div', '.copy-button', function(){
alert("Copied");
}, '#dialog');
$("#open-dialog-button").click(function(){
$("#dialog").dialog("open");
});
$("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false,
title: "Create your Free Personal Bar now", height:200, width:300});
});