If I hover over the span with class "fromThisSpan", how do I change the background-color of the div that contains classes row and highlightThisRow?
There are a bunch of rows in the ul, and each row has a few columns.
The span is in the last column. The span also has a hover in the css (I didn't include it here).
So far, at one point I did get the desired results, but only for the first row.
I was using id's instead of classes for the div and span.
I've added a couple of my failed attempts of my jquery below.
This is a composite outline of the structure I'm using to show where I'm going with this only.
It's not a working code. The problem I'm having is with the jquery.
[ html/razor ]
<ul>
#foreach(ItemType item in ItemCollection)
<li>
<div class="row highlightThisRow">
<div class="col-md-4">
... item.contents1
</div>
<div class="col-md-4">
... item.contents2
</div>
<div class="col-md-4">
... item.contents3
<span class="fromThisSpan">Delete</span>
</div>
</div>
</li>
</ul>
Here I was trying to attach the hover event using the .on()
[ jquery ]
$(".fromThisSpan").on("hover", $(".fromThisSpan").hover(
(new function () {
$(".highlightThisRow").css("background-color", "#fce2e2");
}),
(new function () {
$(".highlightThisRow").css("background-color", "#ffffff");
})
));
This is an SO post I found and decided to give it a try, but didn't work for me.
The source: Adding hover CSS attributes via jQuery/Javascript
[ jquery ]
$(".fromThisSpan").mouseenter(function () {
$(".highlightThisRow").css("background-color", "#fce2e2");
}).mouseleave(function () {
$(".highlightThisRow").css("background-color", "#ffffff");
});
[ UPDATE ] Solved
This was the solution that worked in my case.
$(".fromThisSpan").hover(function () {
$(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
}, function () {
$(this).closest(".highlightThisRow").css("background-color", "#ffffff");
});
Use closest to get the relative highlightThisRow of the element selected
$(function(){
$(".fromThisSpan").mouseenter(function () {
$(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
}).mouseleave(function () {
$(this).closest(".highlightThisRow").css("background-color", "#ffffff");
});
});
or:
$(function(){
$("body").on('hover','.fromThisSpan',function () {
$(this).closest(".highlightThisRow").css("background-color", "#fce2e2");
},function () {
$(this).closest(".highlightThisRow").css("background-color", "#ffffff");
});
});
demo:https://jsfiddle.net/7bgqfdkj/
try (this).parent
$("#fromThisSpan").on("hover", $("#fromThisSpan").hover(
(new function () {
$(this).parent("#highlightThisRow").css("background-color", "#fce2e2");
}),
(new function () {
$(this).parent("#highlightThisRow").css("background-color", "#ffffff");
})
));
I have droppable elements in main frame, and sortable inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable
There is what I've done:
http://jsfiddle.net/w9L3eorx/1/
Inside iframe I have
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
<script>
$('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
});
</script>
The main frame
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<iframe src="frame.html" id="frame" width="800" height="800"></iframe>
<script>
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable: $('.content', $("#frame")[0].contentDocument)
});
</script>
I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9
Here you go:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable:$('#frame').contents().find('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
})
});
FIDDLE: http://jsfiddle.net/w9L3eorx/5/
Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave)
I have changed boszlo example to fit my needs:
I need first init sortable in iframe (my dropable sidebar will appear later after some clicks)
I need re-init sortable in parent (main) frame with connected dropable but with exact the same options.
http://jsfiddle.net/w9L3eorx/8/
So in iframe I have added function
window.destroySortableAndGetOptions = function (selector) {
var opts = $(selector).sortable('option');
$(selector).sortable('destroy');
return opts;
}
Which will destroy sortable and returns options.
And in my main frame before droppable init, I destroy sortable and take options
var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');
and re-init sortable with the same options
...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...
I'm getting crazy, I try to understood Tooltip behaviour but unsuccessfully.
1. The first issue is when I try to use it in on click event by plugin (button 1) -> if you will go to Fiddle than you will see that function inside of 'content' property is called twice every click... why?
2. I want to use Tooltip bound to an element (button 2) and show it in manual mode but then it's not working at all... why?
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<br/>
I'm working! :-D <span class="badge b0">0</span>
<br/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<br/>
I'm not working! :-( <span class="badge b1">0</span>
<br/>
</div>
</div>
</div>
JS
var i = 0, j = 0;
$('.container').popover({
selector: '.btn-success',
html: true,
placement: 'right',
container: '.container',
trigger: 'click',
content: function(){
$('.badge.b0').text(j++);
return 'test';
}
});
$('.container').popover({
selector: '.btn-danger',
html: true,
placement: 'right',
container: '.container',
trigger: 'manual',
content: 'test'
});
$('.container').on('click', '.btn-danger', function(){
$('.badge.b1').text(i++);
$(this).popover('show');
});
FIDDLE
http://jsfiddle.net/gepbmonh/8/
$('#add').click(function () {
addButton()
})
var ind = 0;
// adding buttons
function addButton() {
ind++;
// creating button
$button = $('');
$button.text('I\'m not working! :-( ' + ind);
$button.addClass('btn btn-danger has_popover');
$button.attr('data-html', 'true');
$button.attr('data-placement', 'left');
$button.attr('data-trigger', 'manual');
$button.attr('data-content', 'test ' + ind);
// creating badge
$span = $('<span class="badge b' + ind + '">0</span>');
$wrap = $('<div></div>');
$wrap.append($button).append($span);
// add to the stage
$('#buttons').append($wrap);
}
//inclick event
$('.container').on('click', '.has_popover', function () {
// find an appropriately badge
$badge = $(this).parent().find('.badge');
// get current value
var i = $badge.text();
i = parseInt(i);
// increase for one
i++;
$badge.text(i);
//showing popover
$(this).popover('show');
});
1) It isn't called twice every click, it is called once every click, but it is also counting the click that makes it go away, just the text only updates every other click.
2) I'm not really sure what you mean by this, could you explain further and I will edit my post.
I have some markup similar to below, and I am trying to hide the "some_row" TR's.
<div id="sortable">
<table>
<tr><td>Some Title 1</td></tr>
<tr class="some_row"><td><textarea ...></td><tr>
</table>
<table>
<tr><td>Some Title 2</td></tr>
<tr class="some_row"><td><textarea ...></td><tr>
</table>
</div>
Here is what I have tried:
$(function () {
$("#sortable")
.sortable({
helper: function (e, o) {
o.find("#some_row").hide();
return o;
},
start: function () {
$(".some_row").hide();
},
stop: function () {
$(".some_row").show();
}
})
.disableSelection();
});
Initially i started with just start and stop events, then I added helper because the, what i am guessing is a cloned selected row, had a hidden some_row div but the same height.
Anyways, the above works as far as style perfectly, however it appears the widget is still taking into account the original heights of the surrounding divs.
Is there anything I can do to salvage this idea?
You need to call the hide on .somerow before the helper is returned.
The helper is a clone of the original div and what you see being dragged. So when you hide the rows the clone has already been created.
The refresh that runs after start is done to reload the sortable objects to adjust for the new height.
Fiddle Example
$(function () {
$("#sortable")
.sortable({
cursor: 'move',
cursorAt: { left: 0, top: 10 },
helper: function (e, o) {
$(".some_row").hide();
o.find("#some_row").hide();
return o;
},
start: function () {
$( "#sortable" ).sortable( "refresh" );
},
stop: function () {
$(".some_row").show();
}
})
.disableSelection();
});
Also you can define the cursor position when dragging (relative to the helper) and the cursor type that displays when hovering using the cursor and cursorAt options of the jqueryui sortable api
I have a link that uses the Twitter Bootstrap Popover version 1.3.0 to show some information. This information includes a link, but every-time I move my mouse from the link to the popover, the popover just disappears.
How can I hold popover open long enough to enable the mouse to move into it? Then when the mouse moves out of the link and popover, hide it?
Or is there some other plugin that can do this?
With bootstrap (tested with version 2) I figured out the following code:
$("a[rel=popover]")
.popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'left',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
});
The main point is to override template with mouseleave() enabler. I hope this helps.
Bootstrap 3 and above
Simple, just use the container option and have it as the element that is calling the popover. This way, the popover is a child of the element that calls it. Hence, you are technically still hovering over the parent, because the child popover belongs to it.
For example:
HTML:
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
jQuery:
Running an $.each() loop over every one of my elements that I want a popover binded to its parent. In this case, each element has the class of pop.
$('.pop').each(function () {
var $elem = $(this);
$elem.popover({
placement: 'top',
trigger: 'hover',
html: true,
container: $elem
});
});
CSS:
This part is optional, but recommended. It moves the popover down by 7 pixels for easier access.
.pop .popover {
margin-top:7px;
}
WORKING DEMO
Just to add to Marchello's example, if you want the popover to disappear if the user moves their mouse away from the popover and source link, try this out.
var timeoutObj;
$('.nav_item a').popover({
offset: 10,
trigger: 'manual',
html: true,
placement: 'right',
template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
$(this).popover('show');
}).mouseleave(function(e) {
var ref = $(this);
timeoutObj = setTimeout(function(){
ref.popover('hide');
}, 50);
});
This is a little hacky, but building off of marchello's example, I did this (no need for template):
$(".trigger-link").popover({
trigger: "manual",
}).on("click", function(e) {
e.preventDefault();
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
The setTimeout helps ensure that there's time to travel from the trigger link to the popover.
This issue on the bootstrap github repo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.
HTML:
<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
CSS:
/*CSS */
.myClass{ position: relative;}
JS:
$(function(){
$('.myClass').popover({placement: 'in top'});
});
Solution worked for us for Bootstrap 3.
var timeoutObj;
$('.list-group a').popover({
offset: 10,
trigger: 'manual',
html: true,
placement: 'right',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
$(this).popover('show');
}).mouseleave(function(e) {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
Here's my take: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations – as long as you reach popover content before the timeout fires, you're save (the popover won't disappear). It requires delay option.
This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.
If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
Finally I fix this problem. Popover disappear is because Popover not child node of link, it is child node of body.
So fix it is easy, change bootstrap-twipsy.js content:
change .prependTo(document.body) to .prependTo(this.$element)
and fix position problem cause by change.
and some use link tiger popover will cause popover with link too, so add a span contain link, so problem solved.
This is a version of Wojtek Kruszewski solution. This version handle popover blink when mouse go back to trigger. http://jsfiddle.net/danielgatis/QtcpD/
(function($) {
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
originalLeave.call(this, obj);
if (obj.currentTarget) {
var current = $(obj.currentTarget);
var container = current.siblings(".popover");
container.on("mouseenter", function() {
clearTimeout(self.timeout);
});
container.on("mouseleave", function() {
originalLeave.call(self, self);
});
}
};
var originalEnter = $.fn.popover.Constructor.prototype.enter;
$.fn.popover.Constructor.prototype.enter = function(obj) {
var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
clearTimeout(self.timeout);
if (!$(obj.currentTarget).siblings(".popover:visible").length) {
originalEnter.call(this, obj);
}
};
})(jQuery);
I tried the solutions from #Wotjek Kruszewski and #danielgatis, but neither worked for me. Caveat: I'm using Bootstrap v2.1.0, not v3. This solution is in coffeescript (why are people still using plain javascript? =)).
(($) ->
originalLeave = $.fn.popover.Constructor::leave
$.fn.popover.Constructor::leave = (e) ->
self = $(e.currentTarget)[#type](#_options).data(#type)
originalLeave.call #, e
if e.currentTarget
container = $(".popover")
container.one "mouseenter", ->
clearTimeout self.timeout
container.one "mouseleave", ->
originalLeave.call self, e
) jQuery
Here is what i did:
e = $("a[rel=popover]")
e.popover({
content: d,
html:true,
trigger:'hover',
delay: {hide: 500},
placement: 'bottom',
container: e,
})
This is a very simple and awesone solution to this probelm, which i found out by looking into the bootstrap tooltip code. In Bootstrap v3.0.3 here is the line of code i noticed:
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
this says that if container property of popover is defined then the popover gets appendTo() the element instead of insertAfter() the original element, all you need to do is just pass the element as container property. Because of appendTo() the popover becomes part of the link on which the hover event was binded and thus keeps the popover open when mouse moves on it.
This works for me on BootStrap 3:
el.popover({
delay: {hide: 100}
}).on("shown.bs.popover", function(){
el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){
setTimeout(function(){
el.popover("hide");
}, 100);
});
}).on("hide.bs.popover", function(ev){
if(el.data("bs.popover").tip().is(":hover"))
ev.preventDefault();
});
At the end of the conversation linked by #stevendaniels is a link to a Twitter Bootstrap extension called BootstrapX - clickover by Lee Carmichael. This changes the popover from an overlarge tooltip into an interactive control, which can be closed by clicking elsewhere on the form, a close button, or after a timeout. Its easy to use, and worked very well for the project I needed it in. Some examples of its usage can be found here.
I didn't like any of the answers I've found, so I combined some answers that were close to make the following code. It allows you to end up just typing $(selector).pinnablepopover(options); every time you want to make a 'pinnable' popover.
Code that makes things easy:
$.fn.popoverHoverShow = function ()
{
if(this.data('state') !== 'pinned')
{
if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden')))
{
this.popover('show');
}
}
};
$.fn.popoverHoverHide = function ()
{
if (this.data('state') !== 'pinned')
{
var ref = this;
this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100))
.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) })
.on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) });
this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) });
}
};
$.fn.popoverClickToggle = function ()
{
if (this.data('state') !== 'pinned')
{
this.data('state', 'pinned');
}
else
{
this.data('state', 'hover')
}
};
$.fn.pinnablepopover = function (options)
{
options.trigger = manual;
this.popover(options)
.on('mouseenter', function(){ $(this).popoverHoverShow() })
.on('mouseleave', function(){ $(this).popoverHoverHide() })
.on('click', function(){ $(this).popoverClickToggle() });
};
Example usage:
$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});
After seeing all Answer I made this I think it will be helpful .You Can manage Everything which you need.
Many answer doesn't make show delay I use this. Its work very nice in my project
/******
/*************************************************************/
<div class='thumbnail' data-original-title='' style='width:50%'>
<div id='item_details' class='popper-content hide'>
<div>
<div style='height:10px'> </div>
<div class='title'>Bad blood </div>
<div class='catagory'>Music </div>
</div>
</div>
HELLO POPOVER
</div>"
/****************SCRIPT CODE ****************** PLEASE USE FROM HEAR ******/
$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;
$('.thumbnail').each(function () {
$(this).popover('hide');
});
setTimeout(function(){
if ($(_this).is(':hover')) {
$(_this).popover("show");
}
},1000);
$(".popover").on("mouseleave", function () {
$('.thumbnail').each(function () {
$(this).popover('hide');
});
$(_this).popover('hide');
}); }).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100); });
Now I just switch to webuiPopover, it just works.