I'm pretty new with jQuery, and I'm doing fine with basics, but still can't figure out some things with advance use.
This is my example
jQuery('.hp-single-service a').hover(function() {
jQuery('.above-content').slideToggle("slow", function() {
jQuery('.above-content').css({
"height": "20%",
"bottom": "0"
});
jQuery('.above-content-inner').css("padding-top", "2%");
});
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
I'm trying to create jQuery that will on hover toggle .above-content div to height:20%; bottom:0; and give padding-top:2%; to .above-content-inner div.
For start I'm not sure that slideToggle() is right function for this, so if anyone have better suggestion I'm open for it, just to make this work.
You can even do the same with CSS 3 transitions. Please refer to the following link https://jsfiddle.net/osha90/4kyLgat1/
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
CSS CODE
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
bottom: 0%;
transition: all 1s ease-out;
}
.hp-single-service a:hover .above-content{
height: 20%;
bottom: 0%;
}
.hp-single-service a:hover .above-content-inner{
padding-top: 2%;
transition: all 1s ease-out;
}
I believe you're looking for something like this:
jQuery('.hp-single-service a').hover(function() {
jQuery(this).find('.above-content').animate({
"height": "20%",
"bottom": "0"
});
jQuery(this).find('.above-content-inner').css("padding-top", "2%");
},
function() {
jQuery(this).find('.above-content').animate({
"height": "100%",
"bottom": "auto"
});
jQuery(this).find('.above-content-inner').css("padding-top", "0");
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
Don't forget that .hover() takes two callback functions as parameters - the first one is the mouseover and the second one is the mouseout.
Related
I am trying to create a carousel with JavaScript.
I want to have 5 slides to show by default. then we can use the left and right arrows to slide the next and back.
I cannot find any resources to learn this.
Can some give me an idea of how I should do this?
I am not asking for a solution. I just want the idea to run by myself to learn it.
#home-b .listing-carousel {
position: relative;
height: 400px;
width: 80%;
}
#home-b .listing-carousel .carousel-track-container {
position: relative;
background: #f40c43;
height: 100%;
}
#home-b .listing-carousel .carousel-slide {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#home-b .listing-carousel .carousel-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#home-b .listing-carousel .carousel-btn {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: #f9f9f9;
border-radius: 50%;
padding: 0.45rem 0.5rem;
cursor: pointer;
}
#home-b .listing-carousel .carousel-btn-left {
left: -3rem;
}
#home-b .listing-carousel .carousel-btn-right {
right: -3rem;
}
<div class="listing-carousel mx-auto text-center">
<button class="carousel-btn carousel-btn-left">
<i class="fas fa-long-arrow-alt-left fa-2x"></i>
</button>
<div class="carousel-track-container">
<ul class="carousel-track">
<li class="carousel-slide">
<img
class="carousel-image"
src="assets/img/featured-1.png"
alt="featured-listing-1"
/>
</li>
<li class="carousel-slide">
<img
class="carousel-image"
src="assets/img/featured-2.png"
alt="featured-listing-2"
/>
</li>
<li class="carousel-slide">
<img
class="carousel-image"
src="assets/img/featured-3.png"
alt="featured-listing-3"
/>
</li>
</ul>
</div>
<button class="carousel-btn carousel-btn-right">
<i class="fas fa-long-arrow-alt-right fa-2x"></i>
</button>
</div>
CSS transition is not working on backdrop-filter if I use overflow:hidden on parent element.
Example code:
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
Example video: https://take.ms/fo80F
The real culprit seems to be the border-radius.
Sounds like a bug and I couldn't find one (though there are many related since this whole background-filter feature is still full of bugs both in the implementation and the specs), so you might want to report it directly to the ones that can do something about it.
Note that a workaround is to use a clip-path instead of this border-radius:
.image-wrapper {
width: 200px;
position: relative;
line-height: 0
}
.clip-me {
clip-path: inset(0px 0px round 6px 6px);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition working but overflow is now useless)</h4>
<div class="image-wrapper clip-me" style="overflow: hidden;">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
For a couple of reasons I would suggest simplifying the code as shown below. I believe it does the same thing you want and is more cross-browser compatible -- as Firefox doesn't currently support backdrop-filter.
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.image-wrapper img {
max-width: 100%;
height: auto;
filter: blur(0);
transition-duration: .5s;
}
.image-wrapper img:hover {
filter: blur(15px);
}
<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>
Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.
The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
The following code I have used:
// Code goes here
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
show and hide onclick
I am able to show and hide onclick of button. My requirement is when I click on that button its icon should change and if I click inside sidebar (on sidebar items) sidebar should hide. Can anyone improve my script to achieve it?
$(document).ready(function(){
$('.sidebar').on('click','a',function(e){
var href = $(this).attr('href');
$('iframe').attr('src', href);
e.preventDefault();
//console.log(e.target);
toggleMenu();
})
});
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
$('#menu-button').find('.glyphicon')
.toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
border: solid 1px #eee;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 5%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button class="btn btn-default" onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
On click of an edit link I show a window in which I want to use Jcrop for editing.
After I click the 'Edit A' link it works fine. But when I click 'Edit B', it keeps showing the first image.
When I click 'Edit B' first' the opposite happens.
I don't know why, but it seems as if my Jcrop function fails the second time.
Links to images that can be edited:
<a id="btnEditThumb" href="#" onclick="return CropThumb(6544,'879_146_iStock-000002025938Small.jpg');">Edit A</a>
<a id="btnSetThumb" href="#" onclick="return CropThumb(6543,'879_497_iStock-000014805179Small.jpg');">Edit B</a>
<img src="" id="targetimage" alt="" />
<input type="hidden" id="imgid" />
<input type="hidden" id="workingimage" />
function jCrop() {
var jcrop_api,boundx,boundy,
xsize = 1;
ysize = 1;
console.log($('#targetimage').attr('src'));
//the target image element is updated correctly, however, it seems as if the .Jcrop function is not applied again.
$('#targetimage').Jcrop({
onChange: storeCoords,
onSelect: storeCoords,
minSize: [190, 190],
maxSize: [$('#targetimage').width(), $('#targetimage').height()],
aspectRatio: xsize / ysize
}, function () {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
jcrop_api.setSelect([0, 0, 190, 190]);
});
}
function CropThumb(imgId, filename) {
$('#targetimage').attr('src', 'http://www.mydomain.com/images/original/' + filename);
$('#imgid').val(imgId);
$('#workingimage').val(filename);
jCrop();
//show edit lightbox
centerPopup('cropwindow', 'backgroundPopup');
loadPopup('cropwindow', 'backgroundPopup');
}
But after the jCrop function is executed, the image references in the jcrop-holder div are not updated as well.
So I'm assuming my .Jcrop function is not taking in the new src attribute value of the #targetimage element.
<div class="jcrop-holder" style="width: 850px; height: 565px; position: relative; background-color: rgb(0, 0, 0);">
<div style="position: absolute; z-index: 600; width: 190px; height: 190px; top: 0px; left: 0px;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 850px; height: 565px;">
<div class="jcrop-hline" style="position: absolute; opacity: 0.4;">
</div>
<div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;">
</div>
<div class="jcrop-vline right" style="position: absolute; opacity: 0.4;">
</div>
<div class="jcrop-vline" style="position: absolute; opacity: 0.4;">
</div>
<div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;">
</div>
</div>
<div style="width: 100%; height: 100%; z-index: 320; display: block;">
<div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;">
</div>
<div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;">
</div>
<div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;">
</div>
<div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;">
</div>
<div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;">
</div>
<div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;">
</div>
<div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;">
</div>
<div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;">
</div>
<div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;">
</div>
<div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;">
</div>
<div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;">
</div>
<div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;">
</div>
</div>
</div>
<div class="jcrop-tracker" style="width: 854px; height: 569px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;">
</div>
<input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
<img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" alt="" style="display: block; visibility: visible; width: 850px; height: 565px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.6;">
</div>
Jcrop works only for one image, when the element is created. The image that you see is not changed because the image element displayed is created by Jcrop, and yours is hidden (display:none). The most simple solution is re-create your image element every time the image is changed.
In the HTML, replace the img tag with a containing div for the image:
<div id="targetimagewrapper"></div>
And the CropThumb function:
function CropThumb(imgId, filename) {
var image = $('<img src="http://www.mydomain.com/images/original/' + filename + '" id="targetimage" alt="" />');
image.load(function(){
$('#imgid').val(imgId);
$('#workingimage').val(filename);
jCrop();
//show edit lightbox
centerPopup('cropwindow', 'backgroundPopup');
loadPopup('cropwindow', 'backgroundPopup');
};
$('#targetimagewrapper').empty().append(image);
}