How to automatically scroll when span expands inside a container? - javascript

I am new to programming so I apologise if my code presentation is not very good or my explanation not very clear. But, what I am trying to achieve is an auto-scroll feature as the content inside the <span> tag expands, so as you can see the function will print <br> and eventually, my <span> will require scrolling, when that happens, I would like to make it scroll automatically to the bottom of the <span> until the function finishes.
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px"></span></pre>
<script>
function print()
{
for (i = 0; i < n; i++)
{
document.getElementById("code").innerHTML += "<br>";
} // for
} // end-function
</script>
I have looked at similar Stack Overflow questions, and I cannot find a solution to what I am trying to achieve. I have tried the following solutions:
document.getElementById('divID').scrollIntoView();
$(divname / .class / #id).focus();
div = document.getElementById('#your_div');
div.scrollTo(0,div.scrollHeight);
But neither worked for me, though, it may be that I might've implemented it wrong.
My HTML code:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading"><h3 align="center">Pseudo Code</h3></div>
<div class="panel-body" style="height:600px;">
<pre><span class="inner-pre" id=code style="height:500px; display: block; overflow: auto; font-size: 16px">code</span></pre>
</div>
</div>
</div>
</div>
</div>

Related

how to check which children overflown the parent's div

first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>

How to make the mobile keyboard appearance bump the div rather than absolutely position itself over it?

I'm developing a simple chat component and I'm having an issue where, on mobile, if I click the textbox to send a message, rather than bumping up the messages list above it, the virtual keyboard instead absolutely positions itself on top of it.
This is undesirable because I want the user to be able to see the latest message while typing a message. However, I cannot figure out how to rectify this behavior. (and I cannot put the textbox inside the messages div because it should always be at the bottom)
I've created an example snippet that demonstrates the problem here (adding bottom margin demonstrates the problem identically to clicking the textbox and having the mobile keyboard pop up)
Basically, if you scroll to the bottom and click the "add margin" button, you'll see that rather than push the contents above it, such that you can still see the latest message, it instead scrolls up. Is there any way to avoid this?
Here is a copy of the code in case the fiddle goes down:
<div class="container">
<div class="messages">
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
</div>
<div class="send-message">
<input />
</div>
</div>
<button onclick="test()">add margin</button>
.container {
width: 400px;
height: 300px;
border: 1px solid #333;
display: flex;
flex-direction: column;
}
.messages {
overflow-y: auto;
height: 100%;
}
.send-message {
width: 100%;
display: flex;
flex-direction: column;
}
.some-margin {
margin-bottom: 100px;
}
function test() {
document.querySelector(".send-message").classList.toggle("some-margin")
}
Fortunately, there is. The problem here is you are not handling the scroll position of the .messages when the .send-message div expands (i.e. gets more margin). I presume you want to adjust it so that the scroll position takes the last visible message as its pivot (i.e. the last visible message before the div expands has to appear after the div expands, and vice-versa). To adjust said scroll position, here's a minimal working example (I changed your HTML content a little so that you can indicate what the last message is and I adjusted your JS code):
function test() {
let messageBox = document.querySelector('.messages')
let beforeMessageBoxHeight = messageBox.clientHeight
let afterMessageBoxHeight
let messageBoxHeightDifference
let beforeScrollTop = messageBox.scrollTop
let afterScrollTop
document.querySelector(".send-message").classList.toggle("some-margin")
afterMessageBoxHeight = messageBox.clientHeight
messageBoxHeightDifference = beforeMessageBoxHeight - afterMessageBoxHeight
afterScrollTop = beforeScrollTop + messageBoxHeightDifference
messageBox.scrollTop = afterScrollTop
}
.container {
width: 400px;
height: 300px;
border: 1px solid #333;
display: flex;
flex-direction: column;
}
.messages {
overflow-y: auto;
height: 100%;
}
.send-message {
width: 100%;
display: flex;
flex-direction: column;
}
.some-margin {
margin-bottom: 100px;
}
<div class="container">
<div class="messages">
<div class="message">hello1</div>
<div class="message">hello2</div>
<div class="message">hello3</div>
<div class="message">hello4</div>
<div class="message">hello5</div>
<div class="message">hello6</div>
<div class="message">hello7</div>
<div class="message">hello8</div>
<div class="message">hello9</div>
<div class="message">hello1</div>
<div class="message">hello2</div>
<div class="message">hello3</div>
<div class="message">hello4</div>
<div class="message">hello5</div>
<div class="message">hello6</div>
<div class="message">hello7</div>
<div class="message">hello8</div>
<div class="message">hello9</div>
<div class="message">hello1</div>
<div class="message">hello2</div>
</div>
<div class="send-message">
<input />
</div>
</div>
<button onclick="test()">add margin</button>
The idea is:
Get the clientHeight (visible height, read MDN Docs for more details) before the div expands
Get the scrollTop value (how many pixels measured from the topmost visible/invisible element to the topmost visible element)
When the div (.send-message) expands, the visible height (clientHeight) automatically reduces in size. The scrollTop value is still the same, which means that the topmost visible element before the div expands will still be visible. However, that is not what we want: we want the bottommost visible element before the div expands to remain visible
We measure the height difference after the div expands and before the div expands. Logically, the height difference is what is making the bottom parts of the visible messages (before the div expands) to appear invisible (due to overflow).
To address that issue, add the height difference to the previous scrollTop value so that it scrolls nicely to the bottommost visible message before the div expands.
Voila, it works. You can apply the same logic when the div retracts.

How to hide div while the page loads

I have a div whose display is "none" in css: display:none;. And it is supposed to stay hidden even after the page loads but while the page is loading it is being displayed like a flash, for a second, and hiding again.
Is there any way, with JQuery, that I can override it to stay hidden during the entire operation?
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" >
<div id="documentStatus_div">...</div>
</div>
This code defiantly work for you...
CSS Code :
<style>
.display_none {
display: none;
}
</style>
HTML Code:
<div id="dispnone" class="display_none">123</div>
JQuery Code:
$("#dispnone").removeClass("display_none");
setTimeout(
"$('#dispnone').addClass('display_none');",
2000);
First, be sure to add your css link between <head> tag.
Please clear cache and test again. If your css file is too large, you can set inline style for hidden this div.
If you want to hide with jquery, you can disable like this $("#documentStatus_div").prop("disabled").
Try setting the style as display:none for both the divs :-
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none">
<div id="documentStatus_div" style="display:none>...</div>
</div>
Are you looking for some like this? Cause this is what I understand. If not, pls tell me.
function showDiv(){
$('.div-flash').slideToggle(300)
$('.div-flash').delay(500).slideToggle(500);
};
showDiv();
body{
background: #000;
color: #fff;
}
.div-flash{
display: none;
background: #fff;
color: #000;
border-radius: 10px;
width: 100px;
padding: 25px;
margin: 50px auto;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is all doc
</div>
<div class="div-flash">
This will show and hide
</div>
The possible reason for this is your CSS file is taking time to load.
Method 1: Use an inline style
<div id="documentStatus_div" style="display:none>...</div>
Method 2: Check CSS link is present in <head> section
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none;">
<div id="documentStatus_div">...</div>
</div>

Angular - detect click background div but not on divs within

On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed
You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.
I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.

Show table when its tab is clicked but hide other tables

So right now I have a section that has 3 tabs on it. Each tab is supposed to bring up a different table while simultaneously hiding the other 2 tables. When the page loads up it shows the first table (which it is supposed to do), but when I click one of the other two tabs nothing happens. I realize this has to be done with a Javascript onclick but I'm not familiar with it yet to know what I'm doing. I unfortunately have a lot of code that goes into making this work so i wont be able to post it on here but ill grab the code i think is most important and if you need any more info let me know. Please and thankyou for your help.
The tabs are "Pavement Section Editor", "Traffic", and "Condition"
HTML:
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Pavement Section Grid
</h2>
<p><div id="table_div_Main"></div></p>
</section>
#foreach (var layer in lstLayers)
{
if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
{
<section id="#("tab" + layer.Replace(" ", ""))" class="tabSection">
<h2 class="medium" style="font-size: 12px;">#layer</h2>
<p><div id="#("table_div_" + layer.Replace(" ", ""))"></div></p>
</section>
}
}
</article>
</div>
</div>
JAVASCRIPT:
function drawSectionData(data) {
return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};
function drawTrafficData(data) {
return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};
function drawConditionData(data) {
return drawMe(data, 'Condition Data', 'table_div_Condition');
};
//what i got so far on the javascript
$(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })
The best way to implement tabs in your scenatio is to use jQuery Tabs - very easy and almost no additional coding required, and as added benfit it is free
Based on the assumption that:
You want to hide only the content that sits within the p of each
section and not hide the whole section itself because that would
mean that your click-able h2 will also become invisible.
You have removed div from within your section and are only using p
because inline elements do not allow to contain a block (in your
case, a div) element inside it. [Link], [Link] & [Link].
Your JavaScript code then may look like this:
var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
tabSections.find('p').hide(); // hide all p elements found within tabSections
$(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
});
Snippet:
var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
tabSections.find('p').hide();
$(this).siblings('p').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Main
</h2>
<p id="table_div_Main">Pavement Data</p>
</section>
<section class="tabSection" id="tabTraffic">
<h2 class="medium" style="font-size: 12px;">
Traffic
</h2>
<p id="table_div_Traffic">Traffic Data</p>
</section>
<section class="tabSection" id="tabCondition">
<h2 class="medium" style="font-size: 12px;">
Condition
</h2>
<p id="table_div_Condition">Condition Data</p>
</section>
</article>
</div>
</div>
Hope this helps.

Categories