I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
I'm using a button to reveal the popover which contains the above content:
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$('#link').click(function() {
alert('beep');
});
});
However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?
Reference: Popovers in Bootstrap
You do not need to perform Event delegation here.Instead use $('#popover-content') instead of $('#popover-content').html() while setting the content. This will have the events registered attached by default without requiring any delegation.
Demo
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content'); //<-- Remove .html()
}
});
$('#link').click(function() {
alert('beep');
});
});
You can try this:
$(document).on('click', '#link', function(){
alert('beep');
});
You can mannuly use popover:
html
<div id="popover-wrapper">
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
<div class="popover right popup-area popover-pos">
<div class="popover-content">
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
</div>
</div>
</div>
css
#popover-wrapper {
.popover {
left: auto;
right: 0;
width: 250px;
top: 35px;
.popover-content {
// ..
}
}
&.open .popover {
display: block;
}
}
js
$('#trigger').hover(function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).addClass('open');
next();
});
}, function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).removeClass('open');
next();
});
}
);
Related
I have this code:
$(function() {
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
return false;
});
});
Which works great and shows the '.toggle4' div but I want to hide it again when clicking outside/away from it.
So I added this:
$(document).click(function() {
$(".toggle4").hide();
});
Which works but it hides the div even when I click inside of the '.toggle4' div (it's an input box for a search form).
Any ideas? Thanks.
That's because when you click inside of .toggle4 that click event bubbles up the DOM and triggers the event you bound to the document. You should be able to fix that with something like:
$('.toggle4').click(function(e){
e.stopPropagation()
})
One possibility is to prevent the click event from bubbling up to the document if it took place inside the toggle.
$(function() {
$('#searchField').click(function() {
$('#toggle').slideToggle('fast');
return false;
});
});
$(document).click(function() {
$("#toggle").hide();
});
$("#toggle").click(function(e) {
e.stopPropagation();
});
#toggle {
width: 100px;
height: 100px;
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchField">
<div id="toggle" class="toggle4"></div>
I'm attempting to put a bootstrap popover inside another popover. The first popup functions correctly (opens and has the HTML content specified) but the second, while opening properly seems to not have any of the settings I set enabled (html:true, trigger:'manual', or the html content). See the demo below:
Fiddle
<div>
Click
<div id="popover_content_wrapper1" style="display: none">
Click again
</div>
<div id="popover_content_wrapper2" style="display: none">
<b>Hello world</b>
</div>
</div>
$('#popover1').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper1').html();
}
});
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
});
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
$(document).on('click', '#popover2', function() {
$(this).popover('toggle');
});
I'd appreciate any tips/help.
Thanks!
That happens because at the time you initialize #popover2, it still doesn't "exists". It will only exists once the #popover1 is toggled.
So, you have to initialize it every time you toggle #popover1, because when it hides, it is removed from DOM (children included)
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
});
http://jsfiddle.net/kg7nyo6e/1/
As bootstrap does not support popover inside a popover, I have initialised popover inside the content of the first popover. You can simply add following javascript code in the first popover content as follows.
<script>
jQuery(function () {
jQuery('[data-toggle="popover"]').popover();
});
</script>
Hope it can help.
I am trying to create a popup section that contains a form for someone to enter their email address when someone clicks on a link that says 'Mailing List.' The trouble is that when I click the link, the section doesn't appear. It works when I set it to hover but not click. I've run out of ideas on how to debug this. What am I missing?
HTML
<form class="mailing-list-input pull-right">
<input type="text" placeholder="Email Address" class="mailing-list-input">
<button class="mailing-list-btn">
<img src="/assets/arrow.png" style="height: 12px; width: 12px; margin-right: 6px;">
</button>
</form>
<footer class="footer footer-style">
<section class="container pull-right">
<ul class="list-inline btm-list">
<li class="btm-menu-width">
<a href="/" class="btm-menu-heading mailing-list">
Mailing List
</a>
</li>
</ul>
</section>
</footer>
CSS for .mailing-list-input
.mailing-list-input {
margin-right: 10rem;
display: none;
z-index: 98;
position: fixed;
bottom: 5rem;
right: 0;
}
Jquery File
$(document).ready(function() {
$(".mailing-list").click(function() {
$(".mailing-list-input").css('display', 'block');
},
function() {
$(".mailing-list-input").css('display', 'none')
})
})
The click function only accepts a single handler function. To achieve the behaviour you want, use a single handler and toggle() the element. Try this:
$(".mailing-list").click(function(e) {
e.preventDefault();
$(".mailing-list-input").toggle();
});
Example fiddle
Note I also added preventDefault() to stop the default link behaviour.
Based on what the OP appears to be trying to do this should be the Javascript:
$(".mailing-list").click(function(e) {
e.preventDefault();
if ($(".mailing-list-input").css('display') === 'block') {
$(".mailing-list-input").css('display', 'none');
} else {
$(".mailing-list-input").css('display', 'block');
}
});
The click handler callback takes an argument that is the event object, you can call preventDefault on that object to stop the event from continuing through its lifecycle. Then if you want the link to toggle the element on every click you check to see if the element is visible or not and set its value accordingly.
Here is a working fiddle
http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>
I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?
If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo
Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
You can use css for this,
.parent_div:hover .hotqcontent {display:block;}
This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/
With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();
$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE
you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});