Im using jquery toggle function to show or hide a div using css disply, but its getting messy when i toggle it shows div but when I wanted to hide it it also cuts my top bar aswell.
Here's the JS:
$(document).ready(function() {
$(".toggle").click(function() {
var e = $(this).attr("href"),
n = $(this);
$(e).toggle(function() {
n.html("none" == $(this).css("display") ? "Links" : "Close")
})
});
heres the link Link of my website when you open and click on links button it will show the links but my top menu will cut of.
Heres the toggle trigger
Links
just figured it out forgot to set min-height for the section.
I have a html file whose skeleton is as follows:
<div id ="QBForm">
<h3>Query1</h3>
<div class ="QBSubForm">...</div>
</div>
I have a "AddQuery" button and on clicking that, I want to add another subform to the existing form and here's how I do that:
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
});
And I have this in my jQuery Ready() function:
$("#QBForm").accordion();
But every time, I click on my add query button, the subform is added but it is not collapsible, its just its own static thing.
How do I add a sub-form and make each sub-form collapsible?
You should try passing accordion with active: false and collapsible: true.
I haven't really tested the code below, but try:
$("#QBForm").accordion({ active: false, collapsible: true });
if you do not set collapsible to true, jQuery UI will set at least one section open.
Use refresh method of accordion to include dynamically added content.
Then if you want the new section opened you could also set the last panel to active by using -1 as index
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
/* only refresh*/
$("#QBForm").accordion('refresh');
/* refresh and set new panel active */
$("#QBForm").accordion('refresh').accordion( "option", "active", -1 );;
});
Accordion Refresh docs()
I have implemented bootstrap dialog in my project. I have some delete functionality in that dialog, and the delete confirmation message opens another bootstrap dialog. But when the second confirmation dialog is open, the first dialog is not disabled and all the events work.
Is there any solution to disable the original dialog when another dialog opens?
Here's my code:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
content: content,
buttons: [{
label: 'Save',
cssClass: 'btn-primary',
id: 'btnSave',
onclick: function (dialog) {
}
},
{
label: 'Close',
cssClass: 'btn',
id: 'btnClose',
onclick: function (dialog) {
if (callback != "") {
callback(true);
}
dialog.close();
}
}]
});
dlg.open();`
}
Screenshot:
When the dialog for delete confirmation is open, I want to disable the first dialog.
The Problem:
In order to understand the intricacies of modal dialogs in web development, you'll need to understand a bit more about the z-index property and stacking contexts.
In short, the dialog works by adding two principal components to the DOM: a background that takes up the entire screen, and a div comprising your dialog. Each of those stand out from the rest of the page because they are put at the the root level of the DOM and given a high value for their z-index property. How high? Well, try adding a blank modal to a blank page and you'll see the following DOM elements:
<div class="modal-backdrop fade in"></div> <!-- z-index: 1030; -->
<div class="modal bootstrap-dialog"> <!-- z-index: 1040; -->
<div class="modal-dialog"> <!-- z-index: 1050; -->
The modal-backdrop gives the illusion of a true modal process because it renders above all the other content which prevents clicks from firing anywhere below. The only reason the modal-dialog is allowed to receive clicks is because it is stacked on top of the background, by providing a higher z-index.
That's it! That's the whole bag of tricks. So when bootstrap cautions against use multiple dialogs, they're doing so because stacking becomes tricky. If you add another element, it gets rendered with the same exact z-index, meaning that it will be above the regular page content, but on the same plane as the original dialog. If it doesn't completely cover the original, then the original will still be clickable because there is no backdrop above it.
The Solution:
In order to resolve this, you need to come up with your own way of disabling clicks on background modals. This issue appears to have been (partially) resolved. See the following example:
Demo in jsFiddle
Bootstrap Dialog made it so that clicking off of a dialog simply closes the last dialog in the DOM and marks the event as handled so it won't fire anything else. If the second modal is up and you click off of it, the only thing that will happen is the second modal will close.
More Advanced Handling:
If you want the second modal to look like it's over the first one, you'll have to do that manually.
When the new modal is created, it comes with it's own modal-backdrop. When the second modal is shown, you can have it appear above the original by incrementing its z-index relative to the first modal. In the onshown event, we just have to grab the current modal and it's overlay and modify the z-index using the .CSS method. We want this to appear above any existing modals, so first we'll count the number of modals in the DOM ($('.bootstrap-dialog').length) and then increment the z-index so it's higher than the next highest dialog.
Call like this:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
message: content,
onshown: function(dialog) {
var tier = $('.bootstrap-dialog').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 1040 + tier * 30);
}
// More Settings
}).open();
}
Working Demo in jsFiddle
Screenshot:
As a proof of concept, here's a Demo that allows you to continually add dialogs on top of other dialogs
Infinite Dialogs Fiddle
UX Caution:
While this is technically possible to achieve, modals within modals can create a confusing UX, so the right answer if you have the problem might be to try to avoid it altogether by taking the original workflow and promoting it to a full page design with a url and state.
First add class to primary modal so:<div class="modal-content kk">
I simply use:
$('#myModal1').on('shown.bs.modal', function () {
$('.kk').addClass('magla');
$('#myModal').modal('hide');
});
$('#myModal1').on('hidden.bs.modal', function () {
$('.kk').removeClass('magla');
$('#myModal').modal('show');
});
where .magla css is:
.magla {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
Try looks good for me.
Just hide the actual modal using the onclick method
<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
Text Button
</button>
My humble solution: Generate a new ID for each new modal. Then just manage everything through one variable.
It's working for my purposes, btw.
var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
_MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
return false;
}else{
_MODAL_LAST = $(this).prevAll('.modal:first');
}
});
Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.
I am using the jqGrid-subGrid option in my grid. Every row has a subgrid and I'm trying to animate the opening and closing of the subgrid, like the jqueryui accordion does.
There are the two functions
collapseSubGridRow
expandSubGridRow
but I can't find the right trigger for the click event to change the opening.
Is this even possible?
Thanks in advance!
This solution does not include animation it just closes previously opened sub-grid so there's only one grid opened at a time - like with accordion.
var expandedRowId=null;
$("#jqgrid_0").jqGrid({
...,
subGridRowExpanded: function(subgrid_id, row_id) {
if(expandedRowId!=null && expandedRowId!=row_id){
$("#jqgrid_0").jqGrid ('toggleSubGridRow', expandedRowId);
}
expandedRowId=row_id
...
},
// clicking on row will toggle sub-grid
onSelectRow: function (rowId) {
if(expandedRowId==rowId)expandedRowId=null;
$("#jqgrid_0").jqGrid ('toggleSubGridRow', rowId);
}
}
Hope this helps.