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.
Related
Recently I added an iFrame using the following code I found online:
"<iframe id=“personio-iframe” style=“border: none;” src=“my website address is here” width=“100%” onload=“window.top.scrollTo(0,0);“> window.addEventListener(‘message’, function(e) { var iframe = document.querySelector(‘#personio-iframe’); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case ‘setHeight’: iframe.style.height = data + ‘px’; window.scrollTo({ top: 0, behavior: ‘smooth’ }); break; } }, false);"
I noticed whenever I click on any part inside an iFrame the page scrolls up.
I can see the two lines in the code that mention scrolling up, but when I tried to delete them the frame doesn't show properly, it's displayed as a narrow bar on the page.
Can you please let me know how can I modify this code to successfully get rid of the scrolling up without damaging the iFrame itself?
Please try this line:
<iframe id="personio-iframe" style="border: none;" src="your website address is here" width="100%" height="600px">
This is optional for your css, with it the iframe will not go over 90% of screen height
#personio-iframe {max-height:90vh;}
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
First of all, this is the function I'm using:
var newHash = '',
$mainContent = $('#content');
$('#sidebar').delegate('a', 'click', function() {
window.location.hash = $(this).attr('href');
return false;
});
$(window).bind('hashchange', function() {
newHash = window.location.hash.substr(1);
$mainContent.load(newHash + " #content > *");
});
I got a few problems that I don't know how to solve:
When it load a long page into the div, the div covers all the HTML elements below it, instead of extend the page and move the elements lower. - I've solved this problem by adding overflow:auto; to the page div - the one that contains the content & sidebar divs.
Is there a way to load the specific div + the title of the loaded page and all of it's meta tags?
Is there other more practical way to load content from another page to a specific div on the main page - like iframe?
Thanks in advance for your help!
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. :)
So I have this:
clicking here
<a name="link">goes here</a>
Simple, but the problem is that my site has a fixed position header that stays at the top of the page, so when a user clicks on the link, the place I want them to go to is hidden by the header. So I guess where I really want them to end up a certain amount of pixels above what I actually want them to see. I've tried putting the destination link above where I want them to end up, but it's a block of text so it changes with different screen sizes and therefore isn't consistent.
I'm wondering if there is any way to solve this problem, perhaps something with css.
Thanks in advance.
I realise this is over a year old, but for the benefit of anyone else who comes across it:
A slightly simpler solution is to put padding at the top of the section you are targeting with the link.
HTML:
<section id="section_name">
...Your stuff here...
</section>
CSS:
#section_name {
padding-top: 40px;
}
You could use a jQuery method so that when a link with a # is clicked, it finds the position of the element it's meant to go to and then moves to a position X number of pixels above the target.
Something like this:
$(function(){
var positionOffset = 50;
$('a[href=*"#"]').click(function(){
var targetHash = this.hash;
if(targetHash.length > 0 && targetHash == window.location.hash){
var elementPosition;
if($(targetHash).length){
elementPosition = $(targetHash).offset();
} else {
var targetAnchor = targetHash.replace("#", "");
elementPosition = $('a[name="' + targetAnchor + '"]').position();
}
$(window).scrollTop(elementPosition.top - positionOffset);
return false;
} else {
return true;
}
});
});