I want to set content of qTip2 with a div. The first show event (mouseover) shows the div correctly. However, after I trigger hide event (mouseout), the div is cleared and qTip2 shows a blank tooltip.
By using firebug, I noticed that as I mouseover, the div is copied to the qtip and after mouseout is triggered, it's gone forever.
jquery clone is an option, I tried that but my div consists of a DataTables object so the pagination stops working after clone.
I need to find a way to make qtip not remove the div item after it's copied to it. I need a hide/show mechanism I suppose. What do you suggest?
Thanks,
content: function()
{
var qtipItem = this.id();
var item = "#"+qtipItem+"_Detailed";
var div_item = $("#detailedDiv").find(item);
return div_item;
}
Not a great solution but here is how I handled the issue:
Re-create the div that is destroyed by qtip hide event...
events: {
hide: function(event, api) {
if (qtipItem != null && detailedData != null && isqtipEmpty == false) //re-create hidden(destroyed by qtip2) table
contructDetailedRes(qtipItem, detailedData[qtipItem]);
}
},
Related
I have a table. Each column has a button at the top. If the td elements below within the column have content in them, then hide the button. If not then display the button and onClick add class active too the td element.
$(document).ready(function (){
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
$(this).hide();
else
$(this).show();
});
<!-- Fill in the td -->
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
$(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
//});
});
});
http://jsfiddle.net/ujw0u6au/
I've created a jsfiddle. I don't know what i'm doing wrong? Thank you
Since you have bind the button toggle logic inside button click - you will always have the button in the starting. When you will click on the button only then it will first hide the button and then make the content active.
In case you want this behavior in the starting as soon as the page loads, you should change below line (the 2nd line in your code) from your code -
$('.button-fill').on("click", function() {
to
$('.button-fill').each( function(i,e) {
also, you should not use <!-- Fill in the td --> style of commenting in JavaScript.
I can see you are having two "click" event handler on same class. Instead of it, you can merge it as well.
Here is the optimized version of your code :
JavaScript :
$(document).ready(function (){
$('.button-fill').on("click", function() { //Only one click event handler
var $this = $(this);
var i=$this.parent().index();
var $trSibling = $this.closest("tr").siblings();
$this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.
})
$(".button-fill").trigger("click");
// explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});
JSFiddle link : http://jsfiddle.net/ujw0u6au/1/
Is this the same what you want?
#Vijay has the right answer, but as a side note, you need to change this:
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
to this
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")
if you want to hide the button when there is content, instead of the other way around (notice the != near the end).
In Masonry, it is possible to delete an element by clicking on it. The catch is, that You have to click directly on that element - so if you use these "bricks" as an image gallery (as long as these photos are included as a background image) You can delete them, by clicking on the element. The problem is, when you use these as some messages/info/other content containers. Then, due to formatting-related stuff the parent element gets "hidden" behind other tags, and You can't actually click on it.
The problem is shown here:
http://jsfiddle.net/dan1410/SfU5T/
You can close red boxes, but not green ones, as they are overlapped by another elements.
I've tried code like:
eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'closeable' ) ) {
return;
}
// remove clicked element
msnry.remove( event.target );
// layout remaining item elements
msnry.layout();
});
});
and
var todelete = document.querySelector('.closeable');
eventie.bind( container, 'click', function( event ) {
// remove clicked element
msnry.remove( todelete );
// layout remaining item elements
msnry.layout();
});
});
but You still have to click directly on the element You'd like to close...
My masonry content structure looks like
<div id="masonry" >
<div class="item blue closeable">
<div id="itheader"><h2 class="secsectiontitle">Space available</h2></div>
<div id="itcontent">
some statistics here...<br/>
and here, too
</div>
</div>
Only elements with .closeable class are supposed to be closeable.
So, the question is: how to close an element using a button/a link?
I'm not very familiar with JS, so I'd like to ask You guys for help. Thank You in advance!
Unless there are handlers that stops the propagation of the click event on children elements, the click event should bubble up without any issues.
Also, if you are using jQuery, you should use the jQuery Masonry's API.
Note: I couldn't access your fiddle and couldn't test the solution
var $container = $('#masonry').on('click', '.closeable', function (e) {
$container.masonry('remove', e.currentTarget);
$container.masonry(); //layout
$container.masonry('reloadItems'); //OP said it was also required
});
I have a pretty simple jQuery draggable/sortable/droppable combination going on where I'm sorting several divs, each of which contain an image wrapped in an anchor element with an href.
The problem is, when I drag a sortable item to the "trash" droppable area (to destroy it), the page sometimes changes its location and goes to the href URL from within the draggable!
I have debugged the hell out of the page and it is not any of my code causing this. The drop event happens normally and returns (I've tried returning true and false) just fine. It's something in jQuery UI's code causing the href to be fired.
It doesn't happen every time. I'm not "clicking" the element - just dragging.
Can anyone offer a suggestion please?
Example of my droppable code:
var trash = this._area_trash.droppable({
drop: this.eventtrashDrop,
hoverClass: 'highlight'
});
// ...
this.eventtrashDrop = function(event,ui) {
var o = ui.draggable;
if( typeof(o)=='object' && o!=null ) {
if( o.parents(obj._selector_stack_area).length>0 ) {
var id = parseInt(o.attr('lang'));
o.remove();
obj.eventStateRemove(id);
}
}
// Page location hasn't been changed yet!
return true;
}
EDIT: the original issue still remains, and I suspect it's some kind of bug in jQuery UI. However a workaround is to replace the anchor element with a div before destroying the sortable item so it can't change to the anchor's href:
var anchor = jQuery(o).find("a");
var img = jQuery(anchor).html();
jQuery(anchor).replaceWith("<div/>").html(img);
Sounds to me like the anchor is being triggered on the click.
You need to listen for event and prevent the default action.
Something like this:
$('a').click(function(event){
event.preventDefault();
});
I have the following scenario: On a label's mouseover event, I display a div. The div must stay open in order to make selections within the div. On the label's mouseout event, the div must dissappear. The problem is that when my cursor moves from the label to the div, the label's mouseout event is fired, which closes the div before I can get there. I have a global boolean variable called canClose which I set to true or false depending on the case in which it must be closed or kept open. I have removed the functionality to close the div on the label's mouseout event for this purpose.
Below is some example code.
EDIT
I have found a workaround to my problem, event though Alex has also supplied a workable solution.
I added a mouseleave event on the label as well, with a setTimeout function which will execute in 1.5 seconds. This time will give the user enough time to hover over the open div, which will set canClose to false again.
$("#label").live("mouseover", function () {
FRAMEWORK.RenderPopupCalendar();
});
$("#label").live("mouseout", function () {
setTimeout(function(){
if(canClose){
FRAMEWORK.RemovePopupCalendar();
}
},1500);
});
this.RenderPopupCalendar = function () {
FRAMEWORK.RenderCalendarEvents();
}
};
this.RenderCalendarEvents = function () {
$(".popupCalendar").mouseenter(function () {
canClose = false;
});
$(".popupCalendar").mouseleave(function () {
canClose = true;
FRAMEWORK.RemovePopupCalendar();
});
}
this.RemovePopupCalendar = function () {
if (canClose) {
if ($(".popupCalendar").is(":visible")) {
$(".popupCalendar").remove();
}
}
};
Any help please?
I would wrap the <label> and <div> in a containing <div> then do all you mouse/hide events on that.
Check out this fiddle example - http://jsfiddle.net/6MMW6/1
Give your popupCalendar an explicit ID instead of a class selector, e.g.
<div id="popupCalendar">
Reference it with #popupCalendar instead of .popupCalendar.
Now, remove() is quite drastic as it will completely remove the div from the DOM. If you wish to display the calendar again you should just .hide() it.
But your logic seems a bit overly complex, why not just .show() it on mouseenter and .hide() on mouseout events ?
This will close the entire tab page if the tab page loses focus.
How ever if you target it, it can work for something within the page too, just change the target codes.
JavaScript:
<script type="text/javascript" >
delay=1000 // 1 sec = 1000.
closing=""
function closeme(){
closing=setTimeout("self.close()",delay)
// self means the tab page close when losing focus, but you can change and target it too.
}
<!--// add onBlur="closeme()" onfocus="clearTimeout(closing)" to the opening BODY tag//-->
</script>
HTML:
<body onBlur="closeme()" onfocus="clearTimeout(closing)">
I am trying to show a tooltip in a mouseover event. The reason I am creating the tooltip on the fly rather than as a precursor (i.e. creating the qtip in document.ready) is that I have generated a list of items that map to a list of objects and I store the hash key for each object in the object list in a hidden element in the "li", so I grab that every time there is a mouseover on an li element.
What is important though is that I can't seem to get the tooltip to display in the mouseover, and I notice that adding the qtip is generating a lot of mouseover events that crash the browser:
$('.result-company-name').mouseover(function() {
var key = $(this).parent().parent().parent().find('.result-company-key').text();
var group = thisview.objGroup.getGroupFromKey(key);
var contacts = group.spotlight().fields.contacts;
if(!contacts)
return;
var qt = $(this).qtip(
{
content: contacts.length,
});
qt.qtip("show");
}
Any thoughts? Thanks.
Maybe you are generating an infinite loop somewhere?
Fixed by using show: { ready: true } to show the tooltip right away when I created it. Seems to be working fine.