Develop Reference

Modal stops working after image changes on page

Im building an app where you can like and dislike movies. I have a database of movies and show each one to the user. When you click like or dislike it takes you to the next poster.
I also have access to the description and rating. I've added my own modal to show the user when clicked more information on that movie.
The problem Im having is the modal works for the first movie and changes the class to active. However on the second one it stops working. I can see in the inspector the modal code is there and has the correct information for that movie. But the modal seems to still not work/become unresponsive. Perhaps its an error that I've missed. I notice that it does add active once again on the first item. Perhaps I need to find a way to switch to the current movie instead or incorporate the modal into the slides more? or find a way to reset it..
EDIT -:
Adding to the above. Having done a bit more testing. It seems like the modal doesnt know what id the slide is on.. So it never knows when the slide is changed.. Any ideas how I would do this?
EDIT2 -:
I've now got it so every modal has a unique id per poster using the contact.id. Any way to link the modal id together with the slides so when I change the slide the modal knows and changes to active on the next slide?
const modalBtn = document.querySelectorAll(".modal-btn");
const modalBg = document.querySelectorAll("movie-modal");
const modalClose = document.querySelectorAll(".close-button");
const overlay = document.querySelectorAll("overlay");
const overlayClose = document.querySelectorAll("overlay");
const activeModal = document.querySelectorAll(".movie-modal:first-child")
modalBtn.forEach(function(btn, index){
btn.addEventListener('click', function(click) {
console.log(click)
modalBg.classList.add('active');
overlay.classList.add('active');
var content_id = activeModal.data("id");
console.log(content_id)
});
});
modalClose.forEach(function(btn, index){
btn.addEventListener('click', function(click) {
console.log(click)
modalBg.classList.remove('active');
overlay.classList.remove('active');
});
});
overlay.forEach(function(overlay, index){
overlay.addEventListener('click', function() {
overlayClose.classList.remove('active');
});
});
overlay.forEach(function(overlay, index){
overlay.addEventListener('click', function() {
const modals = document.querySelectorAll('.movie-modal.active')
modals.forEach(modal => {
modal.classList.remove('active');
overlay.classList.remove('active');
})
})
});
$(function(){
var $activeSlide = $('#slides .slide:first-child');
// show first slide
$activeSlide.addClass("active");
// on click event decline
$("#decline").on("click", function(){
goToSlide('decline');
});
// on click approve then what?
$("#approve").on("click", function(){
var content_id = $activeSlide.data("id");
console.log(content_id)
goToSlide('approve');
// $.ajax({
// url: "/user_contents/liked" + content_id,
// method: "post",
// dataType: "ajax"
// });
});
// adding the 'showing' or 'active' slide class to each element
function goToSlide(action) {
$activeSlide.removeClass("active");
$activeSlide = $activeSlide.next(".slide");
// send data to controller
if(action == "approve"){
console.log(action);
} else {
console.log('dislike');
}
$activeSlide.addClass("active");
}
});
.movie-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 300px;
max-width: 80%;
color: black;
}
.movie-modal.active{
transform: translate(-50%, -50%) scale(1);
}
.movie-modal-header {
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgb(182, 182, 182);
}
.movie-rating {
font-size: 1.25rem;
font-weight: bold;
}
.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.movie-modal-body {
padding: 16px;
color: rgb(160, 160, 160);
}
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.35);
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
#slides {
position: relative;
height: 100%;
padding: 0px;
margin: 0 auto;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
box-sizing: border-box;
color: #fff;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
#slide-controls {
margin: 20px 0 400px;
width: 100%;
position: absolute;
display: flex;
justify-content: center;
justify-content: space-between;
z-index: 10;
color: #ffffffba;
font-size: 24px;
top: 50%;
}
.image-carousel {
width: 100%;
height: 642px;
margin: 0 auto;
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
#decline {
margin-left: 16px;
}
#approve {
margin-right: 16px;
}
.img-thumbnail {
padding: 0 !important;
}
<ul id="slides">
<% #contents.each_with_index do |content, i| %>
<li class="slide <%= 'active' if i == 0 %>" data-id="<%= content.id %>">
<div class="image-carousel" style="background-image: url('<%= content.poster %>')">
</div>
<button class="modal-btn">Open Modal</button>
<div id="movie-modal <%= content.id %>" class="movie-modal">
<div class="movie-modal-header">
<div class="movie-rating" style="">Average rating: <strong><%= content.rating %></strong></div>
<button class="close-button">×</button>
</div>
<div class="movie-modal-body"><p><%= content.description %></p></div>
</div>
<div id="overlay <%= content.id %>"></div>
</li>
<% end %>
</ul>
<div id="slide-controls">
<span id="decline"><i class="fa fa-solid fa-thumbs-down fa-2x"></i></span>
<span id="approve"><i class="fa fa-solid fa-thumbs-up fa-2x"></i></span>
</div>
This shows when the first poster is clicked the modal works and movie-modal active is added to the modal class
The second image with Morbius in it.. The modal class doesnt change for the current slide showing however it changes for the previous slide.. BUT the previous slide only changes once and then sticks to active. Nothing is shown on the poster.

