So, I am doing an assignment for my high school web design class, and I am having trouble getting the z-index of an image to change. There is supposed to be 2 images on top of each other. When you click the button on the page, the image on bottom will come to the top (or the top image will go to the bottom). Here is my code that I`m using:
The javascript
<script type="text/javascript">
function Switch()
{
document.getElementById("mononoke2").style.zIndex = "-1";
}
And here is the HTML
<div id="mononoke2">
<img src="mononoke2.png" alt="ashandsan">
</div>
<div id="mononoke3">
<img src="mononoke3.jpg" alt="sanandmoro" width="1234" height="694">
</div>
<button type="button" onclick="Switch()">Flippity Flip</button>
And the CSS
#mononoke2 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: absolute;
z-index: 100;
}
#mononoke3 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: relative;
left: 50px;
z-index: 20;
}
use jQuery.
$("#id").css("zindex","-1");
Change your JS function to this:
function Switch() {
var element = document.getElementById("mononoke2");
var style = window.getComputedStyle(element);
var index = style.getPropertyValue("z-index");
if(index > 0)
{
document.getElementById("mononoke2").style.zIndex = "-30";
}
else
{
document.getElementById("mononoke2").style.zIndex = "100";
}
}
Related
I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>
You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.
I've built this gallery
https://jsfiddle.net/ramamamagagaulala/do4yLxcz/
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
console.log(images)
let closeButton = document.getElementById("closee");
images.forEach(function(ref) {
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
})
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
basically, it works like this:
you click an item.
JavaScript checks what IMG this item contains.
a modal window opens up.
then the IMG that is associated with the item, is going to be displayed as the background image of this modal.
So far so good, however, I would like to build a function so I can press the arrow keys on my keyboard and the next image is going to be displayed.
What I've tried is to select the IMG of the nextSibling while clicking. Then I have used this variable to set up the background image of the modal window. But this only worked once.
Any ideas what to try next?
I would suggest have list of images urls in an array in .js file, and then you show one modal, click right/left and just change img src value to next/previous array element, untill get to either end of array.
There are three things we need to do for this problem
Storing the image source in an array
Keep track of the position of the image index
Add an event listener to track the keypress for next & prev button on your keyboard
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
let closeButton = document.getElementById("closee");
let currentIndex = -1;
let imgSrc = [];
images.forEach(function(ref,index) {
imgSrc.push(ref.children[0].getAttribute("src"));
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
currentIndex = index
});
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
let doc = document.getElementById("work");
window.addEventListener("keydown", event => {
if(event.keyCode === 39){
// next event
if(currentIndex < imgSrc.length -1 ){
main.style.backgroundImage = `url( ${imgSrc[currentIndex+1]} )`;
currentIndex=currentIndex+1;
} else {
alert("Reached last image")
}
} else if(event.keyCode === 37){
// prev event
if(currentIndex > 0){
main.style.backgroundImage = `url( ${imgSrc[currentIndex-1]} )`;
currentIndex=currentIndex-1;
} else {
alert("Reached first image")
}
}
});
.work-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
img {
width: 250px;
}
.work-item__img{
width: 100%;
height: 100%;
display: block;
transition: all 1s linear;
opacity: 1;
object-fit: cover;
transform: scale(1.1);
}
/* modal */
.work-modal{
display: none;
}
.work-modal--show{
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
display: grid;
justify-content: center;
align-items: center;
}
.work-modal__item{
height: 70vh;
width: 80vw;
border:0.5rem solid var(--yellow);
border-radius: 0.4rem;
}
#media screen and (min-width:768px){
.work-modal__item{
height: 80vh;
width: 60vw;
}
}
.work-modal__close{
position: fixed;
font-size: 3rem;
color: var(--brightYellow);
bottom: 5%;
right: 5%;
transition: color 0.5s linear;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.work-modal__close:hover{
color: red;
}
<section class="work section-padding" id="work">
<div class="work-container">
<div class="work-item item-1">
<img src="https://images.pexels.com/photos/2683138/pexels-photo-2683138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-2">
<img src="https://images.pexels.com/photos/2736220/pexels-photo-2736220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-3">
<img src="https://images.pexels.com/photos/2928178/pexels-photo-2928178.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" class="work-item__img">
</div>
</div>
</section>
<div class="work-modal">
<div class="work-modal__item"></div>
<div class="work-modal__close">
<i id="closee" class="fas fa-window-close">close</i>
</div>
</div>
JS Fiddle
https://jsfiddle.net/aamin89/b5wp3kez/1/
I'm building a little site with full page horizontal and vertical scrolling. Check out a codepen demo here. There is a bug with the demo, the 'left' and 'up' buttons don't work how they're supposed to. The 'right' and 'down' buttons work fine. I just threw that together to show you what I'm talking about (excuse my inline styling).
First off, I need to incorporate touchEvents to make the full page scrolling work on mobile devices. If the user swipes left, right, down, or up, the page should move accordingly. I'm still learning the fundamentals of JS and I have no idea where to start with that.
Secondly, I have a few doubts about whether or not I'm using best practices in my JS. For one thing, I repeat myself a lot. For another, I'm pretty sure there's a simpler method for what I'm trying to do. I'd appreciate it if you could take a look at my code and give me some suggestions. Thanks!
You need to modify these two in CSS:
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
First one: When the up button is clicked, it will move 100vh down from top position.
Second one: When the left button is clicked, it will move 100vw right from left position.
As far as for mobile phones, I'd suggest try using:
Hammer.js : https://hammerjs.github.io/
Or Refer this answer: https://stackoverflow.com/a/23230280/2474466
And you can reduce the lines of code by cooking up a function and calling it like this: (Make sure to declare panel2 variable globally)
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}
The function swiper takes a single argument dir which determines in which direction it has to be moved. And you can concatenate the dir with cslide- to move the center container. And use if/else conditions to determine which panel to move and use the same idea for it as well.
And to make it more simpler and a bit efficient, if you're not making use of any other eventlisteners for the buttons or panels and the only aim is to toggle the class around, you can just use inline onClick="swiper('direction');" attribute on the panels and buttons to trigger it only when needed instead of defining the eventlisteners in the script.
var panel2;
var panelC = document.getElementById('center');
var panelU = document.getElementById('up');
var panelR = document.getElementById('right');
var panelD = document.getElementById('down');
var panelL = document.getElementById('left');
var btnU = document.getElementById('btn-up');
var btnR = document.getElementById('btn-right');
var btnD = document.getElementById('btn-down');
var btnL = document.getElementById('btn-left');
var btnUBack = document.getElementById('btn-up-back');
var btnRBack = document.getElementById('btn-right-back');
var btnDBack = document.getElementById('btn-down-back');
var btnLBack = document.getElementById('btn-left-back');
btnU.addEventListener('click', function() {
swiper("up");
});
btnUBack.addEventListener('click', function() {
swiper("up");
});
btnR.addEventListener('click', function() {
swiper("right");
});
btnRBack.addEventListener('click', function() {
swiper("right");
});
btnD.addEventListener('click', function() {
swiper("down");
});
btnDBack.addEventListener('click', function() {
swiper("down");
});
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}
* {
margin: 0;
padding: 0;
transition: 1.5s ease;
-webkit-transition: 1.5s ease;
overflow: hidden;
background: white;
}
.panel {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
border: 1px solid blue;
}
.btn {
position: absolute;
padding: 16px;
cursor: pointer;
}
#center {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
#center.cslide-right {
left: -100vw;
}
#center.cslide-down {
top: -100vh;
}
#up {
top: -100vh;
}
#up.slide-up {
top: 0;
}
#right {
right: -100vw;
}
#right.slide-right {
right: 0;
}
#down {
bottom: -100vh;
}
#down.slide-down {
bottom: 0;
}
#left {
left: -100vw
}
#left.slide-left {
left: 0;
}
<div class="panel" id="center">
<div class="btn" id="btn-up" style="text-align: center; width: 100%;">
up
</div>
<div class="btn" id="btn-right" style="right: 0; top: 50%;">
right
</div>
<div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;">
down
</div>
<div class="btn" id="btn-left" style="top: 50%;">
left
</div>
</div>
<div class="panel" id="up">
<div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;">
back
</div>
</div>
<div class="panel" id="right">
<div class="btn" id="btn-right-back" style="left: 0; top: 50%;">
back
</div>
</div>
<div class="panel" id="down">
<div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;">
back
</div>
</div>
<div class="panel" id="left">
<div class="btn" id="btn-left-back" style="right: 0; top: 50%;">
back
</div>
</div>
I need to build inline rating for tv shows for example. Max rating I put in jQuery code, current rating in html document. This is how I found the way to do this.
$(document).ready(function() {
var maxRating = $('.rate-line').width();
var maxRating = 6; //max-rating
var currentRatingFirst = $('.first-rd').text();
var calc = (currentRatingFirst / maxRating) * 100 + "%";
$('.first-rl span.fill').width(calc);
});
.rate-line {
border: 1px solid #bababa;
background: #fff;
position: relative;
vertical-align: middle;
margin-right: 1.25em;
overflow: hidden;
width: 50%;
height: 20px;
}
.rate-line, .rate-data, .fill {
display:inline-block;
}
.fill {
background: #ff6292;
height: 22px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">4.56</span>
</div>
But, I need to create 6 rating lines for this month, then 6 for next and so on. And every time I must give new unique classes to make it work. And code becomes huge. And one more, all this rating nested to bootstrap carousel items and when I duplicate it nothing works .I'm not good in JavaScript at all and I'm asking your help. Would you please tell me how to make it work correctly and make it easier?
In this case it makes sense to create basin custom plugin, so you can easily reuse it without duplicating code.
Here is a very basic example of how you can extend jQuery prototype with a new method:
$.fn.rating = function(options) {
return this.each(function() {
var maxRating = $(this).find('.rate-line').width();
var maxRating = 6;
var currentRatingFirst = $(this).find('.first-rd').text();
var calc = (currentRatingFirst / maxRating) * 100 + "%";
$(this).find('.first-rl span.fill').width(calc);
});
};
$(document).ready(function () {
$('.rating').rating();
});
.rate-line {
border: 1px solid #bababa;
background: #fff;
position: relative;
vertical-align: middle;
margin-right: 1.25em;
overflow: hidden;
width: 50%;
height: 20px;
}
.rate-line, .rate-data, .fill {
display:inline-block;
}
.fill {
background: #ff6292;
height: 22px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">4.56</span>
</div>
<div class="rating">
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">3.21</span>
</div>
I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/
See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.
You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look
The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});
Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>
$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}
$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.
This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}