Develop Reference

How to toggle only the class for the element whose button is clicked with jQuery. Currently it toggles all elements with same class

I am trying to open and close elements by toggling a class on the click event. I am using jQuery. But on clicking, all elements get opened (which have the same class), however, I only want the one which is clicked to be opened. Here's the link to the demo page
$(function() {
$(".image-button-wrapper").addClass("photo-btn");
$(".design-layout-card").addClass("menu-plugin");
$(".design-layout-card").addClass("unactive");
$(".image-button-wrapper").click(function() {
$(".design-layout-card").toggleClass("unactive", 1000);
})
});
<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1660582617675_7984">
<div class="sqs-block-content" id="yui_3_17_2_1_1660757592153_72">
<figure class="sqs-block-image-figure image-block-outer-wrapper image-block-v2 design-layout-card combination-animation-none individual-animation-none individual-text-animation-none image-position-left image-linked sqs-narrow-width sqs-text-ready menu-plugin unactive"
data-scrolled="" data-test="image-block-v2-outer-wrapper" id="yui_3_17_2_1_1660757592153_71">
<div class="intrinsic" id="yui_3_17_2_1_1660757592153_70">
<div class="image-inset" data-animation-role="image" data-description="" id="yui_3_17_2_1_1660757592153_69">
<div class="sqs-image-shape-container-element content-fit" style="position: relative; overflow: hidden;" id="yui_3_17_2_1_1660757592153_68">
<noscript><img class="sqs-image-min-height" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" alt="" loading="lazy" /></noscript>
<img class="sqs-image-min-height loaded" data-src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" data-image="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
data-image-dimensions="900x900" data-image-focal-point="0.5,0.5" alt="" loading="lazy" data-parent-ratio="333.0" style="left: 166px; top: 0px; width: 1px; height: 1px; position: absolute;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg?format=500w"
/>
<div class="image-overlay" style="overflow: hidden;"></div>
</div>
</div>
</div>
<figcaption class="image-card-wrapper" data-width-ratio="">
<div class="image-card sqs-dynamic-text-container">
<div class="image-title-wrapper">
<div class="image-title sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
<p class="" style="white-space: pre-wrap;"><strong>Johnny Walker Black Dumplings</strong></p>
</div>
</div>
<div class="image-subtitle-wrapper">
<div class="image-subtitle sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
<p class="min-font-set" style="white-space: pre-wrap;">Local ground pork, Johnnie Walker Black Whiskey, green onion, sesame oil, sriracha aioli, sweet soy handmade by #TheRealDumplingKing.</p>
</div>
</div>
<div class="image-button-wrapper photo-btn">
<span class="item-photo-btn"><i class="br-ico"></i></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>

You can do it like this:
Just create a class for the selected item and remove it from everyone just before adding it again on the clicked item.
$(".list-item").on("click", function(){
$(".list-item").removeClass("active");
$(this).addClass("active");
});
ul li{
padding: 6px 15px;
list-style: none;
margin: 5px 0px;
border: 1px solid #000000;
cursor: pointer;
width: fit-content;
}
li.active{
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-item active">Option 1</li>
<li class="list-item">Option 2</li>
<li class="list-item">Option 3</li>
<li class="list-item">Option 4</li>
<li class="list-item">Option 5</li>
</ul>

How to customize caption of the bxlsider

I need to add the caption with in the image of slider and have to move each sliders,when clicked the respective captions.
I have added the captions: true in javasript,but still the captions are outside the images.And I need to customize the captions and replace them as text for the sliders.I have attached a sample image below to explain what I need. I have attached my code as well.
What changes I have to do to my code to get captions like this.
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
$('.bxslider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 1200,
slideWidth: 800
});
</script>

You should add a figure tag with a figcaption within your li list items, but they work. (I suppose you could add a span either?.. just thought of that)
If you opt to use to add the span, you would need to add display:block; to the css.
The figcaption with the caption text should be contained within the figure tag. Span tags should be included BEFORE the end of the closing </li>
For example (I've used figcaption here)
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
* {
margin: 0px;
padding: 0px;
}
.bxslider li img {
width: 200px;
height: 125px;
margin: 0px 5px;
padding: 10px 3px;
}
.bxslider {
list-style-type: none;
}
.bxslider li {
display: inline-block;
}
figcaption {
padding: 0!important;
margin: 0!important;
color: #2F4F4F;
text-align: center;
position: relative;
}
figure:hover,
figcaption:hover {
color: forestgreen;
background-color: yellow;
}
figure:active,
figcaption:active {
color: forestgreen;
background-color: blue;
}
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/js/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
<li>
<figure><img src="http://www.rachelgallen.com/images/daisies.jpg" />
<figcaption>Daisies</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/snowdrops.jpg" />
<figcaption>Snowdrops</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/mountains.jpg" />
<figcaption>Mountains</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" />
<figcaption>Yellow Flowers</figcaption>
</figure>
</li>
</ul>
the background color/padding/margin sizes are just for example, edit as you see fit..
Hope this helps
Fiddle

Why does body min-width not work alongside fixed divs?

Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>

I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.

Put fixed content to flex slider

Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li):
Flex slider default code:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding.
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>

Use a div outside positioned absolute; You can use css tricks to center.
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>

Jquery image overlay?

I'm looking to overlay an image in the right hand corner on another image using jquery.
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?

#Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
Wrap them in a containing element. Set the containing element to position:relative
Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event...
HTML:
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS:
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
Code:
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
See a working example here: http://jsfiddle.net/jsney/10/

You don't need jQuery for that, you can use CSS for that, for example
My Overlay
CSS
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
This is much easier solution and acceptable for everyone.

Let's assume your first image is wrapped inside a div.
1/ Add another div with a "display:none" style and a class of your choice
2/ On hover load the img (if it hasn't been done before) on the div
3/ slideToggle the div that contain the second image and voila !
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
Of course, you need to set the proper positioning style to the div containing the second image.

Here's a simple way I did it following thomas's code above.
In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox.
I need to do that alot so am using classes not ID's.
My image and overlay image are the same dimensions.
.hide just hides the overlay until the hover function show's it.
I'm not showing the lightbox stuff so it's clearer for this issue.
Notice that a.hoverTrigger wraps the .overlay img as well.
If you don't do that you will get the dreaded flickering effect.
markup:
<div class="merchImg">
<img src="_img/_new-store/item.png" />
<img class="overlay hide" src="_img/_new-store/overlay.png" />
</div>
css:
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
jquery:
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});

We also can achieve this using "jquery.ImageOverlay.js" plugin.
here is example for this.
ASPX Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
============================================================================
CSS :
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
Downloads :
Visit this link to download .js files and images files and live example of implementation in many ways.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html