Develop Reference

Our dropdown is tabbable even when not expanded

We want our dropdown to be tabbable once expanded but non tabbable when not expanded. We have tried tabindex="-1" on the content in the expandable div but that made it non tabbable even once expanded. We have no idea on how to to solve this and would be grateful to any tips.
<div class="container">
<div class="accordionContent">
<div class="accordionItem">
<button class="itemHeader itemQuestion">
Text
<span class="itemIcon">
<i class="bx bx-chevron-down"></i>
</span>
</button>
<div class="itemContent">
<p class="itemAnswer">
<button>Example</button>
</p>
</div>
</div>
</div>
</div>

I dont know exactly what you want to do but If you want to showdiv.itemContent with click on the button.itemHeader you can do this :
-set display:none ;for div.itemContent
-use onclick event for button.itemHeader. And call this function :
function myfunction(){ document.getElementsByClassName[0]("itemContent").style.display=block; }

Jquery code only working when display not none

I have a cart icon. When I hover on the cart icon display of one div changes from display:none to display:block means that div only appears when I hover on cart icon. This div contains one button View Cart on clicking which I need to alert something.
This is my code which I typed in console. But it only works when I first hover the icon (hovering icon changes display:none of a div to display:block) and then write on console. If I write this code in console before hovering it will not work.
$('#qa_cartletCartButton').click( function(){alert('yes');} );
ID of div: cartletDrop
ID of button: qa_cartletCartButton
These codes are also not working.
if ($('#cartletDrop').is(':hidden')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
if ($('#cartletDrop').is(':visible')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
This is the site HTML code which I am scraping.
<div class="shopping_cart">
<header class="header">
<a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
<span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
<span class="shopping_cart_quantity">3</span>
</a>
</header>
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
</div>
This line in html is empty before i hover.
<section style="display: none;" id="cartletDrop" data-refresh="0">
</section>
Once i hover in cart icon it's now like this.Only display property changes.
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
seems html inside section tag is not present before first hover.

Media Query using Javascript/JQuery - Changing image depending on screen size

I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.
I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?
Here's my HTML of the carousel's first slide:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<i class="fa fa-play fa-fw"></i> Watch a Video
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Here's my jQuery :
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>

Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});

How about srcset?
<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">

Manipulate css style of a class depending on other class css style

I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?

Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.

Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.

I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.

Lightbox functinality with html content (Bootstrap Thumbnails)

plz help me(beginner) to solve a problem.
I am coding a site with bootstrap 3. I have bootstrap thumbnail on it.
when user will click an specific link in the thumbnail, it will show in an modal/popup.
modals primary contents will be same with the thumbnail was clicked.
but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail.
There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view.
by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel).
The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview,
or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality.
Please don't answer with just a lightbox plugin link, i want to use the basic jquery.
Here's the thumbnails in my html:
<div class="container" id="lightbox">
<div class="row">
<div class="lightbox-thumbs-wrap">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon2.png">
<h3>Description heading2</h3>
<p>
Description2 details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
</div>
</div>
And, the modal i want will look like:
<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
click to close modal
<div class="container-fluid">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->
<a class="next-img"><img src="img/xyz/next.png"></a>
<a class="prev-img"><img src="img/xyz/prev.png"></a>
</div>
</div>
</div>

Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.
Secondly read Varying modal content based on trigger button at Bootstrap's docs.
And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/
First create a array of object that describe your images / thumbs:
var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'});
}
Alternatively you could read the above information from your thumb's grid.
html of the modal
You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: http://getbootstrap.com/javascript/#modals
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->
<a class="prev-img btn btn-primary">Previous</a>
<a class="next-img btn btn-primary">Next</a>
</div>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div>
A button to open the modal can look like that shown below:
<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
First Thumb
</button>
The on click event of the above button:
$('.openmodal').on('click',function(){
setModalContent($( this ).data('thumb'));
$('#myModal').modal('show');//pop up modal
});
The setModalContent function used in the preceding code can look like as follows:
function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}
And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:
$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});