HTML:
<div id="lowerLayer">
<div id="positionLayer">
<div id="imageLayer">
<div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');">
</div>
</div>
</div>
</div>
CSS:
#lowerLayer
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-color: Green;
cursor: help;
}
#positionLayer
{
position: relative;
margin-top: 80px;
width: 100%;
background-color: Red;
}
#imageLayer
{
position: relative;
width: 450px;
height: 400px;
margin: auto;
background-color: Blue;
background-image: url('../Images/Large-image-holder.png');
}
#imageHolder
{
position: absolute;
left: 25px;
top: 25px;
width: 400px;
height: 300px;
line-height: 300px;
background-position: center;
background-repeat: no-repeat;
background-color: Aqua;
}
JQuery:
$(document).ready(function() {
$("#lowerLayer").click(function() {
$(this).fadeTo("fast", 0, function() {
$(this).hide(0);
});
});
});
});
Edit:
the problem im having us that the click event seems to be applied to all sub divs i just want it to apply to "#lowerLayer"
I think this will solve your problem:
$(document).ready(function() {
$("#lowerLayer").click(function(e) {
// Return if it's a child that's clicked:
if (e.target !== this) {return;}
// Otherwise continue:
$(this).fadeTo("fast", 0, function() {
$(this).hide(0);
});
});
});
});
Leaving event delegation and bubbling aside, since I don't think it is relevant to the actual problem here.
The jQuery hide() method applies display: none to the styles for an element. If an element is not displayed, then none of its descendants are either. Likewise, fadeTo() reduces the opacity, which also has an effect on the descendents of an element.
Related
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>
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
I want to slide out my both sidebars and expand the width of my middle content div but at the same time and on a again click I want to toogle it back to original.
What I tried so far
$('.headbar').click(function () {
$(".leftside").animate({width: 'toggle'});
$( ".rightside" ).animate({
width: "toggle"
}, 300, function() {
$(".content").animate({width: '1200px'});
});
});
My Problems
headbar is flashing when animation start (but guess its CSS bug)
content is not toggle back to original
My Concept for understanding
I would approach this using a CSS class transition effect toggled by jQuery instead of using jQuery animate function.
Working Demo:
$(document).ready(function() {
$('body').on('click', '.headbar', function(){
$('body').toggleClass('expanded');
});
});
.headbar {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
margin-top: -40px;
}
.leftside {
position: fixed;
left: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.rightside {
position: fixed;
right: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.scrollable {
position: relative;
top: 20px;
min-height: 700px;
width: 70%;
margin: 0 auto;
box-shadow: 0px 1px 5px;
background: white;
}
/* ===================== */
/* expanded transition
/* ===================== */
.leftside, .rightside, .scrollable {
transition:0.3s;
}
body.expanded .scrollable {
width:100%;
}
body.expanded .leftside {
left: -100%;
}
body.expanded .rightside {
right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>
jsFiddle
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.
I have the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?
I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".
#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}
And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}
Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});