I load more data in the table when user clicks on the "more" button but it takes the scroll position to the beginning of the table. I tried using <a id="#placeholder"/> and setting the window.location.hash = "#placeholder" or $("#placeholder").click(); but nothing works out.
Try something like this:
window.scrollTo(1, 0);
Related
I have been searching for hours about how to do this, trying different things and not succeeding.
All I want to do is make a one-page site that shows/hides divs and does one simple animation. I have already made it do everything I want and look the way I want it to look: When you click a link in my navbar, there is a script that runs that hides one div, shows another, and also changes the size of the header image. This is all done with simple JS and CSS, but the back button doesn't work and the URL does not change even when I make the link a hash anchor. Maybe having all the divs on the index and showing/hiding them isn't even the best way to do this.
The implementation of the HTML5 History API (If I should even be using that) has got me stumpped, and I can't seem to find a simple straightforward working example of this.
Can anyone point me to a fiddle or codepen of something like this working properly?
This is the basics of what I'm doing:
Link:
Work
Function:
function work() {
document.getElementById("work").style.cssText = 'display: block; opacity: 1;'
document.getElementById("about").style.cssText = 'display: none; opacity: 0;'
document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out;'
document.getElementById("introcontainer").style.cssText = 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;';
}
When my "Work" link is clicked, "about" is hidden, "introcontainer" is hidden, height of "hero" is changed, and "work" is displayed. I have two other "pages" and they function the same way.
History API is made just for such scenarios , instead of scanning url hashes and running complex if else you can use pushState to keep track of application state and decide what happens at each state.
The gist of this API is when you push something using pushState it gets returned to you on popState (on hitting back button).
history.pushState(objState,title,Url);
The first argument is where we pass stuff that will help identify application state you can put anything but it has to be enclosed in an object
I will ignore the 2nd one(pass any string). 3rd one is what URL bar would show relative to current path on executing PushState()
Assuming you have nav something like this
<ul id="nav">
<li>About</li>
<li>Contact</li>
<li>Team</li>
</ul>
assign click handlers for pushing state
$('a').click(function(e){
e.preventDefault();
var targetUrl = $(this).attr('href');
history.pushState({url:targetUrl}, targetUrl, targetUrl);
applyState(targetUrl); //will show div associated with this anchor
});
Now when user clicks a link you need to push something related to this say its href or title to identify it later (I've used its href but you are free to use anything) after it gets pushed you may animate and show div associated with this link eg. If I click <a href="work"> then push “work” and show the div that holds your work details(while minimizing/hiding other divs) .Your url reads xyz/work atm
Next if I click <a href="contact"> state for contact gets pushed and same way it's associated div gets highlighted.Your url reads xyz/contact atm
Now when I hit back history will pop and url will change from xyz/contact to xyz/work popping the latest inactive state (wiz. work and not contact!)
If you have assigned handler for onpopstate you can catch the popped content
window.onpopstate = function(e) {
var popie = e.state ? e.state.url : null;
applyState(popie);
}
so popie would be “work” , applyState will do its fancy animation and show work div
applyState might look like
function applyState(url) {
$('#status').text('Current active page ' + url);
switch(url){
case "work": //show work details div hide others
break;
case "about": //show aboutdetails div hide others
break;
}
Easiest way to explain it is if you have a look at the site - haloespresso.com.au/working/
If you click the "menu" option in the top menu, it scrolls to the menu id #pg-9-4, which is what I want. On the other pages, the menu is slightly different and the same link is changed to link to the home page with #pg-9-4 added to the end of it. The point here is clearly to get the link from another page to open the home page but scroll to the menu part of it. I don't even need it to smooth scroll or anything, just go to that spot. It looks like it does go there for like, one frame, as it's loading, but it keeps jumping to the top. It's simply beyond me to try and figure out what is causing it to lose this basic HTML (afaik) functionality and keep forcing me to the top of the page...
Any help would be really great, as I'm a bit of a noob when it comes to anything other than html/css and simple jquery.
Just append the anchor to the end of the link.
Simply insert a link like:
Link to section on another page
Edit: Just noticed you're not getting this to work. What do your links look like, and what's the HTML with the ID on the target page?
Try this jQuery code:
$(document).ready(function() {
function hashScroll() {
// get URL Hash
var hash = window.location.hash;
// check if hash is set and not empty
if (hash != '') {
// scroll to hash ID after 10ms delay
setTimeout(function() {
$(document).scrollTop( $(hash).offset().top );
}, 10);
// debugging
console.log(hash);
console.log('offset:'+ $(hash).offset().top );
}
}
hashScroll(); // fire hash scroll function
});
Explanation:
This function will capture the URL hash (www.example.com/#hash), checks if it's not empty and then scrolls the page to the element with the ID which matches the hash after 10 ms. The delay is there to make sure browsers don't mess up the loading process.
My code is:
$rootScope.$on("$locationChangeSuccess", function () {
if( $location.$$path.startsWith('/room/') ){
$location.hash('container');
$anchorScroll();
}
});
On my room pages, the view is scrolled to where I have the element with ID container. However my URLs are having #container appended to them during the scroll and my back button stopped working.
Whenever I go on example.com/#/room/123, I'm redirected to example.com/#/room/123#container and my back button then points to example.com/#/room/123. So, each time I hit back, the URL goes back to example.com/#/room/123 and then the above code runs and adds the hash to the code.
Any way to prevent this from happening and keep the back button functional?
Following Drazen's tip, I managed to sort the issue by replacing
$location.hash('container');
with
$location.hash('container').replace();
Use location.replace("#container"); instead.
I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.
Before I ask, below is my jQuery code im having issues with.
$("a").click(function() {
if(this.hash){
$("#main").animate({
scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
},2000,"easeOutExpo");
}
});
Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.
Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?
Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?
Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks
EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like
$("a").click(function( e ) {
e.preventDefault();
if(this.hash){
var target = '#'+ this.hash.substr(1);
var destination = $(target).offset().top - 10;
$('#main').stop().animate({
scrollTop : '+=' + destination
}, 1000);
}
});
LIVE DEMO
ISSUE 1:
you probably use something like: goto and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:
$("a").click(function( e ) {
e.preventDefault();
// .....
});
ISSUE 2
The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element.
which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use
offset().top
Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
ISSUE 3
H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:
example.com#bottomLady
and he'll get immediately my thoughts without the need to scroll your page all the way down.
I have a web page that basically contains a large table, I use ajax to automatically create and populate the table every minute. the basic code structure is like this:
$(document).ready(function(){
setInterval(function(){
$.ajax({
//code to call backend, get the data,
//create/populate the table, and refresh every minute
});
});
}
Since the table is quite long, I'd like to have it automatically scroll down, pause a couple of second,continue to scroll down, pause again. And when it reaches the end, it will scroll up, pause...or maybe once it reaches the end, start from the top and do it all over again. While it's scrolling, I'd also like to to keep its table header row fixed at the top.
My questions are:
is it possible to do this using some jquery function or javascript?
how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax table refresh?
is it possible to do this using some jquery function or javascript?
Very easy to accomplish using jQuery/javascript.
how would this automatic scrolling function interfere with the ajax? say it's in the middle of scrolling down and it's time for ajax
table refresh?
I would put your code to animate the scrolling in your ajax success. Animate the scroll to a time interval that is shorter than your AJAX interval.
Something like this
setInterval(function(){
$.ajax({
type : "",
dataType: "",
url : "",
data : "",
success : function(data)
{
// create/append data to table
// animate scroll to bottom of table
$("#my_table").animate({ scrollTop: $("#my_table").height() }, "slow");
}
});
});
Not sure if the scroll code is 100% correct, but it should start you out.