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();
});
Related
I was creating a dropdown with jquery, HTML and CSS. I want to close the dropdown when the user clicks outside of dropdown. But it's not working fine.
JS
function _drpdntest() {
$(".drpdn-click").click(function(){
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]');
_drpdn_content.toggleClass("drpdn-show");
_drpdn_content.siblings().removeClass("drpdn-show");
$(document).click(function(event){
_drpdn_content.removeClass("drpdn-show");
});
$(this, _drpdn_content).click(function(event){
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function(){
_drpdntest();
});
HTML
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
CSS
.drpdn-content {
z-index: 1000;
position: absolute;
display:none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
This is because you have not added stopPropagation() for button click. Due to which on button click it is triggering document click.
Also $(this, _drpdn_content) should be $(_drpdn_content, this) or simply remove this while adding stopPropagation.
Here second parameter provides context in which selector search will get performed, in short second parameter is parent and you are saying to search all childs matching with selector provided in first parameter.
function _drpdntest() {
$(".drpdn-click").click(function(e) {
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.siblings().removeClass("drpdn-show");
_drpdn_content.addClass("drpdn-show");
$(_drpdn_content).click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
_drpdn_content.removeClass("drpdn-show");
});
e.stopPropagation();
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
This should be what you want, based on what you said in the comment
It now shows on the first click, and it doesn't hide when you click on the option.
function _drpdntest() {
$(".drpdn-click").click(function() {
var $this = $(this)
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.toggleClass("drpdn-show");
$(document).click(function(event) {
if (event.target != $this[0] && event.target != _drpdn_content[0]) {
_drpdn_content.removeClass("drpdn-show");
}
});
$(this, _drpdn_content).click(function(event) {
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
I need to setup notification alerts for my website. I'm using this simple notification script. I have test it on my website like this.
<div id="notifications">
<div class="alert alert-danger" role="alert">
<a class="button close" style="padding-left: 10px;" href="#">×</a>
<i class="fa fa-info-circle "></i>
Thanks
</div>
</div>
Styles
#notifications {
cursor: pointer;
position: fixed;
right: 0;
z-index: 9999;
bottom: 0;
margin-bottom: 22px;
margin-right: 15px;
max-width: 300px;
}
Script
$( document ).ready(function() {
Notify = function(text, callback, close_callback, style) {
var time = '10000';
var $container = $('#notifications');
var icon = '<i class="fa fa-info-circle "></i>';
if (typeof style == 'undefined' ) style = 'warning'
var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>');
$('<a>',{
text: '×',
class: 'button close',
style: 'padding-left: 10px;',
href: '#',
click: function(e){
e.preventDefault()
close_callback && close_callback()
remove_notice()
}
}).prependTo(html)
$container.prepend(html)
html.removeClass('hide').hide().fadeIn('slow')
function remove_notice() {
html.stop().fadeOut('slow').remove()
}
var timer = setInterval(remove_notice, time);
$(html).hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(remove_notice, time);
});
html.on('click', function () {
clearInterval(timer)
callback && callback()
remove_notice()
});
}
});
The notification is appearing correctly because of css styling. But the script is not working. If I click close icon on notification, it's not closing. When I reload the page, it stays on the(auto closing is also not working) What ami I missing in my script?
Your requirements are a bit difficult to understand. You refer to the "notification" appearing correctly, but the only thing I see appearing is x Thanks in the bottom-right corner. However, that's not a notification, it's coming from your markup. It has no event associated with it, so nothing will happen when it is clicked.
Your main issue seems to be that you are defining something called Notify, but then not doing anything with it. To help you resolve this, please see the snippet below. It's probably not exactly what you want, but I think it's a lot closer.
$( document ).ready(function() {
Notify = function(text, callback, close_callback, style) {
var time = '10000';
var $container = $('#notifications');
var icon = '<i class="fa fa-info-circle "></i>';
if (typeof style == 'undefined' ) style = 'warning';
var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>');
$('<a>', {
text: '×',
class: 'button close',
style: 'padding-left: 10px;',
href: '#',
click: function(e) {
e.preventDefault();
e.stopPropagation();
close_callback();
remove_notice();
}
}).prependTo(html);
$container.prepend(html);
html.removeClass('hide').hide().fadeIn('slow');
function remove_notice() {
// html.stop().fadeOut('slow').remove()
html.fadeOut('slow', function() {
$(this).remove();
});
}
var timer = setInterval(remove_notice, time);
$(html).hover(function() {
setMessage('You hovered over me.');
clearInterval(timer);
}, function(){
if (parseInt(html.css('opacity')) === 1 ) {
// element is not currently being faded out
setMessage('You stopped hovering over me.');
timer = setInterval(remove_notice, time);
}
});
html.on('click', function() {
clearInterval(timer);
callback && callback();
remove_notice();
});
}
var notification = new Notify('This is a notification.', function() {
setMessage('You clicked my text.');
}, function() {
setMessage('You clicked my "x".');
});
});
function setMessage(messageText) {
$('#testMessage').text(messageText);
}
#notifications {
cursor: pointer;
position: fixed;
right: 0;
z-index: 9999;
bottom: 0;
margin-bottom: 22px;
margin-right: 15px;
max-width: 300px;
}
#testMessage {
position: fixed;
right: 0;
z-index: 9999;
top: 0;
margin-top: 22px;
margin-right: 15px;
max-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>
<div id="testMessage"></div>
<div id="notifications">
<!-- <div class="alert alert-danger" role="alert">
<a class="button close" style="padding-left: 10px;" href="#">×</a>
<i class="fa fa-info-circle "></i>
Thanks
</div> -->
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
Hi I know this question has been asked many times but all the solutions I found are not working for me ....
I am able to make the ajax request and I am getting the response back but the autocomplete menu which is in a modal inside a template is not visible. As suggested i tried changing the z-index and made modifications but they did not work ... Below is my code
$("#startDestination").autocomplete({
appendTo: "#createRequest",
/*close: function (event, ui){
$("#startDestination").autocomplete("option","appendTo","#detailsModal"); // <-- and do this
}*/
});
// $("#startDestination").autocomplete("option", "appendTo", "#detailsModal");
$("#startDestination").autocomplete({
source: function (request, response) {
$.ajax({
url:"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
dataType: "json",
function (data) {
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
var selectedObj = ui.item;
getcitydetails(selectedObj.value);
$("#startDestination").val(selectedObj.value);
return false;
},
open: function () {
$("#startDestination").removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$("#startDestination").removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
I have also tried to use appendTo and attach it to div elements of the modal.
Below is the code for my modal in a template
<div class="col-sm-6">
<div class="form-group">
<div id="test">
<label>Departure Destination</label>
<span class="input-icon input-icon-right">
<input type="text" name="startDestination_1" id="startDestination" class="form-control" ></input>
</span>
</div>
</
my style.css
.ui-autocomplete{
font-family: 'open sans', sans-serif;
z-index:2147483647 !important;
font-size: 16px;
}
my jquery-ui.css
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
z-index:2147483647 !important;
}
.ui-front {
z-index: 2147483647;
}
Any help would be appreciated.
Thank you in advance.
I Have a custom designed grid:
http://jsfiddle.net/97n4K/
when you click a grid item the content div of that item slides open and when you click it again it closes. This works fine.
My problem is i only ever want one content area to open at a time much like a standard accordion.
So for instance i click 'content one' - it opens 'content area one' - now if i click 'content two' i want 'content area one' to close (slideUp) and 'content area two' to open (slideDown) at the same time - just like an accordion does.
Obviously my html is alot different from a standard accordion setup so im stuggling to figure it out how to do it with my limited Jquery knowledge.
Please see my Js Fiddle above - and heres the code if you prefer below:
Thanks
HTML
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1"><h3>Content<br>one</h3></div>
<div class="expBtn exOlive ex2"><h3>Content<br>two</h3></div>
<div class="expBtn exOrange ex3"><h3>Content<br>three</h3></div>
</div>
<div class="expArea expArea1">
This is content one
</div>
<div class="expArea expArea2">
This is content two
</div>
<div class="expArea expArea3">
This is content three
</div>
CSS
.expBtn {
width: 190px;
height: 68px;
text-decoration: none;
background-color: #000;
float: left;
cursor: pointer;
}
.expBtn h3 {
font-size: 18px;
font-weight: bold;
color: #e8e7e4;
text-transform: none;
line-height: 1.2em;
letter-spacing: 0em;
padding-top: 13px;
padding-left: 13px;
padding-right: 13px;
padding-bottom: 0;
font-family: arial;
margin: 0;
}
.expArea {
display: none;
width: 570px;
background-color: #ccc;
height: 200px;
}
JS
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
Ok so i have created essentially what i want but i have a massive load of duplicate JS that i know could be simplified by any one with better knowledge of jquery / javascript than me. Please check out this new JS fiddle - any solution to get the JS down would be greatly appreiated!
Thanks
NEW JS FIDDLE
http://jsfiddle.net/97n4K/9/
If you wish to keep your same html structure you can use the following to get what you want;
JS FIDDLE DEMO
Switch your JS click handling to this;
$('.expBtn').on('click', function () {
var area = $(this).index() + 1;
var new_div = $('.expArea' + area);
// do nothing if it's already visible
if (!new_div.is(':visible'))
{
// slide up all first
$('.expArea').slideUp(300);
new_div.slideDown(1000);
}
});
You can easily add more html sections providing you follow the same numbering you've already done.
You can use slideUp or slideDown? Im not 100% sure as to what exactly you want to achieve but this fiddle should help you.
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
$(".expArea1").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea1").slideUp(1000);
});
http://jsfiddle.net/97n4K/5/
Basically you can use a plugin for this and it will help better
I have added some simple code so your code can work
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1" data-accord = "expArea1"><h3>Broadcast + Arts + Media</h3></div>
<div class="expBtn exOlive ex2" data-accord = "expArea2"><h3>Business<br>Services</h3></div>
<div class="expBtn exOrange ex3" data-accord = "expArea3"><h3>Charity +<br>NFP</h3></div>
</div>
<div class="expArea expArea1">
expArea1 content
</div>
<div class="expArea expArea2">
expArea2 content
</div>
<div class="expArea expArea3">
expArea3 content
</div>
Please look at data-accord and it's content
Now for the JS
$('.expBtn').click(function(){
var current = $(this).data('accord');
$('.expArea').each(function(){
if($(this).not('.'+current).css('display') == "block")
{
$(this).slideToggle();
}
});
$('.'+current).slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
You can see it working
http://jsfiddle.net/97n4K/6/
I hope this can help