I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?
Here's my div element:
<div class='panel-Body scroll' id='messageBody'></div>
And CSS class
.scroll {
height: 450px;
overflow: scroll;
}
What i need is, initially the position of the scroll-bar should be bottom.
Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.
This is the current style of my scroll-bar
And I want it to be always
Thanks in advance.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
Something like this should do what you want if I understood what you want correctly.
Replace messageBody in getElementById() with your chat message container id.
var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;
This will scroll the message container to the bottom.
Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.
Do this after you have appended a new message into your chat message container.
Assume your html code like this.
HTML
<div id="parentDiv">
<div class="people">1</div>
<div class="people">2</div>
<div class="people">3</div>
<div class="people">4</div>
<div class="people">5</div>
<div class="people">6</div>
<div class="people">7</div>
<div class="people">8</div>
<div class="people">9</div>
</div>
And then wrap your js like this
JS
var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Here you go. Follow this concept.
$('#messages').scrollTop($('#messages')[0].scrollHeight);
#chatbox-history {
overflow: none;
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
#messages {
overflow: auto;
position: absolute;
bottom: 0;
width: 100%;
max-height: 200px;
}
#messages div {
border: 1px solid #e2e4e3;
margin: 5px;
padding: 10px;
background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
<div id="messages">
<div>asdjf ;asd</div>
<div>ajsd fa ;skd f;s</div>
<div>asdjf ;akjs d;lf a;lksd fj</div>
<div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
<div>Wassup?</div>
</div>
</div>
That'd be :: messageBody.lastChild.scrollIntoView(); //for the initial scroll to bottom position.
p.s.: After the page load, this command should be called by your message handler on message update.
It's already 2023 and you can simply use Element.scrollIntoView() now! Check MDN documentation.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();
Related
SOLVED: Thanks for all your help everyone!
The snippet below shows what my issue looked like before it was solved. The div "words" wasn't able to be scrolled no matter what CSS edits I made. I wanted just the one div "words" from the body to scroll not the entire content between the header and footer.
The problem here is that "words" is extending off the bottom of the page. For scrolling to work like that on div tag you need to give it a static height, otherwise, the div will automatically adjust to the height of it's content and behave just like a normal div tag.
To make it responsive, you will need to use screen.height; in javaScript to get your total screen height, then subtract heights of your header and footer areas, and then set the div tag's height using the result. For best results, use something like window.setInterval(setWordsHeight(), 100); to recheck the height of the screen on an interval so that it does not get messed up if someone resizes their window.
var headerFooterHeight = 200;
window.setInterval( function(){
document.getElementById("words").style.height = (window.innerHeight - headerFooterHeight)+"px";
console.log(document.getElementById("words").style.height);
}, 100);
Delete the position: fixed; for #content
#content {
padding: 60px 0;
}
and also the overflow-y: hidden; from body
html, body {
height: 100%;
margin: 0 auto;
color: #4c4c4c;
overflow-x: hidden;
text-align: center;
}
And for the last delete overflow-y: scroll; from .words
.words {
text-align: left;
margin: 0 20px 0 20px;
}
That should solve your problem, let me know if that help!
Edit 1
So first of all we need to update the markup, let's create a new container div and give it the class .new-header, this needs to be outside the #content div
<div class="new-header">
<a class="hoverontouch" href="https://www.dollarresources.com">
<div class="worldwide grow WorldWide">
</div>
</a>
<div class="search-bar">
<div class="search-button">
<form action="search_keyword.php">
<input type="text" name="keyword" placeholder="Search Dollar Resources..." required oninvalid="this.setCustomValidity('Please enter a search word or phrase')"
oninput="setCustomValidity('')" autocomplete="off" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Search Dollar Resources...'">
<button type="submit" value="Submit"><i class="fa fa-search"></i></button>
</form>
<?php
// include "search_keyword.php";
$mysqli->close();
?>
</div>
</div>
</div>
As you can see, inside the .new-header div you have all the information needed for the second header, and then you need to add this css
.new-header{
position: fixed;
top: 40px;
width: 100%;
background-color: #fff;
}
Now we need to give to the #content div more padding-top
#content {
padding: 170px 0 60px 0;
}
Let me know if you have any problems applying this.
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
Any ideas how to fix this problem: On a page with TOC (table of contents) with links pointing to hashtags within the same page, when the browser scrolls down other fixed position elements hide it. The browser should scroll further down to avoid being hidden by the fixed elements.
Fiddle to demonstrate this problem: https://jsfiddle.net/fcro6mth/ Click Section One or Section Two - the browser scrolls down to it but its hidden by the fixed header
Solution with JS: https://jsfiddle.net/fcro6mth/1/
Can you think of any solution that doesn’t involve JS?
Code from JS fiddle:
HTML:
<header>
This is the fixed position header
<nav>
Section One
Section Two
Section Three
</nav>
</header>
<div class="body">
This is the body.
<section id="section1">This is section one</section>
<section id="section2">This is section two</section>
<section id="section3">This is section three</section>
</div>
CSS:
section {
background: lightgrey;
margin: 20px 0;
padding: 20px 10px;
height: 300px;
}
header {
background-color: grey;
position: fixed;
top: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
left: 0;
color: white;
}
.body {
margin: 70px 10px 0 10px;
}
JavaScript:
$("nav a").click(function (event) {
var $target = $(event.currentTarget),
$scrollToTarget = $($target.attr("href")),
$header = $("header"),
prop = {
scrollTop: $scrollToTarget.offset().top - $header.outerHeight(true)
},
speed = 1000;
$('html, body').animate(prop, speed);
});
Check this: https://stackoverflow.com/a/13555927/2112228
Nice example to make hidden anchors for offsetting your sections.
Updated version of your fiddle:
https://jsfiddle.net/fcro6mth/4/
Solution
I wrapped your sections in div-wrappers gave them the IDs, padded them down and pulled them back up with a negative margin.
This results in the exact same appearance, but the links do what you want them to do.
Example:
HTML:
<div id="section1" class="wrapper">
<section >This is section one</section>
</div>
CSS:
.wrapper {
padding-top: 50px;
margin-top: -50px;
}
I have struggled with this issue a lot in designing a webpage with a combined banner / navbar of about 300px fixed at the top of a page full of short items linked to by anchor links from the website's home page.
The problem I have found with the "margin-top: -XXpx; padding-top: XXpx" approach is that the invisible padding overlaid the preceding item, meaning that active content (ie. links) were blocked. I overcame this by applying positioning to the anchored elements and setting the z-index so that the first item was on top of the stack with each subsequent item lower in the stack - like this:
CSS
.anchored-element {
padding-top: 300px;
margin-top: -300px;
position: relative;
}
HTML
<div class="anchored-element" style="z-index: 99">FIRST ITEM</div>
<div class="anchored-element" style="z-index: 98">SECOND ITEM</div>
<div class="anchored-element" style="z-index: 97">THIRD ITEM</div>
... etc
This provided a fix that worked for me across Firefox, Safari and Chrome on my desktop, and on my iOS devices. I hope this helps others tackle this very frustrating issue in bootstrap!
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).
I have a strange problem though, when i click the content with z-index 20, the thing with z-index 1 gets selected in my phone.
The image has both the screen shot - the part on the right side of the image is only for illustrating my problem, as such the white gray div is behind my content div.
Can someone please rescue.
Related CSS files:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
As requested related HTML scripts:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li>What is Java?</li>
<li>Uses of Inheritence?</li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>
Surely because "Uses of inheritance" is the only link element (other than "What is java"), it will be selected - there's nothing else to select!
Try setting the display of that element to "none" when it is hidden.
You could try to hook into the event when clicking / dragging on the content panel and do an event.stopPropagation(); or an event.preventDefault(); when the panel is closed.
As far as i know, you can see that coz Snap.js add's corresponding classes like (class="snapjs-right" or class="snapjs-left") to the body in order to indicate if a panel is open or not.
So first you've got to check that.
With jQuery it would look something like this:
$(document).ready(function() {
$("#UsesofInheritence_Anchor_ID").bind("click", function() {
if (!($('body').hasClass("snapjs-right"))){
event.stopPropagation();
event.preventDefault();
}
});
});