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>

Scroll div content on mouse move

I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.
So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?
For now I have the following code:
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Also the number of items can be dynamically changed so I have another trouble to make it working.

Is this almost what you intends??
Just add the following style rules:
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
Demo
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>

Expandable/Collapsable div, wont close and has unwanted space

I have created a navigation based on expandable and closable divs, the autoclose and open works but there is always a invisable div present that takes up space. Also when reclicking a menu item should close the div. Tried different closing methods but it wont let me.
Here is what I got so far:
HTML
<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div></div>
<div id="navcontent">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div>
</div>
^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>
CSS
.containerdiv
{
min-width:400px;
max-width:500px;
overflow:hidden;
display:block;
margin-left:auto;
margin-right: auto;
}
.secondtopdiv
{
width: 100%;
height: 100px;
background: #61c5bb;
color:#000000;
vertical-align: middle;
line-height: 100px;
}
#nav{
width: 100%;
overflow: hidden;
}
#navcontent {
position: relative;
float: left;
width: 100%;
min-height: 100px;
overflow: hidden;
}
.spacerdiv
{
height:20px;
}
.divtitle {
font-size: 18px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
div.panel {
position: absolute;
background: #61c5bb;
height: 100%;
width: 100%;
display: none;
}
Jquery/JS:
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
top: -($target.height())
}).animate({
top: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
top: -$this.height()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Link to fiddle: http://jsfiddle.net/6swdzycc/10/

If i understood correctly, you remove the min-width from #navcontent and can use the following script:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($other.length) $other.removeClass("active").slideUp("slow", function () {
$target.toggleClass("active").slideToggle("slow");
})
else $target.toggleClass("active").slideToggle("slow");
});
});
JSFiddle

div.panel1 {
background: #61c5bb;
height: 150px;
width: 100%;
display: none;
}
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div>
</div>
<div id="navcontent">
<div class="panel1" id="target1">Target 11111</div>
<div class="panel1" id="target2">Target 21111</div>
<div class="panel1" id="target3">Target 31111</div>
</div>
<script>
$('document').ready(function(){
$('.panel').click(function(){
var thisHref=$(this).attr('href');
$('.panel1').hide();
$(thisHref).slideToggle('slow');
});
});
</script>

Link back out from child HTML loaded in div to parent HTML

I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that was there previously. This is for an image gallery, with a main navigation (parent) and then the detailed view with smaller navigation (child). Here is the parent HTML, index.html (with CSS and JS embedded):
<html>
<head>
<title>Java Factory</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#container {
width: 1020px;
height: 634px;
}
ul#flavors {
list-style: none;
width: 1020px;
height: 634px;
position: relative;
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li {
position: absolute;
}
.wakey {
width: 309px;
height: 309px;
top: 0px;
left: 30px;
}
.smooth {
width: 309px;
height: 309px;
top: 0px;
left: 355px;
}
ul#flavors li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors li a {
text-indent: -9000px;
}
ul#flavors li a:hover {
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li.wakey a:hover {
background-position: -30px -640px;
}
ul#flavors li.smooth a:hover {
background-position: -355px -640px;
}
#top {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="web">
<div id="top">
</div>
<nav id="container">
<ul id="flavors" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="smooth">Smooth Caffeinator</li>
</ul>
</nav>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
And here is the child HTML:
<html>
<head>
<title>div container switch test</title>
<style type="text/css">
#coffee_return {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wakey">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container1 {
width: 1020px;
height: 624px;
background: url(images/coffee/wakey.jpg) no-repeat 0 0;
}
ul#flavors1 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors1 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors1 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors1 li a {
text-indent: -9000px;
}
ul#flavors1 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors1 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors1 li.smooth a:hover {
background-position: -157px 11px;
}
#coffee_return {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container1">
<ul id="flavors1" class="coffeenav">
<li class="smooth">Smooth Caffeinator</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="smooth">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container2 {
width: 1020px;
height: 624px;
background: url(images/coffee/smooth.jpg) no-repeat 0 0;
}
ul#flavors2 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors2 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors2 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors2 li a {
text-indent: -9000px;
}
ul#flavors2 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors2 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors2 li.smooth a:hover {
background-position: -157px 11px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container2">
<ul id="flavors2" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</body>
</html>
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
And the demo for this is: http://mmdsgn.com/divsample/5/ -- You'll see the return button appears at the top when you click either of the first two boxes (only ones that work right now) and I need that graphic button to call up the original div id content in the parent HTML.

Change the path on "href" to "../" instead of "x"
<img src="images/coffee/return_btn.jpg" border="0">
or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.
<img src="images/coffee/return_btn.jpg" border="0">
Edit:
Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)

You'll want to change your original script a bit:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
$('#coffee_return').on('click', function () {
$('#web').load('./ #web');
return false;
});
});
return false;
});
});
</script>
This basically says: After loading a section of coffee.html, look for a coffee_return button and add onclick behavior to re-load the original page into your #web section.
Also, change that href on your coffee_return button to # or JavaScript:void(0); since it's trying to load a document called "x" currently:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>

You cannot use same id on multiple elements, as you said
"
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
". This would give erroneous results. Rather, assign them a class and bind event with their class.

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?