Good night, morning, afternoon...
I'm developing a website that the whole content slides up and down... I have thought in many possibilities but still couldn't find an answer. Note that the index/intro/main page is the second section. My inspiration is :
http://www.pulpdesign.it/
Thanks , in advance.
<section class="tips-content">
</section>
<section id="intro">
<h1 id="intro-logo">bla</h1>
<span id="title">blabla</span>
<nav id="navigation">
<span class="curriculum"></span><span id="curriculum">currÃculo</span>
<span id="contact">agendamento</span><span class="contact"></span>
<span id="services">serviços</span><span class="services"></span>
<span id="tips">dicas</span><span class="tips"></span>
</nav>
</section>
<section id="curriculum-content">
<div style="height:100%; background:red;">
</div>
</section>
<script>
$(document).ready(function(){
$("#go_curriculum").click(function(){
$(".tips-content").slideDown("slow");
});
$("#go_tips").click(function(){
$("#curriculum-content").slideUp("slow");
});
});
</script>
</body>
I'm the developer who wrote that site :)
First, thanks for taking that as inspiration!
Then, to answer to your question, you'll need, as CP510 said, a general wrapper with
overflow:hidden; height: 100%; width: 100%
I used the body tag, that actually isn't the best choice, it's better to use a
and inside that container you'll have all of your section with
position: absolute;
width: 100%;
height: 100%;
because the you'll have to animate the
scrollLeft/scrollTop
properties of the container with jQuery, and using body as main container I had to deal with some safari's bugs.
Another trick is to think about your sections as the sides of an opened cube. So your main section won't be at
top: 0; left: 0
but at
top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;
and so on with the other sections.
I hope I made it quite clear, my English isn't so good. If you have any other questions just ask!
This is a tricky one. But I have done it. The basic idea is to use a raw $().animate() function to move all this fun stuff around. Since slide up/down are just helper functions for this.
The next requirement is that the sections are absolutely positioned in a wrapper. It's a bit wonky but heres the psuedo layout
<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
<DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
<CONTENT DIVS POSITIONED CORRECTLY>
</DIV>
<DIV>
Now what you do is move the absolutely positioned content container (the second div) to show the section using jquery.
$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);
Now the POSITION_TOP and POSITION_LEFT placeholders could be a variable that gets set based on the navigation button thats hit. The cleanup_callback is an optional function if you want something to happen when the document arrives on that location.
Thats the jQuery way. There is a CSS way by using classes and transitions. It works by changing the holding containers class to basically declare where the target page is, then because CSS transitions are on, the movement is animated. Each of these "navigation classes" basically just dictate the top and left position properties.
Have a look on this EXAMPLE just to understand the basic idea on how this logic works.
This example has 3x2 full page divs( 6 pages total) and we are not using any JavaScript at all it's all CSS and HTML.
Please note that in order to remove the scrollbars from the page you will need to uncomment the below in the body style
body {
white-space: nowrap;
/*overflow:hidden; UNCOMMENT THIS*/
}
jQuery for a smooth animation
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
You can also have a look on this Website as it is very similar to what you want to achieve
Related
Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!
I want to toggle visibility between a changing number of inline child elements as shown below. However as you can see they jump about because they are inline (which they need to be for semantic & responsive reasons) and therefore cannot set an absolute position. I am using a php cms for the data (kirby) so I can't fetch the strings as valuables directly, so my thinking is the only solution is to completely fade one element before the other appears.
Unless someone has another idea, what is the best way to do that using the code below? I can't crack it. Thanks!
$( document ).ready(function() {
$('.greetingWrapper span:gt(0)').hide();
setInterval(function(){
$('.greetingWrapper :first-child').fadeOut()
.next('span').fadeIn()
.end().appendTo('.greetingWrapper');},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
<span class="greetingWrapper">
<span>Hello</span>
<span>Bonjour</span>
<span>G'day</span>
<span>Yeoboseyo</span>
</span>
- thanks for joining us.
</h1>
does the environment allow using position: absolute; on the spans?
<div>
aaaaaa<span>123</span>345<span></span>abce
</div>
span {
position: absolute;
}
makes the 123 and the 345 overlap
I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor
Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.
But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.
So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.
Here is my code:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
return false;
});
});
</script>
<div id="footer">
</div>
<div id="footernotes">
</div>
</div> <!-- end #footer -->
And the CSS for #footernotes
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
EDIT: While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.
document.getElementById('divID').scrollIntoView();
try and see if that would do the job.
It can be done using Jquery method .focus(). just need to add
$(divname / .class / #id).focus();
and it would be done.
I have a site that I've been working on the the past couple of weeks. I have a very nice footer on it, problem is, it doesn't stay at the bottom. I've come up with a simple solution.
If the page isn't completely filled (i.e. the content only goes half way down), absolute position the footer to the bottom.
If the page is overflowing (vertically), leave the footer as just another element.
Problem is, I don't know how to check if my content is overfilled. Is there a way to check if the document fills up all the space vertically? The only thing I can think of is to check to see if the vertical scroll-bar is enabled, however, I don't know how to check for that either.
I'm using jQuery, answers with it are fine. Thanks!
EDIT
OK, my question was apparently misunderstood. Sorry guys, I don't need solutions on how to keep my footer at the bottom. I need ways of determining if data overflows on the y-axis. I happened to mention my reason why I needed to know this. Don't make me regret this guys :p
I've used this successfully many times over: http://cssstickyfooter.com. No JavaScript needed at all.
Using jQuery, $(window).height() is how you get the height of the viewport. You can check this value against your content's height:
if($("#content").height() > $(window).height()) {
// absolute position my footer
}
Use the Sticky Footer technique like Matt posted.
The basic idea of it is that you set a static height for your footer. Make your webpage take up the full height of the browser. Push the footer off the screen from the #content div, and then move the footer back onto the page with a negative margin value.
It's hard to answer without seeing your HTML, but if you are using jquery just use outerHeight to get the vertical size of the elements on your page and compare it to window.height
You could apply the css clearfix trick. As stated it is hard with out seeing your code. Even still this could work.
Example:
<html>
<style>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<body>
<div id="content" class="clearfix">
</div>
<div id="footer">
</div>
</body>
</html>
This helps to keep content from overflowing and should keep your footer at the bottom or below your content.