I have used bootstrap popover function, its working now.. but i need to "dismiss" popover box if i click anywhere in the page. please check the code that i have used.
First click on the button then i need to "dismiss" popover box on clicking the black space (now its dismiss only when we clicked on the same button).
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here
<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Just use data-trigger="focus" in a tag
For more info check Dismissible popover
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here
<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
This will work
Use below javascript for dismiss popover when outside click
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
Try this
$(document).ready(function(){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
$(document).ready(function(){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
I am trying to implement close on out side click, the element is closing on outside click, but it closes also on an inside click, it should work like in the example : http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview
I dont understand, why the element.find cant find the target, when it is his child.
HTML Directive
<div class='multiDate'>
<div class="dropdown">
<button data-ng-click="show = !show" class="dropbtn">Press</button>
<div id="myDropdown" ng-show="show" class="dropdown-content">
<multiple-date-picker></multiple-date-picker>
</div>
</div>
</div>
HTML Main
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" />
<script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="cntrl">
<multi-date></multi-date>
</body>
</html>
JS
var app = angular.module("app", ['multipleDatePicker']);
app.controller("cntrl", function($scope) {
});
app.directive('multiDate', function($document) {
return {
templateUrl: 'multi.html',
replace: true,
link: function(scope, element) {
$document.bind('click', function(event) {
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup)
return;
scope.show = false;
scope.$apply();
});
}
}
});
PLNKR
The directive seems to be fine.
You just need to add $event.stopPropagation to stop outer event.
<multiple-date-picker ng-click="$event.stopPropagation(); dateClickedModelChanged()" day-click="dateClicked" ng-model="dateTimeModel"></multiple-date-picker>
Here is your modified plunker
I search on the web, but unfortunately, nothing works for me.
I tried many different ways to respond to "shown.bs.collapse" event, but it never fires.
I tried by replacing ".collapse" by "#divi", or by changing the place of the event binding from the bottom to the top, but nothing did it.
Here is my current code :
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
I just wrote a new simple html file thanks to the answer of Jaganathan Bantheswaran :
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
And it doesn't works too.
Same code works fine with the bootstrap version 3.3.7. Which version of bootstrap you are in?
Update 1
In your code sample, The event linking for shown.bs.collapse has to go down to the page. Because the none of the libs would be loaded at that time of event registration.
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
Clicking the text in div does not set bootstrap's state to pressed.
To reproduce, run the code snippet below and click in Set button to pressed state. The button is still in unpressed state but the alert shows that the checked property is set.
How to fix it, so the buttons appear in the checked state if clicked in the text inside the div ?
The Bootstrap documentation contains:
If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.
Shoud this be implemented and if yes, how ?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.designer-field').on("click", function () {
$('#designer-javascript-bold').prop('checked', true);
// alert($('#designer-javascript-bold').prop('checked'));
});
});
</script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
</label>
</div>
<div class="designer-field">Set button to pressed state</div>
</body>
You also need to trigger the class change on the parent label. The plugin you are using does not do that automatically on manual trigger it seems.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.designer-field').on("click", function () {
$('#designer-javascript-bold').prop('checked', true);
$('#designer-javascript-bold').parent().toggleClass('active');
});
});
</script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
</label>
</div>
<div class="designer-field">Set button to pressed state</div>
</body>
I need to make the letter "x" clickable and ad a function that removes the text that this line below creates.
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$(document).ready(function() {
$("#hello").click(function() {
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$("#webpage").prepend("<li>Why hello there!!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#goodbye").click(function() {
$("#user").prepend("<li>Goodbye!</li>");
$("#webpage").prepend("<li>Goodbye, dear user!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#stop").click(function() {
$("#user").prepend("<li>Stop copying me!</li>");
$("#webpage").prepend("<li>Sorry, i meant no offense.</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<script src="jQuery/jQuery.js"></script>
<script src="talk.js"></script>
<title>Talk to the web page</title>
</head>
<body>
<div class="container">
<h1>Talk to the web page</h1>
<p>Click a button to say something to the web page. See what it says back!</p>
<button class="btn btn-primary" id="hello">Say "hello"</button>
<button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
<button class="btn btn-danger" id="stop">Say "stop copying me!"</button>
<div class="row">
<div class="col-md-6">
<h2>You said:</h2>
<ul class="unstyled" id="user">
</ul>
</div>
<div class="col-md-6">
<h2>The web page said back:</h2>
<ul class="unstyled" id="webpage">
</ul>
</div>
</div>
</div>
</body>
</html>
a clickable letter that removes the text this line above creates.
Create one click event that uses .on (since dynamic content and what not) and remove the parent li element:
$("#user").on("click", "span.clickable", function() {
$(this).parent("li").remove();
});
Also use the class clickable and not the ID (I assume you have more than 1);
I'm trying to create a simple "to do" app that is built via jquery.
The idea is to have a form input that will accept a string, have that string become a variable that will then be added to a "list" as a new "item." The problem is that these new items (that should appear as new HTML p elements) are not showing up once the Submit button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1>To Do List</h1>
<form role="form">
<div class="form-group">
<input type="text" class="form-control" id="listInput" placeholder="add items here">
</div>
<div class="button">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<br/>
<p class="list">
</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JQUERY:
$(document).ready(function(){
$(".button").click(function(){
var add = $('input[name=listInput]').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click','.item', function() {
$(this).remove();
});
});
THE JSFIDDLE IS HERE: http://jsfiddle.net/EUq8P/2/
The problem is the button is a submit button which causes the pages to refresh on click by the default action of the button
Also there is problem with the input field selector, your selector will not work because the input field does not have the name listInput, it has the id listInput, so you need to use id-selector
One solution is to prevent the default action of the button by calling the preventDefault() method of the event
$(document).ready(function () {
$(".button").click(function (e) {
e.preventDefault()
var add = $('#listInput').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click', '.item', function () {
$(this).remove();
});
});
Demo: Fiddle
Another is to change the type of the button from submit to button
Demo: Fiddle
Working demo http://jsfiddle.net/8XfQT/
culprit was: var add = $('input[name=listInput]').val();
it should be var add = $('input[id=listInput]').val();
Hope rest help you out :)
code
$(document).ready(function () {
$(".button").click(function () {
var add = $('input[id=listInput]').val();
$('.list').append('<p class="item">' + add + '</p>');
});
$(document).on('click', '.item', function () {
$(this).remove();
});
});