I have a little bit of a problem I'm a beginner programmer and writing my first web app, I came across a little bit of a problem.
I have a parent div with a height of 300px and inside that div I have 20 child divs and every single one of them has different id attribute and one div gets a special class that changes his appearance. I want that div always be seen by user so they don't have to scroll to find it.
I tried:
const renderStandings = (team,teamID) =>{
let cssClass = "team-standing";
if(team.team.id === teamID){
cssClass = "team-standing favouriteTeam";
}
HTML markup
const markup = `
<div class="${cssClass}" data-teamID="${team.team.id}">
<div class="team-position"><p>${team.position}</p></div>
<div class="team-crest"><img src="src/img/logos/${team.team.id}.svg"></div>
<div class="team-name"><p>${team.team.name}</p></div>
<div class="team-gamesplayed"><p>${team.playedGames}</p></div>
<div class="team-goaldiffrence"><p>${team.goalDifference}</p></div>
<div class="team-points"><p>${team.points}</p></div>
</div>
`;
document.querySelector('.league-standings').insertAdjacentHTML('beforeend',markup);
Scroll into view
if(document.querySelector('.favouriteTeam')){
var el = document.querySelector('.favouriteTeam');
el.scrollIntoView({
behavior: 'auto',
block: 'center',
inline: 'center'
});
}
}
}
That scrolls that div into the view exactly how I wanted it to, but it also scrolls the whole website to the parent div and I don't want that.
QUESTION
So the question is how do I scroll that div into view without scrolling the whole website. Preferably I would love to have answer in vanilla JS because that's what I'm practicing at the moment, and I don't plan to learn any frameworks until I'm comfortable with JS.
Illustrated result of what I want to achieve:
This is now and it scrolls the whole website
This is how I want it to be
[2]: https://i.stack.imgur.com/Ldg3N.jpg
Inside my problem the answer was to use (scrollTop). Since every child div had 50px height I added atribute postition that gave me the position of element that I wanted to center (1-20), thanks to that I could calculate value of scrollTop for the element to be exacly in the center of scrollable div. Since 7 of them is already visible i started at 8th position.
if(document.querySelector('.favouriteTeam').getAttribute('data-teamposition')>7){
document.querySelector('.league-standings').scrollTop = 200 + ( 50 * (document.querySelector('.favouriteTeam').getAttribute('data-teamposition') - 8 ));
}
Related
Ok - So I am kind of struggling with this. I am trying to achieve something pretty straight forward I think. I need 3 resizable divs within a fixed width container div without using Jquery. The resize needs to occur for all divs only horizontally as they all have the parent divs height. Here is the layout
<div id="container">
<div id="m1">M1</div>
<div id="m2">M2</div>
<div id="m3">M3</div>
</div>
My object here is to wrap this into a ReactJS component and therefore not wanting to muddy the waters with Jquery. Any help/direction would be most appreciated. If someone can mock up something like this in React, that would be awesome too! :)
Not sure whether this can be a CSS only solution but I am open to ideas
Thanks
Your question isn't exactly clear to me, if your container div is fixed width (as in a constant value) then your child divs should not resize dynamically no matter what the width of anything beyond the container is.
The only other way I could interpret your question, is that you need some sort of grid system, where you can drag to resize the width of the child divs within the confines of the container. In that case, I might be wrong but I don't think the solution is that simple, you might want to take a look at this package: https://github.com/STRML/react-grid-layout
More specifically, their simplest implementation allows you to define a fixed width container (1200 in this case) like so:
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key={'a'}>a</div>
<div key={'b'}>b</div>
<div key={'c'}>c</div>
</ReactGridLayout>
If you want to fix the parent div's size and then have the inner divs automatically resize based on the parent div you can use the flex box layout which you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your case you can set the styling of the first div to:
.container {
display: flex;
}
And for the children (in your case identified by m1, m2, and m3) you need to set the css property flex-grow to how big do you want it to be relative to the others. Say, if you want m1 and m2 to have the same size and m3 to be twice as big, you would do the following:
#m1, #m2 {
flex-grow: 1;
}
#m3 {
flex-grow: 2;
}
Depending on what you want to do, you might want to consider renaming the ids/classes.
In case you are looking to get the exact size of the parent of a div you can do this as following:
render() {
return <div ref="node"></div>
}
componentDidMount() {
const parentWidth = this.refs['node'].parentNode.clientWidth;
// Do whatever you need here (like setting state of the react component)
}
I'm displaying a list of results on my results page that require me to scroll, which is fine, but the whole page( nav bar, maps next to results, etc) all scroll down as well. I'm trying to figure out how to get JUST the list if results to be scrollable. I've tried to put
overflow-y: scroll
on a number of of the div's surrounding the list and
overflow-y:hidden
on the body to prevent the whole from scrolling down
but nothing seems to work. All I can achieve is a bunch of y - scroll bars that are all unusable,
where the outer most scroll is hidden (disabled) and I can't scroll any of the inner most scroll's, even though there is result content below the screen.
Can anyone suggest another way to create a scrollable div list on one side of the page while the other side remains unscrollable. Just like Airbnb.com's result page. Or please point me to some examples or Fiddle examples.
Try to give your div a fixed size.
The <div> needs to have a set height but you need this to be responsive. The best way to do this to support older browsers is using JavaScript. This <div> will resize to the current window height upon resize, the width is up to you, if you want it like Airbnb's then you'll need to set the width to 50%.
HTML:
<body onresize="setDiv();" style="overflow-y:hidden;">
<div id="listResults" style="border: 1px solid black;overflow-y:scroll;">some list results here</div>
</body>
JS:
function setDiv() {
var x = window.innerHeight;
document.getElementById("listResults").textContent = "height: " + x;
document.getElementById("listResults").style.height = x + 'px';
}
P.S. I only put the border there so you could see that the div was actually resizing.
I have a fixed size div that dynamically shows content.
Should the content be too large for the div what I'd like to happen is for the contents of the div to start scrolling on it's own so the all the content can be seen.
Off the shelf solutions seem to force content to always scroll regardless if it fits inside in the div.
Thank you.
Adding to what Shahar mentioned, you can use jQuery animate api to scroll till the bottom of the div.
var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();
if(scrollHeight > divHeight){
pageScrolls = scrollHeight/divHeight;
$("#dynamic_div").animate({
scrollTop: scrollHeight // scroll till the end of the div
}, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}
Here's the jsfiddle
If you don't have css rules overriding your browser default styles, it's likely that scrollbars will appear automatically whenever there is overflowing content inside the element.
You can use javascript to test if the content overflows, and if it does, do whatever you want (add scrollbar, change style, use a jquery plugin for it etc...).
With jQuery:
var myDiv = $('#overflowing-div');
if (myDiv[0].scrollHeight > myDiv[0].clientHeight) {
// handle this
}
Based on this answer to check if container is overflowing:
How to detect overflow in div element?
I have a list of elements. Each element has an expanded and collapsed state.
When user expands one of the element, all other elements need to collapse. The list is inside a div which could be scrolled to allow seeing the entire list.
element 1
element 2
element 3
element 4
element 5
Lets say, element 1 is in expanded state. When I expand element 3, I collapse element 1. The problem is that when I do that, element 3 scrolls up. I want to avoid this and position element 3 to same position.
This is a pseudo code. There could be some minor syntax errors, but do ignore them, since my actual code has lot more going on and I don't want to paste the entire thing here.
The controller will include expand function like:
public expandElement(currentElement: any, previousElement: any) {
// get the height of previous element
var scrollOffset: number = angular.element("#" + this.getAnchorId(previousElement).offsetHeight;
// this function will collapse the element decreasing the height of it
previousElement.collapse();
// scroll to the newly expanded element
this.$timeout(() => {
var anchorId: string = this.getAnchorId(element);
var element = angular.element("#" + anchorId)[0];
var offset = element.getBoundingClientRect().top + scrollOffset;
this.$anchorScroll.yOffset = offset;
this.$location.hash(anchorId);
this.$anchorScroll();
});
previousElement = currentElement;
}
The html will look something like:
<div ng-repeat="element in listElements"
id="{{getAnchorId(element)}}">
<my-directive ng-click="expandElement(element, previousElement)"></my-directive>
</div>
This currently is not working at all, but even if I get it to work, there would be a small UI jump that could happen. I want to avoid scroll completely.
Is there another easy way to just block the scroll when angular expands an element?
Appreciate the help.
Thanks!
I got your problem, but i have one question. Consider you have more elements in the list and you will expand say 50th element then it has to scroll the main container to show the content of that expanded panel, i think it is the desired functionality in the scroll. I know i am not answering your question but, just thought of reconsidering it.
Probably you have to save scroll position and after click function got triggered change the scroll position back to saved state. There could be flick effect. If you want to hide the flick effect, hide the div show with a slow animation. Hope it helps.
I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);