When I'm using Javascript options for collapse, the toggle doesn't work. It only opens first time the panel.
This one works well - $('#login').collapse('toggle')
But I want to add more options like parent.
http://www.bootply.com/DFfPmKnDTd#
this code can be help...
$('#login').collapse({
toggle : true,
parent : '#accordion'
});
$('#c1').on('click', function(){
$('#login').collapse('toggle');
}
);
First you need to initiate collapse function and then make call to toggle it.
Then you need to initialize each collapse link.
Try using by using this code may be it can work for target link.
$.each($('#accordion .accordion-toggle'), function(index, collapse_link)
{
var $collapse = $('#collapse_element_id'+element_no); // you need to right here '#c'+element_id ( it will take #c1, #c2 , #c3 )
$collapse.collapse({
toggle : true,
parent : '#accordion'
});
$(collapse_link).on('click', function(){
$collapse.collapse('toggle');
});
});
Related
I have different albums, the contents of which I want to show in lightgallery.
My initial call goes like :
$('.dlCms_c_Carousel').lightGallery({
dynamic : true ,
dynamicEl : dlThis.LGDynEl ,
thumbnail : true ,
mode : 'lg-fade' ,
});
This works perfect, but then, when opening another album, I want the one or the other way to refresh such that the new content of dynamicEl is shown.
Is there a way to do it ?
I was trying a
$('.dlCms_c_Carousel').data("lightGallery").destroy(true)
before, but that messed up. I.e. there seemed to be some functionality, but it looked like the lightbox lost some styling and wasn't opaque any more.
Any hints ?
I'm using Waypoint.js for infinite scrolling with lightgallery.
The solution that I found for dynamic refresh was:
var gallery = $(".infinite-container").lightGallery({
selector: '.item'
});
var infinite = new Waypoint.Infinite({
element: document.querySelector('.infinite-container'),
onAfterPageLoad: () => {
gallery.data('lightGallery').destroy(true);
gallery = $(".infinite-container").lightGallery({
selector: '.item'
});
}
});
From my experience, the object returned from the lightgallery initialization has to be used on the destroy.
Hope it helps.
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
i am working in extjs4. i have form panel with autoscroll true. I have 20-25 fields with fileUpload field at bottom. When i am uploading file, form's scroll is going to top by default. i want to keep scroll of form as it is on where it was while uploading file. So how to set this scrollBar at bottom of or at upload field section in extjs4
You can try by adding the following method to your form declaration:
scrollToField: function(fieldId) {
var field = Ext.get(fieldId);
field.el.scrollIntoView(this.body.el);
}
Here you have a working sample
IMHO,it will be better, however, to group fields using tabs or something similar to avoid having a long a and hard to read / fill form
I have solve this problem into Ext js 4.2 for Ext.form.panel
See the following code. It will helpful to you.
onRender function call on render event
onRender: function () {
this.callParent(arguments);
if (!this.restoreScrollAfterLayout) {
this.mon(Ext.get(this.getEl().dom.lastElementChild), 'scroll', this.onScroll, this);
this.restoreScrollAfterLayout = true;
}
},
onScroll: function (e ,t, eOpts) {
this.scroll = Ext.get(this.getEl().dom.lastElementChild).getScroll();
},
afterLayout: function () {
this.callParent(arguments);
if (this.restoreScrollAfterLayout && this.scroll) {
var el = Ext.get(this.getEl().dom.lastElementChild),
scroll = this.scroll;
el.scrollTo('left', scroll.left);
el.scrollTo('top', scroll.top);
}
}
I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});
dojo.addOnLoad( function() {
attach on click to id="textDiv"
dojo.query('#Specific_consultant-Yes').onclick( function(evt) {
// document.getElementById("Consultants").style.visibility = "hidden";
dojo.style.setVisibility('Consultants', false);
//alert('hai');
});
});
I tried to write code like this in zend in views page . the alert command works but the hiding of element does not work!!!any problem in code?
try to use the following code:
dojo.style("Consultants", "visibility", false);
i suspect the id of the element to be hidden is "Consultants"?
if this is not working, please provide your html-code.