I'm using a carousel slider with jQuery and it automatically adds owl-prev and owl-next classes as shown below.
How can I add role="prev" and role="next" to the buttons just as with the classes so as to improve accessibility?
<div class="owl-nav">
<button role="presentation" class="owl-prev"><i class="icofont-simple-left"></i></button>
<button role="presentation" class="owl-next"><i class="icofont-simple-right"></i></button>
</div>
Related
I have a bootstrap accordion (ver. 5.0) inside of which are several buttons. When the user clicks on one of the buttons, I want the div inside of the accordion to change. I am currently using the display style property, alternating between show and hide as appropriate using javascript. The problem is that once the display property has been set to show, the div is shown even when the accordion is collapsed closed. Is there any way to solve this issue apart from writing a set of instructions to hide the div on collapse, as this would likely override the default accordion animation?
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#options">
<h2 class="accordion-header" id="options_heading">Options</h2>
</button>
<div id="options" class="accordion-collapse collapse" data-bs-parent="#account_info">
<button class="btn" id="password_change">Change Password</button>
</div>
<div id="p_change" class="accordion-collapse collapse" data-bs-parent="#account_info" style="display: none;">
<!-- password change form here -->
</div>
</div>
I want to switch between the div with the form and the div with the options. I'm using vanilla javascript, not jQuery.
I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.
Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons
Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.
I'm building a layout template for devs to integrate into their AngularJS/Bootstrap application using Bootstrap 3.3.6. This layout features a left side nav contextual menu which slides over the top of the main page content when opened, or optionally can be 'pinned' open, which then pushes main content to the right.
The navigation itself is in the form of an unordered list containing two buttons. The idea is that when a button is clicked, the relevant div for the sub menu contents is toggled to display (using bootstrap 'collapse' and 'in') classes. Any other sub menu content div elements should be set to not display (without the 'in' class).
This is becoming tricky. If you simply click one button or the other exclusively to control it's relevant content element, it works fine, toggling display of the relevant content. However, if you click each button without clicking the same button again to close it's relevant content, the behavior of the content divs is unexpected, where the second nav button clicked overrides the behavior of the first and it's content persists despite clicking the first nav button again.
My expectation is that the menu buttons need to function as true toggles, where only the relevant content is displayed, and all other menu content divs are not displayed.
Below is the markup for the nav and it's relevant content divs:
<div class="filter-bar pull-left">
<ul class="">
<li><!-- NAV ITEM 1 -->
<button type="button"
id="left-nav-toggle-menu"
class="left-nav-toggle mnc-filter-icn"
title="menu">
<i class="fa fa-list-ul fa-fw"></i>
</button>
</li>
<li><!-- NAV ITEM 2 -->
<button type="button"
id="left-nav-toggle-filters"
class="left-nav-toggle mnc-filter-icn"
title="filters">
<i class="fa fa-filter fa-fw"></i>
</button>
</li>
</ul>
</div>
<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</div>
<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT -->
<div class="clearfix">
<button type="button"
class="close left-nav-pin pull-right"
aria-label="Pin">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<ul>
<li>Filter 1 Category</li>
<li>Filter 2 Category</li>
<li>Filter 3 Category</li>
</ul>
</div>
Now the js function to toggle the nav content:
$(document).ready(function(){
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-filter-content").toggleClass("in");
});
});
I'm not a js or Bootstrap guru for that matter, I simply used the Bootstrap documentation (collapse and toggleClass) to create these functions. I need help from someone who knows Bootstrap in modifying them so that the nav buttons function as true toggles for the content using Bootstrap and jQuery's built in functionality.
Any help is much appreciated!
If I understand you correctly, you want to remove the .in class from any open divs:
$("button#left-nav-toggle-menu").click(function(){
$("div.collapse.push-filter-content").removeClass("in");
$("div.collapse.push-menu-content").toggleClass("in");
});
$("button#left-nav-toggle-filters").click(function(){
$("div.collapse.push-menu-content").removeClass("in");
$("div.collapse.push-filter-content").toggleClass("in");
});
I'm creating a dropdown in my navbar which contains a video player, however when I hide the video player by toggling the dropdown button, I'm still able to click on the hidden div element.
So when I'm trying to navigate other elements on the page, sometimes I click on the hidden div video player. How do I make the hidden div element in droppable unclickable? and then clickable again when I show the element using the dropdown.
Thanks!
EDIT:
I'm using the following code:
<a ng-cloak class="dropdown-toggle player-btn btn btn-large" data-toggle="dropdown">TOGGLE</a>
<div class="dropdown-menu">
<div style='position:relative;height:210px'>
<div style='position:relative;height:210px'>
<div id="player"></div>
</div>
</div>
</div>
Here is my situation. I have 3 divs on my website. There is a button in each of divs. Here is my codes :
<div id="gg1">
<a class="btn">
</div>
<div id="gg2">
<a class="btn">
</div>
<div id="gg3">
<a class="btn">
</div>
May I know how to apply css style to 1 button only without effect on other 2 buttons Css or Jquery? Note that I cannot change the class and id of the buttons.
Use a descendant selector:
#gg1 a.btn {
/* styles here affect only a.btn elements within #gg1 */
}