I have this working bootstrap popover, which works fine with time attribute.
But I want it to have the functionality of when someone has their mouse on the content it should not close and should close when mouse leaves the content.
Below is the code related to it. https://jsfiddle.net/bob_js/eLLaacju/5/
HTML
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
jQuery:
$(function () {
$("#popover-a").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-b').html();
}
});
});
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
If you mean that when the user moves the mouse on the popover, it should not close, then here is a code I use for this. Credits go to the author of this fiddle for the original idea and code.
$.fn.popover.Constructor.prototype.leave = (function(fn) {
return function(obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data("bs." + this.type);
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions());
$(obj.currentTarget).data("bs." + this.type, self);
}
var container, timeout;
fn(obj);
if (self.$tip && self.$tip.length) {
container = self.$tip;
timeout = self.timeout;
container.off("mouseenter.popover").one("mouseenter.popover", () => {
clearTimeout(timeout);
container.off("mouseleave.popover").one("mouseleave.popover", () => {
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
});
}
};
})($.fn.popover.Constructor.prototype.leave);
What it does is basically captures mouse enters on the popover, and denies closing the popover.
https://jsfiddle.net/bob_js/eLLaacju/6/
jQuery
$(function () {
$("#popover-a").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-a').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
$("#popover-b").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-b').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
});
I have updated it and this works fine, found it in stackoverflow as well.
http://plnkr.co/edit/x2VMhh?p=preview
Related
The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
i would like to know how i can prevent two containers from canceling. the codes are almost the same i just changed a few things it doesn't mater which one i put first but the second one is not working if i switched them around the one that i put first works but not the second one. I'm using toggle to display one at a time. I'm just going to post a small part of my code.
JavaScript for first part
<script>
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
JavaScript for second part
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container4',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text1', function()
{
$(this).hide(); $(this).closest('.item1').find('.edit_text1').val($(this).text()).show();
});
$(document).on("click", ".edit_text1", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text1:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item1').find('.text1').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item1' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items1=ko.observableArray();
self.textContent1 = ko.observable('');
self.init=function(){
self.items1([]);
}
self.remove=function(item){
console.log(item);
self.items1.remove(item);
}
self.addNew1 = function() {
self.items1.push( self.textContent1() );
self.textContent1('');
}
self.init();
}
ko.applyBindings(new vm());
toggle
$("#show_first").click(function(){
$(".firstdiv").toggle();
$(".seconddiv").hide();
});
$("#show_second").click(function(){
$(".secoddiv").toggle();
$(".firstdiv").hide();
});
HTML for toggle
<button type="button" id="show_first">Display Front</button>
<button type="button" id="show_second">Display Back</button>
HTML for container and input text (first)
<div class="firstdiv"><center>Front</center>
<div class="container1" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew">Create</button></p>
<div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center></div></div></div></div></div>
HTML for container and input text (second)
<div class="seconddiv"><center>second</center>
<div class="container3" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent1" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew1">Create</button></p></div>
<div id="box1" class="container4" style="float:left;">
<div data-bind="foreach:items1" class="fix_backround1">
<div class="item1" data-bind="draggable:true,droppable:true">
<center><span class="text1" data-bind="text:$data"></span><input class="edit_text1"/></center></div></div></div></div></div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
You are including jQuery, Knockout, and jQuery-UI each twice. That's probably not the problem, but it's not good.
You're using jQuery to control which block displays, and that's a Knockout no-no. It is Knockout's job to manipulate the DOM. Have a look at Knockout templates, or the if binding for ways of controlling what displays.
It looks like you have a typo in your toggle js for the seconddiv class. You're missing an 'n' in your jquery call for it: secoddiv. If this code is straight from the source that may be the problem.
.box-one {
border: 0.1em solid #ccc;
}
.dropdown-info {
display: none;
}
<div class="box-one">
<div class="header">
<h3 class="text-center">Sample Header</h3>
</div>
<div class="dropdown-info">
<p class="text-center">Sample Text</p>
</div>
</div>
I'm trying to open and close a div if another div is clicked on and I tried with both .toggle() and .click() but it won't work. I would like to get someone else's opinion on it. I will show how I tried accomplishing it using both methods
$(document).ready(function() {
var descriptionOpen = false;
if (descriptionOpen === false) {
$('.header').click(function() {
$('.dropdown-info').show();
descriptionOpen === true;
});
};
else if (descriptionOpen === true) {
$('.header').click(function() {
$('.dropdown-info').hide();
descriptionOpen === false;
});
};
});
$(document).ready(function() {
$('.header').toggle(function() {
('.dropdown-info').show();
}, function() {
('.dropdown-info').hide();
});
});
Just do this:
$('.header').click(function() {
$('.dropdown-info').toggle();
});
I am trying to figure out how to fade all divs but the one that is being hovered. here is my code so far, I can only get it to fade the one being hovered not all the onse not being hovered.
$(document).ready(function () {
$('.fadeHover').hover(
function () {
$(this).stop().fadeTo('slow', 0.3);
},
function () {
$(this).stop().fadeTo('slow', 1);
});
});
<div class="fadeHover fadeDiv">
<p>1</p>
</div>
<div class="fadeDiv fadeHover">
<p>2</p>
</div>
<div class="fadeDiv fadeHover">
<p>3</p>
</div>
check this fiddle
You can do it simply by making use of jquery not() selector and this follows
$('.fadeHover').hover(
function () {
$('.fadeHover').not(this).fadeTo('slow', 0.3);
},
function () {
$('.fadeHover').fadeTo('slow', 1);
});
$(document).ready(function () {
$('.fadeDiv').hover(function(){
$('.fadeDiv').fadeTo('slow', 0.3);
$(this).fadeTo('slow', 1);
});
});
Give this a try:
$('.fadeHover').hover(
function(){
var current = $(this);
$('.fadeHover').each(function(){
if ($(this) !== current) $(this).stop().fadeTo('slow', 0.3);
});
},
function(){
var current = $(this);
$('.fadeHover').each(function(){
if ($(this) !== current) $(this).stop().fadeTo('slow', 1);
});
}
);
Here's a fiddle:
http://jsfiddle.net/RjH4a/
$(document).ready(function () {
$('.fadeHover').hover(
function () {
$('.fadeHover').stop().fadeTo('slow', 0.3);
$(this).stop().fadeTo('slow', 1);
},
function () {
$('.fadeHover').stop().fadeTo('slow', 1);
});
});
Slash's solution works too, it's more efficient but is more code.
$(document).ready(function () {
$(document.body)
.on('mouseenter', '.fadeHover', function () {
$('.fadeHover:not(:hover)').stop().fadeTo('slow', 0.3);
})
.on('mouseleave', '.fadeHover', function () {
$('.fadeHover:not(:hover)').stop().fadeTo('slow', 1);
});
});
And this can be done with pure CSS3:
.fade-container .fade-hover {
opacity: 1;
transition: opacity .5s linear;
}
.fade-container:hover .fade-hover {
opacity: 0.3;
}
.fade-container:hover .fade-hover:hover {
opacity: 1;
}
With HTML:
<div class="fade-container">
<div class="fade-hover">
<p>1</p>
</div>
<div class="fade-hover">
<p>2</p>
</div>
<div class="fade-hover">
<p>3</p>
</div>
</div>
Hi my problem isthat the popover that shoud be in the model when toggled, are instead directing to the body behind the modal in the top left corner and not shown in the modal.
here is my index code:
<button type="button" id="example" class="btn btn-default" data-container="body"
data-toggle="popover" data-placement="right"
data-content="And here's some amazing content"
data-original-title="Hej" >
<img/>
</button>
The knouckoutbootstrap.js lookes like this:
$(function () {
$.ajaxSetup({ cache: false });
ko.bindingHandlers.showModal = {
init: function (element, valueAccessor) {
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).removeData("modal").modal();
}
else {
$(element).modal('hide');
}
}
};
$('#example').popover();
var lockerLoanViewModel = new LockerLoanViewModel();
ko.applyBindings(lockerLoanViewModel);
lockerLoanViewModel.initializeViewModel();
});
I don't know if its helpfull but here is the stylesheet:
body {
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.gridContainer {
margin-top: 30px;
}
.popover {
z-index: 1060;
position: fixed;
display:inherit;
}
If you wanna ask me something pls do i really need help with this. (sorry for bad english :D )
thanks every one i fixed it my self the solution was that i changed the script to
$(function () {
$('.openModal').on('click', function (e) {
$('#editLockerModal')
.modal({
backdrop 'static',
keyboard false
});
$('#example').popover();
});
var lockerLoanViewModel = new LockerLoanViewModel();
ko.applyBindings(lockerLoanViewModel);
lockerLoanViewModel.initializeViewModel();
});