JQuery: How to make DIV within Scroll window focused? - javascript

I have the following HTML/CSS:
#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}
<div id="scrollpanel">
<div class="listing ref_1">...</div>
<div class="listing ref_2">...</div>
<div class="listing ref_3">...</div>
...
</div>
As you can see, the scrollpanel is a scrollwindow defined to have a height of 100px and width of 200px.
How can I programmatically scroll the scrollpanel scrollbar/window to make a particular DIV focused/viewable, even if that DIV is not not currently viewable?
For example, say I have 10 DIVs (ref_1 to ref_10). Only 3 of the ref_ DIV can be viewable at a time based on the height of scrollpanel window. Now let's say I want to have the scrollbar auto scrolled to DIV ref_7, which is currently not viewable. How do I programmicatly have the scrollwindow scroll to and focus on ref_7?

Use the jQuery ScrollTo plugin, it's as simple as:
$('#scrollpanel').scrollTo('.ref_7');

You can scroll an element into view by using element.scrollIntoView().

I would take a look this plugin.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Depending on what you need there may be a simpler solution without using a plug-in if you just want to scroll.

Related

Replicating GSAP ScrollTrigger effect with vanilla JS

So, say there is a recurring function with requestAnimationFrame to move an image from left: 0 all the way to left:100% where its change in value is dependent on the scrollY value received through a 'scroll' eventListener..
The parent of this image is a div with min-height: 100vh.
I want to replicate the GSAP's scrollTrigger function with vanilla JS which would keep extending the parent's height over 100vh until the image's left value has reached 100%. After that the parent div will no longer expand its height and will also scroll up with the image.
Basically, I am just looking for a way to make this scrollTrigger function happen with vanilla JS. Would this be the ideal approach for it?
position: sticky is not the solution here as I want to make the user feel that the rest of the DOM elements below are 'held' down and can't be scrolled in view till the image 's left value turns to 100%.
In other words, how to make the parent div's height high enough that the entire animation on the child is completed till you reach the div's bottom by scrolling?
I hope I made sense.
<div class="parent">
<img src="image.jpg" alt="">
</div>
A working demo of what I need is the effect on this CodePen. You can see that the text Cool, right? is not scrolled into view till the entire shoe is created:
CodePen link

How can I check, if all divs are fully visible inside an other div?

I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.
I just found this post, but it doesn´t solve my problem:
stackoverflow post
HTML:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div class="button">
My Button
</div>
My fiddle:
HTML + CSS
How can I check, if all divs are fully visible inside an other div (on page load and page resize)?
#
UPDATE:
My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...
... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.
You can try this my friend"
if ($(".wrapper div").css('visibility') === 'hidden') {
// ...
}
When hosting your HTML:
Right click on your wrapper and inspect element
Hover over the first div inside of the wrapper, and it should become highlighted
Check to see if that div is visible on the page
Continue the above steps for every div in your wrapper
This seems to solve a problem that's the same as, or very similar to, the problem you're describing:
zeusdeux/isInViewport
The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.
EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):
How to tell if a DOM element is visible in the current viewport?

Can't set DIV equal to another DIV HTML/Javascript

for some reason, my wrapper div won't equal the same height as my maincontent div. I'll post the code and I would love if someone could help me understand why. Also, I can use jquery if need be
Javascript:
var wrap=document.getElementById('wrapper');
var left=document.getElementById('maincontent').style.height;
wrap.style.height=left;
HTML:
<div id="wrapper">
<!-- TemplateBeginEditable name="Main Content" -->
<div id="maincontent">
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
I don't know if I have guessed right, but . . .
One possible cause of what you describe is the presence of a float instruction in the maincontent DIV.
See this jsFiddle example
In the example, the wrapper DIV is the wrong height -- it ignores the presence of the maincontent DIV, and the maincontent DIV appears to be below it.
This is caused by the float:left instruction in the maincontent DIV. A float will remove that DIV from the HTML flow, and the parent DIV will be missing that height. In fact, the maincontent DIV is overflowing the wrapper DIV.
SOLUTION:
Place a overflow:hidden or overflow:auto on the parent DIV (that is, on the wrapper DIV).
See this jsFiddle demo of the solution
Note:
position:absolute and position:fixed will also remove DIVs out of the flow. However, they cannot be "fixed" by using overflow:________. Manually setting the height of the containing DIV, or using javascript or some other wizardry may be necessary.
1- If you wan to get the rendered height of element use one of the clientHeight or offsetHeight or scrollHeight instead of style.height
2- make sure that wrapper has closing tag </div>
3- when setting height of element don't forget "px" after height value.
4- If you have images without height set for them in your div, you have to wait for images to be loaded before triggering height function. you may use $(window).load or some other methods...
You should know the difference between ele.style.height and ele.clientHeight.
I wrote a demo here,
http://jsbin.com/ninure/edit?html,css,js,console,output
May it help.

Button resizable jquery magic margin

I have created a button using the <button></button> tags. I applied .resizable() jQuery and it looks fine. But when I inspect element the button, it occupies the whole div with its margin-right though the margin-right is set to 0px. I've looked in the css and overrode some parts to fix it but I didn't succeed. What's causing it?
It is very similar to this: http://jsfiddle.net/nagwW/13/
If you inspect element the button, it occupies the whole row but how could I just limit the width with respect to its real width?
If you are using jQuery UI resizable function then you have to place the button element inside the element being resized, because jQuery UI's default functionality adds a div with class name "ui-resizable-handle". The clickable resize handle that you see.
<div id="resizable" class="ui-widget-content">
<button>Resizable</button>
</div>
See this JS Fiddle that I changed from jQuery UI:
http://jsfiddle.net/truthreveller/mX7Ej/3/

Hide child <div>s as parent div shrinks?

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);

Categories