I'm working on a project for which I'm making a chat right now.
Everything chat related is working just fine, but my problem is that I want the chat window to be fixed to the bottom when overflow-y is active so I don't have to manually scroll down to see the latest messages. (Something how Facebook chat & twitch.tv chat works)
(I'm sorry that I cannot show any of my attempts in doing this as I just don't know what to do.)
Thanks in advance.
Edit: Here is some of the HTML & CSS Code.
Note: Actual messages are pushed as strings to logs
//CSS
#chat {
margin-top: 110px;
background-color: #FAF9FA;
height: 75%;
}
#chat-window {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
//HTML
<div class="col-sm-3">
<div id="chat">
<div id="chat-window">
<div id="logs">
</div>
</div>
<input type="spec" id="message" placeholder="Type your message..."/></br>
<button id="send" class="btn">Send</button>
</div>
</div>
Well if your goal is to simply scroll to the bottom:
window.scrollTo(0, document.getElementById('myChatWindow').scrollHeight);
I don't know if i catch your goal, but i think that just css position:fixed solve your problem.
.chat-box {
position: fixed;
background: #ccc;
right: 0;
bottom: 0;
padding: 20px;
}
example: https://jsfiddle.net/Julivan/261qjdp9/
hope it helps
Related
I have an issue with a project I'm working on, I'm holding buttons inside a container, whenever I try to move them in css the buttons will disappear, and setting a top or right relative value of the container css will move the entire website, what I'm trying to achieve is have all the buttons lined up on the right side, I've included a small sample of the code which is my current work, and a link to the site so you can see the result.
I believe the issue might be with the size of the canvas, but increasing the size of the canvas stretches all the images to fit it, and I'm still unable to move them using the css. Thank you for any help you can provide.
HTML:
<div id="container">
<div id="webgl"></div>
<input type="image" id="intro" src="images/icon-intro.png"/>
<input type="image" id="avatar" src="images/icon-avatar.png"/>
<input type="image" id="news" src="images/icon-news.png"/>
<input type="image" id="play" src="images/icon-play.png"/>
<input type="image" id="stop" src="images/icon-stop.png"/>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#intro,
#intro {
width: 10%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#intro {
z-index: 10;
}
A link to the site that has the issue:
http://playground.eca.ed.ac.uk/~s1572393/
Thanks again for any help or explanations.
After following the recourse in the question comments I was able to solve the issue.
I removed the container and refactored the css for the input elements to the following:
#intro {
position: absolute;
right: 30px;
top: 30px;
z-index: 10;
}
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.
HTML:
<body>
<div id="one" data-stellar-ratio=".2">
<p>This is the first div.</p>
</div>
<div id="two" data-stellar-ratio="1">
<p>This is the second one.</p>
</div>
<div id="three">
<p>Third one!</p>
</div>
<div id="four">
<p>Fourth and last.</p>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
#one, #two, #three, #four {
position: absolute;
height: 100%;
width: 100%;
font-size: 5em;
}
p {
margin: 1em;
width: 60%;
}
#one {
background: red;
}
#two {
background: blue;
top: 100%;
}
#three {
background: green;
top: 200%;
}
#four {
background: yellow;
top: 300%;
}
I was able to throw something together using just jQuery and no other libraries. It relies on relative positioning. Basically, everything scrolls normally until one of the slides reaches the top of the browser window. Once it tries to scroll past the top of the browser window, I add an offset to the slide's vertical position to keep it from moving up any further. When scrolling back the other way, I simply subtract from this offset until it hits 0 at which point it begins to scroll normally again.
I'm sure the code can be cleaned up but I added a ton of comments so hopefully it's readable. If you have any questions or you would like me to modify it to better suit your needs, let me know. Here's a fiddle with the solution I came up with:
http://jsfiddle.net/jwnace/jhxfe2gg/
You can also see a full page demo of the same code here:
http://joenace.com/slides/
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
This is similar to other questions asked, but with one extra issue and I can't find anyone with the same problem as me.
I have an image which is 1400px wide and which I want to be centred in the middle of the page even if the user is looking through a browser with a 800px resolution.
I can't use a BackGround image because I need to rotate this image with a few others using the jquery cycle plugin.
The way I found to centre an image by using:
div.slideshowWrap {
position: relative;
width: 100%;
overflow: hidden;
}
div.slideshowWrap div.homeslideshow {
position: relative;
width: 10000px;
left: 50%;
margin: 0 0 0 -5000px;
text-align: center;
}
<div class="slideshowWrap">
<div class="homeslideshow">
<?php echo $this->Html->image('background_01.jpg');?>
</div>
</div>
works, but when I add the extra slides required for the jquery cycle it messes up the positioning...
<div class="slideshowWrap">
<div class="homeslideshow">
<?php echo $this->Html->image('background_01.jpg');?>
</div>
<div class="homeslideshow">
<?php echo $this->Html->image('background_02.jpg');?>
</div>
<div class="homeslideshow">
<?php echo $this->Html->image('background_03.jpg');?>
</div>
</div>
I'm not sure what's the best way to sort this out? There doesn't seem to be a way to centre images, only backgrounds. But there's no way to fade in and out backgrounds like the jquery cycle plugin allows.
Anyone any ideas?
Try this:
.homeslidshow {
position: relative; /* if there is no position applied already */
}
.homeslideshow > img{
position: absolute;
left: 0px;
right: 0px;
/* and your width here */
}
I had seen this technique in a recent post.