When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}
Related
I'm trying to learn how to use the parallax effect using simple JavaScript and CSS.
my JavaScript is :
window.addEventListener('scroll', function(){
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
from my understanding of things, it should make the element called third and second scroll left by the same value as the vertical scroll. But it doesn't work and I can't find what's the problem here.
My whole code is:
* {
scroll-behavior: smooth;
}
body {
size: 100%;
margin-top: 0px;
margin-left: 0px;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#sixth {
z-index: 10;
}
#text {
position: absolute;
color: white;
white-space: nowrap;
font-size: 7.5vw;
z-index: 9;
}
<section>
<img src="Plan-parallax-1.png" id="first">
<img src="Plan-parallax-2.png" id="second">
<img src="Plan-parallax-3.png" id="third">
<img src="Plan-parallax-4.png" id="fourth">
<img src="Plan-parallax-5.png" id="fifth">
<h2 id="text">Monde parallele</h2>
<img src="Plan-parallax-6.png" id="sixth">
</section>
<script>
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
</script>
If your code is simplified down to just focus on the question of moving an element based on scroll, it works fine. Example included
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
})
* {
scroll-behavior: smooth;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<body style="size: 100%; margin-top: 0px; margin-left: 0px;">
<section>
<img src="https://picsum.photos/600" id="second">
</section>
</body>
</html>
I want to add a preloader to my website and I have this code:
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;
}
</style>
Instead of this simple fadeout effect, I want it to look like curtains closing, just like the following example:
Any idea how to achieve this unique fadeout effect based on the code I have?
Thank you!
Cover the background with a centered white box and let it collapse to 0 width.
setTimeout(() => {
$("#loader .logo").animate({ opacity: 0 }, 1000);
$("#loader .cover").animate({ width: "0%" }, 1000, () => {
$("#loader").hide(); // When animation is complete hide the element.
});
}, 1500);
#bg {
background: url('http://placekitten.com/630/195');
width: 630px;
height: 195px;
position: absolute;
}
#loader {
position: fixed;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader .logo {
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 150px;
height: 150px;
}
#loader .cover {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
}
body { margin: 0 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="loader">
<div class="cover"></div>
<div class="logo"></div>
</div>
I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});
You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>
$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.
Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});
See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.