I have an application where data sets can be filtered at various levels, and--for performance reasons--it would be nice to be able to toggle the respective display of nested divs independently. The issue arises in that toggle will change the display property back to its original state on a hidden child, but it will not change it to none if one of its ancestors is already hidden.
To replicate: in this JSFiddle,
Click the "toggle 3" button, and then the "toggle 2" button.
Clicking the "toggle 3" button and then the "toggle 2", you will find 3 restored (as expected).
Now click the "toggle 2" button, then the "toggle 3".
On clicking "toggle 2" again, 3 is still visible (???).
toggle can take a boolean
$(selector).toggle(false);
http://api.jquery.com/toggle/
.toggle( showOrHide )
showOrHideA Boolean indicating whether to show or hide the elements.
UPDATE
You can achieve the functionality you want by creating a simple hidden css class calling toggleClass() rather than using toggle(). toggle() seems to skip its own functionality entirely if the element in question is not visible.
http://jsfiddle.net/hunter/GufAW/3/
$("#toggle-1").click(function() {
$("#1").toggleClass("hidden");
});
$("#toggle-2").click(function() {
$("#2").toggleClass("hidden");
});
$("#toggle-3").click(function() {
$("#3").toggleClass("hidden");
});
Try toggling the css display property directly:
http://jsfiddle.net/GufAW/5/
$("#toggle-1").click(function() {
$("#1").css("display", ($("#1").css("display")==="none") ? "block" : "none");
});
$("#toggle-2").click(function() {
$("#2").css("display", ($("#2").css("display")==="none") ? "block" : "none");
});
$("#toggle-3").click(function() {
$("#3").css("display", ($("#3").css("display")==="none") ? "block" : "none");
});
Related
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
In order to add items to a kendo menu dynamically, here in the forums, the kendo team suggested to use the append method as described in this example to append submenus.
I've done this, now I have the problem of arrows not rendering for nodes. The issue can be seen in this example: http://jsfiddle.net/MMRCf/16/ if you hover on "Item 1" then click on "Sub Item 2", "Sub Item 2" will be populated with a submenu. This submenu lacks arrows for expanding nodes.
Perhaps this is a bug that needs reporting but I cannot post on Kendo menu forum.
Does anyone know how I could get arrow icons to render?
I think the append method is where a fix could be applied:
append: function (item, referenceItem) {
referenceItem = this.element.find(referenceItem);
var inserted = this._insert(item, referenceItem, referenceItem.length ? referenceItem.find("> .k-group, .k-animation-container > .k-group") : null);
each(inserted.items, function (idx) {
inserted.group.append(this);
var contents = inserted.contents[idx];
if (contents) {
$(this).append(contents);
}
updateArrow(this);
});
updateArrow(referenceItem);
updateFirstLast(inserted.group.find(".k-first, .k-last").add(inserted.items));
return this;
},
Actually seems the updateArrow function is broken. I've updated it for the next release, meanwhile you can also update it to get it working, from this:
item.find(".k-icon").remove();
to this:
item.find("> .k-link > .k-icon").remove();
I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.
I am using HP webOS 3.0 and the Enyo framework.
I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.
I have two panes called left pane and right pane on a single view.
I have around 10 items on left pane.
On each of the item click appropriate view is called on right pane.
I am doing it with following code.
showTaskView: function(){
this.$.rightPane.selectViewByName("taskView");
},
Now I want to know how can access the control's property in the main view containing both left pane and right pane.
For example,
I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.
It is not allowing me to access the control's image.setSrc method from the main view.
I have tried it with the following code.
editTask: function() {
this.$.task.image.setSrc("images/image2.jpg");
}
and
editTask: function() {
this.$.image.setSrc("images/image2.jpg");
}
It gives me the following error:
Cannot read property 'setSrc' of undefined
With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.
The below should work (I think ...)
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption1.setContent("Greet a " + row.task + ":");
this.$.star.setSrc("images/grey-star.png");
if(this.hideStart) this.$.star.hide();
this.$.caption2.setContent(row.assignto);
return true;
}
},
buttonClick: function(){
this.hideStar = true;
this.$.myVirtualList.refresh();
}
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.