I have an element
<span id="1">Element</span>
and made it as popover enabled element by initializing bootstrap popover using javascript
$('#how2').popover({
html:true,
placement:"right",
trigger:"click",
content:"somecontent",
title:"sometitle",
});
Then in "somecontent", I have a <script></script> whose content is
$(".popover-close-button").click(function(){
$(this).parent().parent().remove(); //remove the .popover element
});
whose function is giving a click listener to a X (close) button defined in "sometitle" to remove the whole ".popover" element created.
Toggle works. If id="1" element is clicked, it shows the popover. When it is clicked again, popover hides. The problem comes when the X button is clicked. The popover does hide (removed actually), but, when id="1" element is clicked to make the popover shows up, nothing happens. A popover will only shows up at the second click.
I will be happy to know why such thing happens. Does bootstrap make use of global javascript variable to determine the on/off status of the popover?
Note: $(this).parent().parent().remove(); is chosen over $("#1").popover("hide") for a DRY purpose. The content loaded inside popover is expected to be used in other places also. Therefore, putting "#1" there, is unacceptable.
try
.closest()
$(".popover-close-button").click(function(){
$(this).closest('.popover').remove(); //remove the .popover element
});
or
.parents()
$(".popover-close-button").click(function(){
$(this).parents('.popover').remove(); //remove the .popover element
});
You can also use $(elem).popover(destroy);
$('.popover-close-button').click(function() {
$('#how2').popover('destroy');
});
This removes the popover all together so that it won't be able to be triggered by another click.
See the docs here: http://getbootstrap.com/javascript/#popovers
Add these libraries
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Code For Pop over
<div class="container">
Click me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Related
I use Jquery toggle method to view a div when a button is clicked
$("button").click(function(){
$("#divId").toggle();
});
Works fine but the initial value is set to be viewed or as the css property display:block so when the page initially loads the div is viewed and I have to click the button to close it.
what other answers suggested is that I change the css property but I do not want that as that will hide the div and if the user had their javascript not working for any reason, that would not be good.
So I want to hide the div initially with javascript and then comes Jquery's toggle method working normally. I tried document.getElementById(divId).style.dsplay="none" and put it right before the toggle method, but that makes the toggle not work and just hides the div.
You may set initial value to hide the div by this way:
$(document).ready(function(){
$("#divId").hide();
$("button").click(function(){
$("#divId").toggle();
});
});
After you click the button. it will toggle to open the page.
Try this to hide div on page load:
$(document).ready(function(){
$("#divId").hide(); //or .toggle()
});
[UPDATE]
Or if you have more advanced logic on click event and you want it to also run on load:
$(document).ready(function(){
$("button").trigger('click');
});
I'm stuck with my dropdown menu.
I want it to open when I click the Nav-Button "clicker". Then it shall close when I click "clicker" again.
I want it to show/hide only when clicking the Image. It shall stay open when I click inside the hidden div.
But that doesnt work. I dont know why. Tried so many things. Any idea? (Total noob here).
HTML:
(Click on "#clicker" Image = Toggle Dropdown; "#dropdown-inside" = hidden div;
<div class="header_content">
<div class="navbar">
<div id="dropdown-menu">
<img id="clicker" src="http://porschedvd.de/bluptest/typo3/fileadmin/stromer/template/pix/menu_btn.jpg" alt="">
<ul id="dropdown-inside">
JQuery:
$j('#clicker').click(function() {
$j('#clicker').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideToggle("slow");
});
$j('#clicker').blur(function() {
$j('#dropdown-inside').hide('slow', function() {
});
});
Fiddle here: http://jsfiddle.net/377G6/2/
I have read your code and tried to run it.
Now you have 2 points to fix:
Your selector $j(this).children(ul) can't find the list.
The list ul is a sibling element of your #clicker, so you can use the method siblings('ul') or next() to select the list, but not children()
the event 'blur' can't be triggered now.
Generally, the event blur could only be triggered on input or textarea, so if you want to trigger the blur on <img> or <div>, you may set an attribute like tabindex="-1" to it.
As I tried, it runs successfully after the fix.
Here is the link: http://jsfiddle.net/edisonator/kfcB9/
Thanks,
Edison
alrighty Ive got what I hope is a rather easy question today for people knowledgeable in jquery. I have an toggle that activates on clicking a specific element, in this case I have targeted my logo image with an id of #logobutton. it works wonderfully however theres a problem, the animation also activates whenever I click on any and all other links on the page and even some random div boxed (like my nav bg). please note im very new to this javaScript jazz so I may be missing something you would consider quite obvious. thanks for the help!
here is the fiddle with all relevant code http://jsfiddle.net/tRf36/1/
jquery:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
hopefully someone can see if I have something targeted incorrectly or whatever is causing the issue of my generic rather than specific selection of clickable area to activate this bg animation.
My previous answer was completely off base, sorry for that. Looking at the jsfiddle that you posted it appears that you have the logo button like this <button ... /> the browser is then ignoring the /> and just wrapping everything in a button. So that means that both the gallery box and the nav bar are surrounded by the button that is activating the animation. Changing the button to be like this should fix it:
<button type="button" class="logo" id="logobutton" value=""></button>
close <button> tag properly using </button>
All elements below button are treated as children if you do not close properly.
Two aspects conspire to cause the effect:
You have nested your nav bar divs inside the #logobutton button.
Event bubbling causes events triggered on an embedded element to eventually reach the #logobutton button, being processed by the registered event handler.
A solution is to check for the triggering element of the click event:
$("#logobutton").click(function (eve) {
if ($(eve.target).attr("id") === "logobutton") {
$(".galbox").toggleClass("galbox-change");
}
});
You can test this modification with this fiddle.
You can learn more about event bubbling in particular and event processing in browsers following these links:
quirksmode (ppk)
MDN
i have link and on link hover display div when leave cursor form div and link hide div using jQuery. i have code for display it, how can i hide it while i leave cursor from these link and div.this is my html code.
2 items
<div id="dropcart">contents</div>
<script type="text/javascript">
$(document).ready(function(){
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
});
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
$("#dropcart").mouseleave(function(){
if($("#show_div").is(':hover') === false)
$("#dropcart").fadeOut("fast");
});
demo
EDIT: (For the downvoters and OP)
I misunderstood the question. My suggestion, then, would be to use timeouts.
.hover(function(){ clearTimeout(window["timeoutVar"]); $("#dropcart").fadeIn(); },function(){window["timeoutVar"]=setTimeout(function(){ $("#dropcart").fadeout(); },50);});
Then apply that .hover to the div, also. That way, the div will fade out after a 50-millisecond delay IF the user does not hover over it, which will cancel the timeout (and prevent the fadeout).
Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/
First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});
I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});
fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});