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?
Related
in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/
No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.
if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'
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>
I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Strategy Game Dev Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
function illu_area(){
alert("test");
}
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", illu_area());
}
}
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: Tahoma}
.container_main {
margin: 10px;
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.territory_type1 {
width: 100px;
height: 100px;
position: absolute;
}
.territory_type2_horizontal {
width: 200px;
height: 100px;
position: absolute;
}
.territory_type2_vertical {
width: 100px;
height: 200px;
position: absolute;
}
#t6 {
background-color: blue;
left: 200px;
}
#t5 {
background-color: lightblue;
left: 100px;
}
#t4 {
background-color: green;
}
#t3 {
background-color: turquoise;
top: 200px;
}
#t2 {
background-color: lightgreen;
top: 200px;
left: 200px;
}
#t1 {
background-color: brown;
top: 100px;
left: 200px;
}
#t0 {
background-color: yellow;
top: 100px;
left: 100px;
}
.grid {
height: 100px;
width: 100px;
position: absolute;
top :0px;
}
#t3_g2 {
left: 100px;
}
#t4_g2 {
top: 100px;
}
</style>
</head>
<body onLoad="everything()">
<div class="container_main">
<div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
Origin
</div>
<div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
1
</div>
<div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
2
</div>
<div id="t3" class="territory_type2_horizontal">
3
<div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
<div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
</div>
<div id="t4" class="territory_type2_vertical">
4
<div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
<div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
</div>
<div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
5
</div>
<div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
6
</div>
</div>
</body>
</html>
My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...
Note:
it works when i do this:
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});
}
}
But this isnt going to be useful in future i think :P
Help me!
You have to pass your function - omit the ()
.addEventListener("click", illu_area);
Having the () executes the function immediately.
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>
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