Is there a way to scroll the content of an element that has an overflow of hidden to the top?
Example use case:
Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.
Any ideas here would be great.
I believe it is not possible with CSS.
You can try to look at element.scrollIntoView.
Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.
Do you mean something like that?
http://jsfiddle.net/8pvjf/
It has to do with jquery indeed
$(document).ready(function(){
$('.background').css('font-size',($(window).width()*0.1));
$(".blow").each(function(){
});
$('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
$(this).addClass('blow')
$(this).removeClass('overflow')
} else {
element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
$('body').animate({ scrollTop: element.offset().top });
}).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
}
});
$(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));
});
Have fun toying with those codes as much as you want.
Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)
Related
On an article page, there are user comments which are marked with div id.
<div id="comment1234">
Comment
</div>
Users get a notification when the comment has been approved with the URL.
https://mywebsite.com/article2/#comment1234
The problem is the scrolling behaviour. The browser scrolls to the "random" position, not to the div. I expect this is caused by dynamically added Adsense auto-ads. How could this be fixed?
This code seems the solve the challenge:
$(window).on("load", function() {
setTimeout(() => {
let tag = $($(location).attr('hash'));
let marginTop = 90;
if (tag.offset() != false)
$('html,body').animate({scrollTop: tag.offset().top-marginTop},'slow');
}, 800);
});
It will re-scroll to the correct position 800ms after the page load.
I'm working on a single page website with a fixed header at the top that has a navigation menu. The navigation menu links to divs on the page.
The issue is that when you click on one of the links the header covers up the section title. I'm wondering how this can be fixed without adding a ton of padding at the top of each div.
Here's the page:
http://arifolmancohen.com/Ari/index.html
I see you are using jQuery, so perhaps this snippet I found just the other day is exactly what you are looking for.
This issue you have is a href=#target's automatically find the element with the matching ID#target (then name=#target, ...) and bring that to the top of the page. However, in your case, because you have a fixed header, the header will cover the top of whatever is brought to the top of the page!
SO, by subtracting the height of your fixed element (95px) from where the page would normally be scrolled to, you prevent your fixed header from covering your content.
Include the following JavaScript between your </body> and </html> tags at the end of your HTML page:
(function($) {
$('.main-nav a[href^="#"]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 95
}, 1200);
return false;
}
}
});
})(jQuery);
I think scrolling with offset is only possible with JavaScript. With it you can scroll to the appropriate heading element when a navigation link is clicked. Check out this answer and try adding (or subtracting?) to the offset.
$('html, body').animate({
scrollTop: $el.offset().top
}, 1000);
This is for a smooth scroll, you can use 0 ms for an instant scroll.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
Someon knows a plug-in to get a floating widget with a form/html like this website
http://teambox.com/
When you scroll down a "form sign up floating bar" appears.
Thanks in advance!
For this use a div, position fixed and top: 0px and place whatever you want inside. Have the div hidden and use something as the following to show after a certain height.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 300) {
$('#your-div').fadeIn(200);
} else {
$('#your-div').fadeOut(200);
}
});
No reason for a plugin.
i have a ul-Element with 30 li-Elements, but only 20 Elements are shown, the overflow is hidden. Now i want to show the last 20 Elements. Is there a translateY(X)-Method for the ul-Element or something else?
Fesp
This solution is shooting into that big vague question. Hopefully it hits!
<ul id="ul_id" style="height:200px;overflow:hidden;">
<li></li>
...
</ul>
<script type="text/javascript">
document.getElementById('ul_id').scrollTop=150;
</script>
You can scroll a div with "scrollTop" in javascript. Just set the desired offset in pixels.
You'll need to scroll the element to reveal children that are "below the fold". Depending on if they're stacked on top of each other or in a row you'll need to use ul.scrollTop or ul.scrollLeft (from JavaScript).
Not a CSS HTML method I know. But the only way I can think to do what you ask (if I'm guessing correctly) is via jQuery, so.....
This will dynamically add an additional li with "See More..." when clicked, it will show more items on the list.
$(function() {
var hiddenStuff = $('.list li:gt(5)').hide();
if (hiddenStuff.size() > 0) {
var theCaption = '... See More';
$('.list').append(
$('<li class="more" id="toggler">' + theCaption + '</li>')
.toggle( function() {
hiddenStuff.slideDown(1000);
$(this).text('...See Less');
},
function() {
hiddenStuff.slideUp(1000);
$(this).text(theCaption);
})
);
}
});
jsFiddle Demo HERE
A CSS-only solution, which may work for you here: CSS-ONLY DEMO