Develop Reference

anchor tag in not making div clickable

i am trying to make a whole div clickable, i did the following
<a href=""><div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div></a>
but he div is not becoming clickable, can anyone please tell me whats wrong in my code?

Try
<div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb" onClick="javascript:window.location='//stackoverflow.com'">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div>

First of all, you can't have a div inside a. I mean, technically in some environments it works, but its against specification, so you can't rely on that structure. If you want to have a div wide link you better have your a absolutely positioned and stretched to fit your div

You can use javascript, in the code below I created a function that adds click event handlers instead of using a tags which can't be put inside each other.
Also included an example of how to style the div (see clickable css class).
function addLink(divId, url){
let div = document.getElementById(divId);
div.setAttribute('data-link-url', url);
link1.addEventListener('click', function(e){
window.location = this.getAttribute('data-link-url');
});
}
addLink('link1', 'https://stackoverflow.com');
.clickable{
cursor: pointer;
}
<div id="link1" class="clickable">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">text</h3>
<div class="view">(19,805)</div>
</div>
</div>

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">

JQuery - Slide div until section end

I'm looking for some help. I'm new to JQuery and I wrote a script for My Site:
jQuery(document).ready(function( $ ){
$(function() {
var $spcright = $(".single-product-content-right"),
$spcleft = $(".single-product-content-left"),
$spcbottom = $(".single-product-content-bottom"),
$window = $(window),
offset = $spcright.offset(),
height = $spcleft.height() - $spcright.height(),
topPadding = 45;
$window.scroll(function() {
if ($window.scrollTop() < height && $window.width() > 768) {
console.log(height);
$spcright.css('position', 'fixed').css('margin-top', '0');
$spcright.addClass('spc_right');
} else if($window.scrollTop() >= height && $window.width() > 768) {
$spcright.css('position', 'absolute').css('margin-top', height+'px');
$spcright.removeClass('spc_right');
} else if($window.width() < 768) {
$spcright.css('position', 'relative').css('margin-top', '0px');
$spcright.removeClass('spc_right');
} else {
$spcright.stop().animate({
marginTop: 0
});
}
});
});
});
The purpose is to have the description slide down with the images as you scroll until the end of the div with images (where it would stop). I can't quite seem to get the height nailed.
I tried calling $(".single-product-content-left").height(), but that only retreived a value of 200px and not the actual container height (which left me confused). I've been trying other ways, but it doesn't quite seem to work.
TL;DR: Need to retrieve height of left div (.single-product-content-left), but I am struggling to do so. Please help.
Edit: HTML for the section
<div class="single-product-content row">
<div class="single-product-content-left col-sm-6 col-xs-12">
<div class="gem-gallery gem-gallery-hover-default"> <div class="ly-gallery-item ly-gallery1" data-image-id="27245">
<div class="ly-gallery-item-image ly-gallery-item1">
<img class="27245 img1" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/1.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery2" data-image-id="27244">
<div class="ly-gallery-item-image ly-gallery-item2">
<img class="27244 img2" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/4.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery3" data-image-id="27243">
<div class="ly-gallery-item-image ly-gallery-item3">
<img class="27243 img3" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/3.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery4" data-image-id="27242">
<div class="ly-gallery-item-image ly-gallery-item4">
<img class="27242 img4" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/2.jpg" alt="" class="img-responsive">
</div>
</div>
</div> </div>
<div class="single-product-content-right col-sm-6 col-xs-12">
<h2 class="product_title" style="color: #111111;">Test Board</h2><p class="price"><span class="woocs_price_code" data-product-id="26570"></span></p>
<div class="product-content entry-content"><p>Do you want to take a board everywhere you go but don’t want to lug around some giant piece of wood? We’ve managed to eliminate all the awkward from your life with the tiny Dinghy 24. It’s compact for quick moves through the streets, letting you dodge those human pylons as they drag their heels on their way to somewhere boring. But not you, you’re always headed somewhere epic with your Dinghy 24!</p>
<p>The quality and performance are unmatched, we could get into the details, but you’ll understand better when it’s under your feet.</p>
<p>24″ Length I 6.5″ Width I 14″ Wheelbase</p>
<p>100% Canadian Maple</p>
</div>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="26570" data-product_variations="[]">
<p class="stock out-of-stock">This product is currently out of stock and unavailable.</p>
</form>
</div>
</div>

How can I use jQuery to highlight ONLY the selected thumbnail?

Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!

How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.

$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});

Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.

As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});

This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});

Odd jQuery Mouseover/out Behavior