Opening a div 'popup' from clicking a parent div

When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>

Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}

Creating 2 buttons that reveal content from 2 different direction

I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions.
Example:
When a user click on smt, the content will open from the left.
When a user click on mi, the content will open from the right.
So far, I managed to do the smt part only as I don't know how to make the "mi" part work.
Below is my code:
Style:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 60px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 650px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
SMT button:
<div id="myNav" class="overlay">
×
<div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>
JavaScript:
<script>
function openNav() {
document.getElementById( "myNav" ).style.width = "100%";
}
function closeNav() {
document.getElementById( "myNav" ).style.width = "0%";
}
</script>
How can I re-use the same code for the second button?

I think you are looking for this.. May be this could hep you
I use jquery-ui, function slide to achieve desire effect
Using single content
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'right'},1000);
} else {
$('#userNav').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div id="userNav">User Area</div>
Using separate content (i use flex to make both content show inline you can just remove class main-content to show them on separate line as block)
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav1').is(':hidden')) {
$('#userNav1').show('slide',{direction:'right'},1000);
} else {
$('#userNav1').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
.area{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
.main-content {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div class="main-content">
<div class="area" id="userNav">User Area 1</div>
<div class="area" id="userNav1">User Area 2</div>
</div>

You can pass the Id to the function like this:
onclick="openNav("myNav1")"
And if you need to hide element, You can use: display: "none"
<script>
function openNav(id) {
document.getElementById(id).style.display = "block";
}
function closeNav(id) {
document.getElementById(id).style.display = "none";
}
</script>

Just need to do this for the code:
Add "2" to "openNav", "myNav2", "closeNav2"
< script>
function openNav2() {
document.getElementById( "myNav2" ).style.width = "100%";
}
function closeNav2() {
document.getElementById( "myNav2" ).style.width = "0%";
}
</script>
Same for the button code, add "2" to "myNav", "openNav", "closeNav"
<div id="myNav" class="overlay">
×
<div class="overlay-content">MI</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px;
left:300px;" onclick="openNav()">MI</span>

Jquery animate() effect doesn't function well

When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>

you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.

I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions

News Ticker - auto change div with next and previous buttons

I am new to JQuery so please be gentle. I have a news ticker built up in html and css with JQuery activating the next and previous buttons. I am looking get the div's to auto play on load but still allow the user to use the navigation buttons. I seem to be able to get either the navigation or the auto play to work but not together. Any chance someone can help me out. I know I am missing something big but I can't seem to figure it out.
My code can be seen here -
http://jsfiddle.net/s8qotsj2/8/
HTML
<div id="myNewsticker">
<div id="newsNav">
<img src="images/back.png"><img src="images/next.png">
</div>
<div class="tickerlable">News:</div>
<div class="newsContent">
<div class="newsTicker active">School closed 12/12/15 - Snow Day - All Classes Closed</div>
<div class="newsTicker">Checkout our New Website.</div>
<div class="newsTicker">New Students Handbook Now Available.</div>
<div class="newsTicker">Resouces Links Have Been Added to the Navigation Bar</div>
</div>
</div>
CSS
#myNewsticker{
float: right;
margin-top: 20px;
margin-right: 8px;
width: 460px;
border-radius: 25px;
padding: 0 20px;
background: #851818;
color: white;
font-size: 14px;
font-family: calibri;
}
.tickerLable {
margin: 5px;
padding: 5px;
max-width: 38px;
}
#myNewsticker .newsTicker {
display: none;
}
#myNewsticker .newsTicker.active{
display: block;
}
.newsTicker {
margin-top: -32px;
padding: 5px;
max-width: 400px;
float: left;
margin-left: 60px;
}
#newsNav {
padding-top: 3px;
width: 51px;
float: right;
margin-right: 15px;
margin-top: 3px;
}
#prev img, #next img{
width: 25px; /***changes size of images height and width****/
}
Script
$(document).ready(function(){
var news = $(".newsTicker");
var newsIndex = -1;
function showNextNews() {
++newsIndex;
news.eq(newsIndex % news.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextNews);
}
showNextNews();
}) ();
$(function () {
$("#next").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.next().length === 0) {
$("div.newsTicker").eq(0).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.next().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
$("#prev").click(function () {
var activeDiv = $("div.active");
activeDiv.removeClass("active");
if (activeDiv.prev().length === 0) {
$("div.newsTicker").eq(-1).addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
} else {
activeDiv.prev().addClass("active").css("opacity", 0).animate({
opacity: 1
}, 800);
}
});
});

function next_item() {
do some stuff here;
}
$(document).ready(function() {
//maybe wait 5 secs?
next_item();
}
$(".next_buttons").on('click', function() {
next_item();
//maybe disable the button, till next element is ready
}
Now add what you need to the first function