I am wondering if the bootstrap accordion can control a DIV without javascript.
I want to achieve this effect: https://testbuttons.bss.design/accordion.html
but now I am using:
$('#btn_lesson-1').click(function(){
$('#lesson-1').show();
$('#lesson-2').hide();
$('#lesson-3').hide();
});
$('#btn_lesson-2').click(function(){
$('#lesson-2').show();
$('#lesson-1').hide();
$('#lesson-3').hide();
});
$('#btn_lesson-3').click(function(){
$('#lesson-3').show();
$('#lesson-1').hide();
$('#lesson-2').hide();
});
But it gets annoying to create code for more lessons.
Or maybe there is some other way to achieve thisņ Maybe some simple CMS?
Thanks!!!!!
If you are using bootstrap, the accordion should already be opening and closing elements by default based on the clicked element. See this example: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
I have a Gutenberg website and I want to add animations that the use can control, I am using aos (animate on scroll) and I figured, if I create a class then loop over it and that adds the relevant data-aos values e.g.
$('.aos-fade-up').each(function(i) {
$(this).attr('data-aos', 'fade-up');
});
It works as intended, adds the relevant attribute, and the content is hidden, but nothing happens on scroll.
What is the problem here? The attribute is on, it hides the content but nothing happens on scroll.
Pen here: https://codepen.io/StuartAttain/pen/MWWzVpe
You have to init after you do the replacements:
https://codepen.io/farinspace/pen/bGVppQb
or do a AOS.refreshHard(); afterwards:
https://codepen.io/farinspace/pen/ExVKKrw
Unfortunately I cannot post a working code/example because it's part of a huge HTML template and I cannot extract only the interesting part :( sorry for that.
Anyway, I have this popup that I define like this:
<a id='bookShopping' class="popup-text" href="#book-shopping-dialog"></a>
<div id="book-shopping-dialog" class="mfp-dialog mfp-hide">
random popup text...
<button>Close the popup!!!</button>
</div>
and that I call with
<a onclick="document.getElementById('bookShopping').click(); return false;" >PopUp!</a>
The popup itself has a "X" close button on the upper right corner, defined with
<button class="mfp-close">X</button>
I want MY BUTTON, inside the "random text", to be able to close the popup as well.
I tried:
1) Give my button the mfp-close class.
NOPE. My button will jump to the upper right corner
2) Setting the div to display:none and/or display:block
NOPE. The popup will close but IT WILL NEVER REAPPEAR.
So, my last resort would be to call the same code that the "mfp-close" class is calling. My problem is that I can only find the mfp-close class defined in CSS, nothing in JS.
If I try to "inspect" the "X" button, it will not give me any event linked to it, nor any JS associated with its "click".
I know that without the source code is hard to understand, but the general question is: where, in Chrome or Firefox, can I find ALL THE JS CODE EXECUTED when I click on an element?
Thank you in advance.
You appear to be using the Magnific popup jQuery plugin, which has an API including a close() method. You should call that method rather than try to hack around with classes.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
$.magnificPopup.close();
DOJO seems to have some quirks here. I specifically need to have the TabContainer hidden when the page loads, but then become visible after the user clicks a button. The first thing I tried is setting style.display = "none" to start, and then setting style.display = "block" on the click event. Unfortunately, this only partially works- the page will render an invisible box in the right location/dimensions, but not render the actual contents. The box's contents only get rendered when triggered by something else (for example, going to a different FF tab or suspending/resuming firebug will make the box render).
If the style.display property is set to be visible on page load, everything works fine. You can toggle the display property and it shows or hides the tabcontainer properly. But if it's set to "none" on page load, it screws up.
I tried a workaround of setting the style.display property to "" in the HTML but then immediately setting it to "none" in the Javascript, but it still fails- the change occurs too soon and it needs to happen after the tabcontainer renders (which can take a second or two).
Some stripped sample code:
HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;
height:100px;display:none;">
</div>
and then the Javascript to show the tab on a user click:
function initTabs()
{
var tabContainer = dojo.byId('tabContainer');
tabContainer.style.display = 'block';
}
How can I dynamically show/hide a TabContainer without having it start in the shown state?
There is solution for this. If you want to show TabContainer calll:
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();
and use 'none' if you want to hide TabContainer.
This works for me, but that is truth, it is not obvious :)
Old thread but I experienced this same issue and this is how I solved it. First, you cannot use display:none. Per the folks at DOJO, you have to use visibility:hidden with dijits or this will not work. So, you want this:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">
Then, to show this you do the following:
dojo.style("tabContainer", "visibility", "visible");
Now, the problem this poses is what you already found out. This reserves a invisible div in your viewport that is 500px wide. So if you are using a bordercontainer, there will be this empty 500px gap in your page. To resolve this, I had to create my dijits programatically and inject them into a empty div, rather than do what you did and do it declaratively. Hope this helps someone out there.
you should do
dijit.byId("tabContainer").domNode.style.display = 'block'
or perhaps
dijit.byId("tabContainer").domNode.style.visibility = 'hidden';
is even better
Well, I did not solve this problem, but I came up with a workaround...Creating the TabContainer on the click event, instead of creating it hidden on page load and then showing it on the click event.
HTML:
<div id="tabContainer">
</div>
JS:
var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));
//add tabs
tabContainer.startup();
After you set display:block do this:
dijit.byId('tabContainer').resize();
dijit.layout widgets often don't lay themselves out properly if they are display:none (and sometimes even when visibility:hidden). You have to fiddle around in Firebug till you figure out what works!
Tested sucessfully with Dojo 1.10 . Use registry instead of "dijit.byId()". The method resize() only works on the dijit.layout.BorderContainer.
define([
"dijit/registry" // registry
], function(registry) {
var show = true;
if (show) {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'});
registry.byId("dijitLayoutBorderContainer").resize();
} else {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'});
registry.byId("dijitLayoutBorderContainer").resize();
}
}
The first thing (setting style.display = "none") is right. In place of
...then setting style.display = "block"
you should just call .set_visible JS method of the ajax TabContainer when "...user clicks a button", like:
$find('<%= Tabs.ClientID %>').set_visible(true);
I used this after setting the style display:block and it works great! This way you don't need to know the ID of the container to resize.
this.getParent().resize();
If you use
dijit.byId("tabContainer").resize();
after you set the display to block it will bring back the tab headers.
You'll save a little bit of javascript if you just use
visibility: hidden;
(although the tabContainer will still take up space on the page)
Another alternative I use pretty frequently is instead of
display: none/block;
I use
height: 0px/auto;
You could also switch the position to absolute and set the coordinates for off screen somewhere too. That's require a lot more css changes than simply doing the height though. That's my preferred method if it works in my situation.
Between these solutions hopefully one will work for you.
I'm trying to resize my modal dialog window when certain items are hidden/shown.
window.resizeTo(800, 600);
I've tried using code like above, but it doesn't seem to work. I think because it is a modal dialog, and not a regular window. Any suggestions as to how I could resize this?
If you're trying to resize the modal dialog window from within the window itself, you might be tempted to use the javascript window.resizeTo() or window.resizeBy().
However, those will not work. Instead, use:
window.dialogWidth='640px';
window.dialogHeight='480px';
P.S.
Rsolberg: The poster did say modal dialog window. That seems like the way I'd describe it. I'm not sure that could be interpreted as being related to jQuery. I'd remove the jQuery answer in order to avoid confusion.
You'll want to identify the element or container ID and do something like this:
document.getElementById('MyModal').style.height = '500px';
document.getElementById('MyModal').style.width = '800px';
If you are using jQuery for this it can be quite a bit easier as you can attach it to the actual show modal function.
Edit
Within the javascript functions above, MyModal will be the ID of the container or modal. For example, if you are using a DIV for the outer element of your modal, you would set the DIV up like this:
<div id='MyModal' class="IFNEEDED">CONTENTS OF MODEL</div>
EDIT #2
Since this is not a "modal" as most would describe today, its more of a new window popup, this line of code should work for you (found it here):
window.open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400,height=200')