I need to show datepickers on page load, not by clicking on input or icon.
http://eonasdan.github.io/bootstrap-datetimepicker/
It's this plugin. I can't find any example for this, is this possible ?
Yes, it is possible, you have to use the inline option. You can use the doc's example:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
I'm sure since you provided the link with the actual answer, you found that the code from that page, what I copied below didn't work.
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
Your problem is the actual libraries. I tried using all the latest jquery, moment, and bootstrap libraries, which was giving me an error. So I tried the libraries that was used on the site, which works.
Here's the example:
https://jsfiddle.net/hx2xyufw/1/
Related
here is the code:
$(function()
{
$('.sign1').click(function(){
$(this).addClass('good');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 menu-item">
<div class="front">
<img class="center-block sign1" src="images/sign1.png">
</div>
</div>
</div>
</div>
</div>
It's supposed to add the class 'good' when clicking the image with class 'sign1'
but that never happens.
what's wrong with my code please?
you code works fine if you remove the link <a> surrounding the <img> element.
after jquery adds the good class to the image, the click even bubbles up to its parent <a> and this directs the browser to the new address: main.html.
so you won't have the time to see the change i suppose.
You can code like below
var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");
My jquery code doesnot work in bootstrap. i have some columns and i want to put submission form within specific column but when i use form tag my jquery wont work.
<body>
<form>
<div class="row" id="row1">
<div class="col-sm-6" id="col-1">
<button id="btn">hide me</button>
</div>
<div class="col-sm-6" id="col-2">
</div>
</div>
<div class="row">
<div class="col-sm-6" id="col-3">
</div>
<div class="col-sm-6" id="col-4">
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#row1").slideUp("slow");
});
});
</script>
You need to use preventDefault() as shown below:
$(document).ready(function(){
$("#btn").click(function(e){
e.preventDefault();
$("#row1").slideUp("slow");
});
});
When you are putting the form tag and there is a button tag inside it, the default action is to submit the form. So you need to prevent that first using preventDefault().
Please let me know if it solved the issue or not.
I want to run some JavaScript code before modal window is shown, but when i click on button nothing happens and browser console doesn't give me any error.
jsfiddle
EDGE
<div id="addEdgeModal" class="modal hide fade">
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<script>
$("#addEdgeModalB").on("click",function(e){
alert("click");
$("addEdgeModal").modal("show");
});
</script>
Try,
$("[href='#addEdgeModalB']").on("click",function(e){
alert("click");
});
There is no id there for using id selector here. Use attribute equals selector at this context.
DEMO
Please refer to this for the correct modal markup.
DEMO
$("a.btn").on("click",function(e){
alert("click");
});
I'm using the excellent jQuery color picker from http://colpick.com/plugin
It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.
This works:
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick1" class="colorPick"/>
</div>
</div>
</div>
But the same thing inside a Bootstrap modal fails to show the picker:
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick2" class="colorPick"/>
</div>
</div>
</div>
Is there a way to use this color picker within a Bootstrap modal?
Thanks
The problem is z-index just add this line in your css class it works good..
.colpick {
z-index: 9999;
}
Jsfiddle DEMO
im trying to have a dynamic scroll bar with ajax in it, meaning i try and update the division with the scroll bar via ajax, im having a little trouble with this, im using a sample scroll bar i downloaded called Tiny Scrollbar: http://www.baijs.nl/tinyscrollbar/
you can have a preview of mine here : http://www.luminusconsult.com/apps/testing/index.html
this is what i have in the index page...
<div id="reloaded">
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div></div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
and when i try and reload the "reloaded" division with ajax...
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"> </div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
is there any way i can solve this problem?
Add the tinyscrollbar update method in the success callback of your ajax request.
$('#scrollbar1').tinyscrollbar_update();