Develop Reference

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>

Box visible on hover then staying visible after moving mouse to another box

I am making sort of a drop down list but more of a button, and i needs to be able to look good. I have almost got every thing I need but when i move the mouse onto the box that appears (drop down list), it disapears. This is what I have so far;
html
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
css
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
jquery
$("#box").hover(
function() {
$("#content").slideDown(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
$("#content").hover(
function() {
$("#content").show(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
Anything I am doing wrong, better ways to do this or a link to an existing question that already answers this would be very much appreciated. Thanks!

Here is exactly what you wanted.
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
https://jsfiddle.net/kvbvLy4d/

You could also achieve this without any Javascript / JQuery by animating the height of the content with CSS.
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#box:hover + #content, #content:hover {
height: 10vw;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 0;
background-color: red;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
<div id="buttons">
<div id="box"></div>
<div id="content">content</div>
<div id="box1"></div>
<div id="content1">content</div>
<div id="box2"></div>
<div id="content2">content</div>
</div>

How to make an element that is fixed disapear behind a non fixed element

I have three elements that are fixed, when they reach a certain section in the page, I want them to transition into the next element,but not just disappear and change. At the divides I want to be able to see the top fixed element half and the bottom fixed element half. EX: If the top element is red and bottom element is blue then at the divide I should see a box that has half red and half blue.
Here is what I have so far, but right now each element just disappears, I want it to appear that it is sliding under the next fixed element. (I messed around with the z-index but this solution didn't work b/c both items are fixed to the same spot)
HTML:
<body id="body">
<div id="background">
</div>
<div id="red">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid" id="blue">
<div class="fixedContainer2" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid" id="green">
<div class="fixedContainer3" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height: 900px;
background-color: black;
z-index: 1;
}
#red {
height: 900px;
background-color: red;
}
#blue {
height: 900px;
background-color: blue;
}
#green {
height: 900px;
background-color: green;
}
.fixedContainer {
z-index: 10;
position: fixed;
background-color: #ddd;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer2 {
z-index: 5;
position: fixed;
background-color: #ffff00;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer3 {
position: fixed;
background-color: #dd1144;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
JS
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
$(document).scroll(function() {
if ($(document).scrollTop() < 700) {
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
} else if ($(document).scrollTop() > 700 && $(document).scrollTop() < 1580) {
$('#something3').show();
$('#something2').hide();
$('#something').hide();
} else if ($(document).scrollTop() > 1580 && $(document).scrollTop() < 2490) {
$('#something2').show();
$('#something3').hide();
$('#something').hide()
} else if ($(document).scrollTop() > 2490) {
$('#something2').hide();
$('#something').show()
}
});
https://jsfiddle.net/zs4emw00/4/

Here is the https://jsfiddle.net/zs4emw00/5/
You create an overall container and set that container to overflow: hidden;
Then have that fixedContainer set to position:absolute. The jquery part is to always keep all the fixedContainer at the top of the window.
HTML:
<div id="background">
</div>
<div id="red" class="container">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid container" id="blue" >
<div class="fixedContainer" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid container" id="green">
<div class="fixedContainer" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height:900px;
background-color: black;
z-index: 1;
}
.container{
position:relative;
height:900px;
overflow:hidden;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
.fixedContainer {
z-index: 10;
position:absolute;
background-color:#ddd;
padding: 2em;
left: 50%;
top: 0;
transform: translate(-50%);
}
Javascript
$(document).scroll(function() {
var $target = $('container');
var winHeight = $(window).scrollTop();
var offsetArr = $('.container').each(function(){
var top = $(this).offset().top;
var difference = winHeight - top;
$(this).find('.fixedContainer').css('top',difference);
})
});

Fixed position view content after add new message (element)

Task:
Make a chat on Skype in HTML.
Problem:
No scrolling content after adding a new message.
Description:
There is a common site structure: header, content and footer. It is necessary that the content would be "hiding" under the header, but in the visible part of the window remained only part of the content (lower (message history on Skype)).
When you add a new message, the content must scrolling up to the height of this, new messages, and the message should appear at the bottom of the central block of the site (content), but should not go under the footer.
In this case it shall remain possible scrolling.
HTML:
<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="container" class="f_right">
<div id="wrap3">
<div id="wrap2">
<div id="wrap1">
<div id="content">
<div id="im_nav_wrap">asdasdasdasd</div>
<div id="im_content">
<div class="im_rows_wrap">
<div id="im_rows" class="im_peer_rows">
<div class="mes">sddsfsdfsdfsdf</div>
<div class="mes">sdfdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">sdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
</div></div>
</div>
<div id="im_footer_wrap">
<textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
<button onclick="IM.send(this);">submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
width: 980px;
margin: 0 auto;
}
#header {
top: 0;
z-index: 100;
text-align: center;
width: 980px;
position: fixed;
height: 40px;
background: #cdcdcd;
}
#sidebar {
top: 60px;
width: 200px;
height: 100px;
background: #666;
position: fixed;
}
.f_right {
width: 600px;
float: right;
}
#content {
}
#im_nav_wrap {
position: fixed;
top: 40px;
z-index: 100;
width: 400px;
height: 70px;
background: #ff0ccc;
}
#im_content {
padding: 120px 0 150px ;
}
#im_rows {
}
.im_rows_wrap {
position: relative;
}
#im_rows {
position: absolute;
bottom: 80px;
width: inherit;
}
.mes {
width: 200px;
padding: 10px;
background: #f6f6f6;
margin-top: 10px;
}
#im_footer_wrap {
height: 100px;
width: 300px;
position: fixed;
bottom: 20px;
}
JS:
$(document).ready(function() {
$('.im_rows_wrap').height($('#im_rows').height());
});
IM = {
send: function(el) {
var ta = $(el).prev('textarea').val();
if (ta) {
$('#im_rows').append('<div class="mes">' + ta + '</div>');
$('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
}
}
};

So you want something like:
http://jsfiddle.net/CLzfW/7/
Using a bit of jQuery
$('.button').click(function(e){
e.preventDefault();
$('.expander').slideToggle();
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
});
It scrolls to the bottom of the div on an event click (e.g button click, new message) and you also want a scroll bar on it?

Sliding divs in and out of page view simutaniously

Im fairly new to javascript. Ive adapted some script Ive found to do something similar to what I need but its not working as I'd like it too. I apologize for the long explanation.
I have 6 buttons, button 1 -3 responsible for the left divs, and button 4 - 6 responsible for the divs on the right.
When the script run, none of the divs should be visible.
When buttons#1 is clicked, div#1 slides out from the left and is then positioned its own width from the left of the container. This is the same for div#2 and div#3 corresponding to button#2 and button#3. Only 1 div can be seen at a time so button#2 will hide div#1 and div#3 and show div#2, ect. Same for all the other buttons.
When button#4 is clicked, div#4 slides out from the right and is positioned its own width from the right of the container. The hiding of the divs when another button is clicked is the same as the above, only 1 div can be seen at a time.
Help would greatly be appreciated.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.button-left').click(function() {
var index = $(this).index(".button-left");
var $box = $(".box-left:eq(" + index + ")");
$(".box-left").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '25%',
}, 500);
}
});
$('.button-right').click(function() {
var index = $(this).index(".button-right");
var $box = $(".box-right:eq(" + index + ")");
$(".box-right").not($box).animate({
left: '150%'
}, 500);
if ($box.offset().left < 0) {
$box.css("left", "150%");
} else if ($box.offset().left > $('#container').width()) {
$box.animate({
left: '105%',
}, 500);
}
});
});
</script>
<style type="text/css">
#container {
position: absolute;
margin: 0px;
margin-left:auto;
margin-right:auto;
padding: 0px;
width:1024px;
height:568px;
overflow: hidden;
background-color:#999999;
}
.box-left {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
.box-right {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left:260px;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
right:0px;
}
#box5 {
background-color: purple;
}
#box6 {
background-color: brown;
}
</style>
<div class="button-left">Click Box #1 </div>
<div class="button-left">Click Box #2 </div>
<div class="button-left">Click Box #3 </div>
<div class="button-right">Click Box #4 </div>
<div class="button-right">Click Box #5 </div>
<div class="button-right">Click Box #6 </div>
<div id="container">
<div id="box1" class="box-left">Box #1</div>
<div id="box2" class="box-left">Box #2</div>
<div id="box3" class="box-left">Box #3</div>
<div id="box4" class="box-right">Box #4</div>
<div id="box5" class="box-right">Box #5</div>
<div id="box6" class="box-right">Box #6</div>
</div>

jsfiddle.net/KFqvf
This is a jsfiddle with what I think you want in. Just needs simple jquery animate function to slide in left and right, and a simple menu to select the items!
Hope this helps