I have a simple chat JS application, with a div.chat-holder holding all chat messages within a pane on the overall window. I set height of '.chat-holder so it remains fixed in size, and allows for scrolling of all the messages.
<style>
.chat-holder {
height: 30px;
overflow-y: scroll;
}
</style>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">
first msg
</div>
<div class="chat-item">
second msg
</div>
....
<div class="chat-item">
last msg
</div>
</div>
</div>
On page load, I scroll to the bottom by setting the scrollTop of the holder:
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
and this works fine.
Problem occurs when I start with div.pane set to display:none. Ideally, I look to have a separate event to "show/hide" the chat pane, and start with the pane hidden.
When the parent pane is hidden, the .chat-holder scrollHeight is 0, so on load, the hidden pane won't be scrolled to the bottom. Which means when the pane is displayed, the chats are not scrolled to the most recent chats. You can see this in the following snippet: with .pane initially not displayed, scroll isn't set. If you set .pane to start displayed, then scroll works fine.
Is there anyway to "scroll to the bottom" while parent is hidden? (Yes, I know I could do this by detecting when the chat-holder is exposed & then scroll to the bottom, but I'm looking to do it on load.)
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
display: none;
}
.pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>
You can get creative and use opacity or visibility rules instead of display: none:
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
opacity: 0;
position: absolute;
z-index: 1;
}
.pane.active {
opacity: 1;
position: relative;
}
button {
z-index: 2;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>
Related
Following guys, I used the code:
window.scrollBy (0, window.innerHeight)
And yes, it scrolls down the instagram home page.
However, when I go to my story, and see who viewed it, I want him to scroll the story's NOT scroll bar on the home page.
When I open the console and use the code I mentioned above, it returns me undefined and does not do what I want.
How do I scroll the bar of people who have viewed my story? Not from the home page (complete)?
EDIT
enter image description here
var button = document.querySelector('#scroll-child')
button.addEventListener('click', function() {
var childBlock = document.querySelector('.child')
childBlock.scroll(0, 50)
})
.parent {
height: 300px;
background-color: yellow;
text-align: center;
overflow: scroll;
}
.child {
width: 300px;
height: 200px;
background-color: crimson;
text-align: center;
overflow: scroll;
}
.child-content {
margin: 20px;
height: 1000px;
}
<div class="parent">
<button id="scroll-child">
scroll child content!
</button>
<div class="child">
<div class="child-content">
something1
something2
something3
something4
something5
something6
something7
something8
</div>
</div>
</div>
find your story block with its css selector:
var storyBlock = document.querySelector('#my-story-block-id')
scroll inside block
storyBlock.scroll(0, storyBlock.innerHeight)
I have this example
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
As you can see, the process is not smooth at all. When the second container gets removed, the margin of the second container gets removed too. This causes a pull from the top.
How can I get this smoothly? I thought about lowering the margin by time to 0 when removing the container.
You are facing a margin collapsing issue. As you may notice you don't have 40px between each container like expected but only 20px.
As you can read here:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
So when removing the element you decrease both margin at the top and bottom to leave the maring of the first and last element. And when the height of the element reaches 0 and get removed, you create another margin collapsing between the remaining block and thus the jump from 40px to 20px of margin.
And idea to avoid this is to increase height and use linear-gradient to color only the part you want (and leave transparent the part previously used for the margin). Like that the transition will go smoothly as there is no more margin issue.
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.container {
margin: auto;
height: 60px;
width: 100px;
background: linear-gradient(to bottom, transparent 33.33%, red 33.33%, red 66.67%, transparent 66.67%);/
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
Or use flex by adding another container as there is no margin collpasing with flexbox (Margin collapsing in flexbox):
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.box {
display: flex;
flex-direction: column;
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="box">
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
</div>
Its due to clearing. The bottom margin is not working well with them. Either use float or remove margin-bottom or margin-top to 0
here is Example
edit: update with remove div
https://jsfiddle.net/f5zw18er/3/
You could potentially use jQuery animate with a callback function. It's slightly different because it doesn't include the slide toggle, but in your example it's only being removed, so this could work.
Here we're removing the margin and also hiding the element with the animation, and then finally removing the element in the callback.
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.animate({ 'margin' : '-20px auto', 'opacity': 0 }, 500, function(){
container.remove();
});
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.
When I'm using show() and hide() methods from jquery-ui:
var current = 1;
function slide(buttonNum) {
if (current != buttonNum){
$("#page" + current).hide("slide", { direction: "left" }, 800, function() {
$("#page" + buttonNum).show("slide", { direction: "right" }, 800);
});
current = buttonNum;
}
}
My intention is that every time button is clicked for this function the page would scroll left to change to required page.
The problem is that it doesn't work first time I'm clicking page number with function above(the current div would slide to the left, but div which I change to just pops up without animation) but works normally other times.
my css is as follows:
.slider {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider .content {
position: relative;
}
.slider .content .page {
float: left;
width: 400px;
height: 300px;
background-size: cover;
}
and HTML:
<div class="slider">
<div class="content">
<div id='page1' class="page">
<!-- stuff -->
</div>
<div id='page2' class="page">
<!-- stuff -->
</div>
<div id='page3' class="page">
<!-- stuff -->
</div>
</div>
</div>
<a onclick='slide(1)' href="#">1</a>
<a onclick='slide(2)' href='#'>2</a>
Try hiding the elements that you expect not to be visible at the beginning, so that the show animation will actually execute. E.g. add this at the top:
$("#page2").hide();
$("#page3").hide();
That way running .show() on them will have an effect.
I'm developing a mobile application to look like it's running on an iPad. When the page initially loads, if the body of the page is beyond the window/screen size, the scrollbars for the page show up "over" the header and footer. But after you refresh the page, then the scrollbars show up BETWEEN the header and the footer (aka it's only over the body), which is what I want.
I'm not able to duplicate the exact behavior (where the scrollbars only show up over the body after a refresh) on jsfiddle, but it at least shows you the scrollbar over the entire page.
Any help is appreciated...
Here's the jsfiddle...
Here's the code that I have:
CSS:
.locationListItem {
margin-bottom: 5px;
}
.locationListPrimary {
color: blue;
font-weight: bold;
font-size: medium;
}
.locationListSecondary {
font-weight: bold;
font-size: smaller;
}
HTML:
#section header {
#*
Recommeneded to use an h1 element, but can contain any kind of element, but make sure to add the TrailsHeaderPrimary class to get the proper styling...
Using an h1 element will get the proper padding around the header line. To see the difference, try doing an h1 vs p *#
<h1 class="testHeaderPrimary">Search Locations</h1>
}
<div style="top: 15px; left: 15px; width: 100%; z-index: 2">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search/Filter Locations...">
#foreach (var location in Model.AvailableLocations)
{
<li>
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><span class="locationListPrimary" style="width: 20%">#location.Thing</span></div>
<div class="ui-block-b"><span class="locationListPrimary" style="width: 20%">#location.Person</span></div>
<div class="ui-block-c"><span class="locationListSecondary" style="width: 60%">#location.Year | #location.Stuff | #location.Type</span></div>
</div>
</a>
</li>
}
</ul>
</div>
#section navBar1 {
Search
}
#section navBar2 {
Location
}
#section navBar3 {
LocationStrip
}
#section navBar4 {
StackOverflow
}
#section navBar5 {
NA
}
Javascript (from the Layout):
$(document).ready(function () {
resetScreenSize();
});
$(window).resize(function () {
resetScreenSize();
});
var resetScreenSize = function () {
var windowHeight = $(window).height();
var header = $('#testHeader');
var headerHeight = header.outerHeight();
var footer = $("#testFooter");
var footerHeight = footer.outerHeight() - 1;
$(".ui-grid-a").height(windowHeight - footerHeight - headerHeight);
$("#panelMain").height(windowHeight - footerHeight - headerHeight);
};
Update 1:
Here's the body from the layout file...
<body style="height: 100%">
<div id="main" role="main" class="ui-content jqm-content" style="padding: 0; height: 100%;">
<div id="testHeader" data-role="header" data-theme="b" data-position="fixed">
#RenderSection("header", false)
</div>
<div class="ui-grid-a" data-theme="a">
<div id="panelMain" style="overflow: auto;">
<div class="ui-content">
#RenderBody()
</div>
</div>
</div>
<div id="testFooter" data-role="footer" data-theme="b" data-position="fixed" data-tap-toggle="false" style="height: 60px; display: block;">
<div data-role="navbar">
<ul>
<li>#RenderSection("navBar1", true)</li> <!-- Home/1 should be reserved for the home screen -->
<li>#RenderSection("navBar2", true)</li>
<li>#RenderSection("navBar3", true)</li>
<li>#RenderSection("navBar4", true)</li>
<li>#RenderSection("navBar5", true)</li>
</ul>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Update 2:
One of the tabs at the bottom goes to a page where it's split 20%/80%. That page uses a different layout to do the 20/80. When that page first loads, it does NOT incorporate my style in the "head" tag that looks like this:
#panelLeft {
width: 20%;
border-right: 3px solid
}
#panelMain {
width: 80%;
}
But as soon as I refresh the page, all of the styling is applied. I'm beginning to wonder if it's not applying my custom styling that I specify in each of the "head" tags in my layout pages. Should I be placing those in a separate css file instead?
The only idea I have that I can give is. Make the body's height fixed and have a property of overflow-y:auto;.
Also, ideally, you want to make the header, body and footer's total height the same with the height of the view height, browser's height.
So fix height = ((header's height + footer's height) - browser's current height). That's my formula.
To do that, either javascript/jQuery or css.
EDIT
Here's a fiddle.
http://jsfiddle.net/4RLZv/
Forgot my JS/JQ
$( document ).ready(function() {
var height = $('#head').outerHeight() + $('#foot').outerHeight();
height = $(window).innerHeight() - height;
$('#body').css('height',height);
});
You can try something like this:
.ui-grid-a {
position: absolute;
top: 68px;
bottom: 63px;
left: 0;
right: 0;
overflow-y: auto;
}
Also you can play with property width + property margin:auto
.ui-grid-a {
position: absolute;
top: 68px;
bottom: 63px;
left: 0;
right: 0;
overflow-y: auto;
margin: auto;
width: 900px;
}
Where width you should set for each size of display separately, e.g.
#media screen and (min-width: 768px) {
.ui-grid-a {
width: 600px;
}
}
#media screen and (min-width: 968px) {
.ui-grid-a {
width: 800px;
}
}
Just play with it!