Develop Reference

Jquery to hide button when there are no more images on the right

im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
a = nextImg.addClass('active').css('z-index', 10);
console.log(nextImg.length)
if (!(nextImg.length)) {
next.style.displsy = "none";
}
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
currentImage = $(".active");
if (!currentImg.next().length) {
$(".next").hide;
} else {
$(".next").show();
}
});
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500" class="active" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Some of the problems are:
A spelling mistake in displsy = "none"
Missing parentheses in $(".next").hide
When clicking "next", the "prev" button should appear again (if it was hidden), and vice versa.
You should also avoid code repetition, so create a function that gets as argument whether it should call .next() or .prev() and then do all the common things. Also, .toggle is a nice jQuery function so you can avoid an if..else:
function rotate(direction) {
var currentImg = $('.active');
currentImg.removeClass('active').css('z-index', -10);
currentImg = currentImg[direction]();
currentImg.addClass('active').css('z-index', 10);
$(".next").toggle(currentImg.next().length > 0);
$(".prev").toggle(currentImg.prev().length > 0);
}
$(document).ready(function() {
$('.next').on('click', () => rotate("next"));
$('.prev').on('click', () => rotate("prev"));
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500?text=1" class="active" />
<img src="https://via.placeholder.com/500?text=2" />
<img src="https://via.placeholder.com/500?text=3" />
<img src="https://via.placeholder.com/500?text=4" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Displaying a button to open a pop up window in HTML/JS and CSS?

I want to display 2 buttons side by side when you click on the button "Land" present below the "Water" button. Both those buttons should be able to open up pop windows for which the code i have already included. I have tried to implement the button code but when i click on "Land" button everything disappears. How can i fix this?
Here is the fiddle:
http://jsfiddle.net/fku50o9v/2/
Here is my current code:
function popup(id){
if($("#"+id).hasClass( "vis" )){
$("#"+id).removeClass( "vis" );
}else{
$(".dropdown-content").removeClass( "vis" );
$("#"+id).addClass( "vis" );
}
}
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
padding-right: 20px;
}
.msgBtn2{
cursor: pointer;
font-size: 1.2rem;
height: 2.5rem;
border: none;
border-radius: 10px;
color: blue;
background-color: #ffff;
outline: none;
box-shadow: 0 0.3rem rgba(121,121,121,0.70);
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
min-width: 160px;
top: 50px;
margin-left: 10px;
display: none;
position: absolute;
z-index: 1;
color: red;
}
.dropdown-content button{
color: red;
margin: 5px;
display: block;
}
.vis {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
<div class="inner">
<div class="dropdown">
<span><button class="msgBtn2" onclick="popup('water');" >Water</button></span>
<div id="water" class="dropdown-content">
<!--<button type="submit" class="msgBtn2">land</button>!-->
<span><button class="msgBtn2" onclick="popup('land');" >land</button></span>
<div id="land" class="dropdown-content">
<button target="popup"
onclick="window.open('http://google.com/popup','popup','width=600,height=600'); return false;" class="msgBtn2">Workflow</button>
</div>
<button type="submit" class="msgBtn2">river</button>
<button type="submit" class="msgBtn2">ocean</button>
</div>
</div></div>
</div>

I believe this should work. Like Svela mentioned you're "hiding" all elements but the one you're clicking. You need to keep the parent visible. This is just a dirty implementation, I'm pretty sure there are more elegant ways, but it should give you a good idea :D ... I think..
function popup(id){
let element = $("#"+id);
if(element.hasClass( "vis" )){
element.removeClass( "vis" );
}else{
$(".dropdown-content").removeClass( "vis" );
element.addClass( "vis" );
element.parent(".dropdown-content").addClass( "vis" );
}
}

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

Trouble creating signup page with JavaScript

right now am trying to make a sign up page for my website currently i have a signup button and some javascript that should be connecting to it so the signup page itself appears
html:
<button class="Sign-Up-Button" id="Sign-Up-Button" onclick="revealSignup"></button>
<div class="Signing-up" id="Sign-Up">
<form action="results.html" method="GET">
<div>
<label>Name</label>
<input>
</div>
<div>
<label>Password</label>
<input>
</div>
</form>
<button id="Sumbit-End">Sumbit</button>
</div>
css:
.Sign-Up-Button{
background-color: #0099ff;
position: absolute;
text-align: center;
font-family: monospace;
font-size: 25px;
border-radius: 15px;
color: white;
height: 50px;
width: 105px;
}
.Signing-up {
position: absolute;
top: 370px;
left: 850px;
background-color: white;
z-index: 1;
display: none;
}
Java script:
function revealSignup(){
document.getElementById("Sign-Up-Group").style.display = 'block';
}

First, in Javascript, you need to target #Sign-Up and NOT #Sign-Up-Group because it does not exist in your HTML.
Second, in HTML, you need to open parentheses when you call a function on click
HTML change:
<button class="Sign-Up-Button" id="Sign-Up-Button" onclick="revealSignup()"></button>
Javascript change:
document.getElementById("Sign-Up").style.display = 'block';

Replace Text with a Button

I can't seem to find the answer to this; when I google it, all I get are "replace button text".
I want to hover over some text, and have that text replaced with a button. I've tried the fadeIn/fadeOut technique and the Show/Hide technique. However, the button becomes visible, it is in a different space.
Here's my Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
My CSS:
.DSLLocation {
margin-top: 110px;
}
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline;
}
So if anyone can help me. I don't care if it's with Jquery, or just simple HTML/CSS

Are you simply trying to make some text appear as a button on hover? if so this should work nicely for you:
div {
padding: 10px;
display: inline-block;
transition: all 200ms ease
}
div:hover {
background: red
}
<div>Psuedo button</div>
Or if you want to hide the text and show the button on hover:
.container {
padding: 10px;
display: inline-block;
background: red;
}
button {
display: none;
}
.container:hover button {
display: block;
}
.container:hover .text {
display: none;
}
<div class="container">
<div class="text">Text</div>
<button>Psuedo Button</button>
</div>

You should understand that since you are replacing one element with another they might move due to the different content. Or you can style both elements the same way so that the change is not abrupt.
You could use just CSS for this
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline-block;
}
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;}
.DSL6 h3{display:block;}
.DSL6 button{display:none;}
.DSL6:hover h3{display:none;}
.DSL6:hover button{display:block;}
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>