I am working with twitter bootstrap 3 and the accordion module and I want to do as follows: a button that says 'show', and when it's shown, a button saying 'collapse'.
I have tried with data attributes but it didn't work.
The accordions are inside a loop with django.
Thanks
I am using this js
$('a.accordion-toggle').click(function() {
if ( $(this).next('.accordion-body').hasClass('in') ) {
$(this).text('Close');
} else {
$(this).text('Open');
}
});
I have managed to make it work but it only switches the button once: all collapsed, button 'Open'. On shown, button 'Close'. But if I hide the accordion, the button doesn't change to 'Open' again.
You can do it using just CSS. I used the 'folder open' and 'folder closed' glyphicons. This is the Bootstrap example, I've just added the collapse class to the closed header anchors.
Here's an example:
http://jsfiddle.net/rTw7D/7/
Related
I have a popup without title and I want to detect the window using any other criteria (for example a div that wraps the whole popup) and click a button inside it.
I've tried the following:
when:
withWindow({ $("div", class:"main.msgAlert" )}) {
$('#close').click()
}
then: true
But I always get a org.openqa.selenium.ElementNotVisibleException at te #close action.
Am I failing at detecting the window or is the error related to the button?
How to Expand and Collapse the Bootstrap accordion panel as user choice means if i expand A collapsible panel and after that expand B collapsible panel then A should not collapse. If use want to collapse it then can do by click on the symbol.
you can do this by having different parents for each collapse
data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"
second one
data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"
bootstrap only detects the parent to hide previously opened collapse.
Requirement 1 : To Expand and Collapse the Bootstrap accordion panel as user choice not to auto close, please use the below code.
1) data-parent="#accordian"
Note : will work for auto close of expanded panel while click on another.
2) data-parent="#proposalAccordian"
Note : will work to stop auto close of accordion panel while click on another.
Requirement 2 : Adding (-) and (+) symbol while expand and collapse.
1) Add the following code in the appropriate place . Please refer the attached file to do this .
2) Also add the following javascript code in the header.
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
I have two divs. In one div (the "show" div) is some html. Hidden in front of that div is a form to edit that div with a CKEditor instance. I have a button to toggle between the two of them hiding one while revealing the other.
Now, I have a print button that fires PrintArea.js. It's supposed to print the div with the class 'printarea' from the "show" div and it does this very reliably when there is no CKEditor instance on the page.
The CKEditor instance is definitely the problem because when I remove that part of the form it's fine.
The problem code on PrintArea.js is this:
.filter(function(){ // this filter contributed by "mindinquiring"
var media = $(this).attr("media");
return (media.toLowerCase() == "all" || media.toLowerCase() == "print")
The error message in dev tools is this:
Uncaught TypeError:Cannot call method 'toLowerCase' of undefined
Upgrading PrintArea to 2.2.2 fixed the problem. I do not know how unfortunately.
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
Does anyone know if it is possible to have multiple icon buttons on a Sencha Touch list item that listen to different events? If so, how can I accomplish this?
For instance, say I have a list of people and there's an icon for email, phone and a map to their location for each person. I want to show 3 small icons and be able to map each icon to do 3 separate actions.
This depends on how you are creating your buttons.
If the buttons are simple HTML using itemTpl, you can just listen to the itemtap event on List and use the event argument to detect which button you pressed. You could do this via a custom attribute or even a className:
myListItemTapListener: function(list, index, target, e) {
var el = Ext.get(e.getTarget());
if (el.hasClass('map')) {
this.navigate(index);
} else if(el.hasClass('email')) {
this.email(index);
} else if(el.hasClass('phone')) {
this.phone(index);
}
}
If your buttons are actual Ext.Button's inside a component List, you can simply add a listener onto each button when you create the component. There is an example of how to do this in the DataView Guide in the Sencha Docs.
Component DataView may help you. You can see this [guide]: http://docs.sencha.com/touch/2-0/#!/guide/dataview-section-4
I have wrote a [demo]: https://github.com/hs3180/Sencha-Touch-Component-DataView
, in app/view/,
Main.js, a dataview component with useComponets true, and set defaultType to 'demo.view.Item'.
Item.js, a DataItem, the visible content of each item is a panel ( in Card.js ). I use datamap to link name in record ( within store ) to userName ( in demo.view.Card ).
Card.js, a Panel for each person. A user name title and 3 buttons.