I have a bit of an issue.
I have a grid of images (3x3), and have a function to swap the image, and show a "content" panel.
While the 1st 2 rows appear to show the content area properly, the bottom row goes in and out and in and out and in and out, etc...
What is causing this behavior, and how can I fix it?
Fiddle
http://jsfiddle.net/o7thwd/4s9GT/
Please excuse the hover image... seems jsfiddle doesn't like it or something... but rest assured that in the site, it works..
Code - jQuery 1.7
// panel grid image swapper
$('.panel img').mouseover(function() {
var $this = $(this);
var src = $this.attr("src").match(/[^\.]+/) + "-hover.png";
$this.attr("src", src);
// Show data panel
$('.' + $this.attr('data-panel')).show('fast');
}).mouseout(function() {
var $this = $(this);
var src = $this.attr("src").replace("-hover.png", ".png");
$this.attr("src", src);
// Hide data panel
$('.' + $this.attr('data-panel')).hide('fast');
});
HTML
<div class="panel-3-image-grid">
<div class="panel1 panel">
<img src="/core/images-tmp/panel-images/panel-3/image1.png" alt="" data-panel="panelGrid-1-content" />
<div class="panelGrid-content panelGrid-1-content">Panel 1</div>
</div>
<div class="panel2 panel">
<img src="/core/images-tmp/panel-images/panel-3/image2.png" alt="" data-panel="panelGrid-2-content" />
<div class="panelGrid-content panelGrid-2-content">Panel 2</div>
</div>
<div class="panel3 panel">
<img src="/core/images-tmp/panel-images/panel-3/image3.png" alt="" data-panel="panelGrid-3-content" />
<div class="panelGrid-content panelGrid-3-content">Panel 3</div>
</div>
<div class="panel4 panel">
<img src="/core/images-tmp/panel-images/panel-3/image4.png" alt="" data-panel="panelGrid-4-content" />
<div class="panelGrid-content panelGrid-4-content">Panel 4</div>
</div>
<div class="panel5 panel">
<img src="/core/images-tmp/panel-images/panel-3/image5.png" alt="" data-panel="panelGrid-5-content" />
<div class="panelGrid-content panelGrid-5-content">Panel 5</div>
</div>
<div class="panel6 panel">
<img src="/core/images-tmp/panel-images/panel-3/image6.png" alt="" data-panel="panelGrid-6-content" />
<div class="panelGrid-content panelGrid-6-content">Panel 6</div>
</div>
<div class="panel7 panel">
<img src="/core/images-tmp/panel-images/panel-3/image7.png" alt="" data-panel="panelGrid-7-content" />
<div class="panelGrid-content panelGrid-7-content">Panel 7</div>
</div>
<div class="panel8 panel">
<img src="/core/images-tmp/panel-images/panel-3/image8.png" alt="" data-panel="panelGrid-8-content" />
<div class="panelGrid-content panelGrid-8-content">Panel 8</div>
</div>
<div class="panel9 panel">
<img src="/core/images-tmp/panel-images/panel-3/image9.png" alt="" data-panel="panelGrid-9-content" />
<div class="panelGrid-content panelGrid-9-content">Panel 9</div>
</div>
</div>
CSS
.panel-3{height:515px;width:990px;margin:0 auto;clear:both;position:relative;z-index:1;}
.panel-3-content{width:480px;float:left;padding-top:160px;}
.panel-3-image-grid{width:475px;float:left;padding-top:20px;}
.panel-3-image-grid div.panel{width:154px;height:154px;float:left;margin-right:3px;margin-bottom:3px;}
.panel-3-image-grid div.panel:hover, .panel-3-image-grid div.panel:active, .panel-3-image-grid div.panel.active{
}
.panel-3-image-grid div.panel:last-child{margin-right:0;}
.panelGrid-content{display:none;position:absolute;width:154px;height:310px;background:#c8deed;}
.panelGrid-1-content, .panelGrid-2-content, .panelGrid-3-content{margin-top:3px;}
.panelGrid-4-content, .panelGrid-5-content{margin:-154px 0 0 157px;}
.panelGrid-6-content{margin:-154px 0 0 -157px;}
.panelGrid-7-content, .panelGrid-8-content, .panelGrid-9-content{margin-top:-314px;}

This is caused by the data panel growing until it is beneath the mouse pointer, which triggers a mouseout on the panel image, which causes the data panel to shrink until it's no longer beneath the pointer, which triggers the mouseenter on the panel image again...

The content panel gets shown on top of the image. If you look at the other rows, it is placed next to or under the image.
Because the content panel is in front of the image, the mouseover event is no longer getting fired for the image (because the mouse is now over the content panel). This is causing it to hide the content panel, which means the mouse is over the image again and a loop is formed.
To break this loop, you either need to attach the mouseover event to the .panel elements (because the mouseover event is going to bubble up there if its over either the image or the content panel) or make sure the content panel is never on top of the image.