HTML and jQuery anchoring - javascript

Whenever the url contains the div id, it would obviously go down to the div when the URL has:
http://domain.com.faq.php#1
<div id="1">Bla bla bla</div>
But what I like is to have same feature of Stackoverflow, when you click on an answer in your messages, it will scroll down to the page and has that fadeOut effect on the answer.
How do I do this?

Animation to a valid anchor destination cannot be animated on page load that I know of since the browsers will default to scrolling the user down the page to the anchor. For in-page links, you can hijack the anchor links and animate.
However, on new page loads like on SO, you will notice the page does not animate down, but just scrolls down, though the box does animate a color. This is how you could do it in jQuery. Be sure to include the color plugin if you want to animate background-colors.
<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
$(window).load(function(){
var hash = window.location.hash;
if(hash){
$(hash).css('backgroundColor', '#AA0000')
.animate({backgroundColor: '#FFFFFF'}, 200);
}
});
</script>
You can use DOMReady instead of load, but it might try to run your animation too soon, and the user will miss it.
If you only wanted to animate div's with a specific class, you can add a filter to your find:
$(hash).filter('.my_div').css ...

Use:
event.preventDefault();
For example:
$('li.share a').click(function(ev) {
ev.preventDefault();
var link = ev.target.href;
var id = link.substring(link.indexOf("#") + 1);
$('#' + id).fadeOut();
});

StackOverflow uses anchors as well. The post you're currently reading is:
HTML and jQuery anchoring
It's simply <a name="anchorName"></a>
at the address bar: [urlToPage]#anchorName
Now, to get the fade effect [in pure JS w/o frameworks]
Set the div.style.opacity = 0;
var intervalId = setInterval( function(){
if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);
The clearInterval part isn't necessary, since once opacity goes above 1, browser won't render differently [although the number keeps adding...]

Related

Scroll down to specific position after page refresh issue

I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}
You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp
Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}

Chrome ignoring hashes in URL

I've spent quite a while trying to find answers for this issue, but haven't had any success. Basically I need to scroll the user to the contact portion of the website when they go to healthdollars.com/#contact. This works just fine in Safari, but in Chrome I haven't had any luck. I've tried using jQuery/Javascript to force the browser to scroll down, but I haven't been able to.
Does anyone have any ideas? It's driving me crazy - especially since it's such a simple thing to do.
Not a full answer but in Chrome if you disable Javascript I believe you get the desired behavior. This makes me believe that something in your JavaScript is preventing default browser behavior.
It looks to me like the target element doesn't exist when when page first loads. I don't have any problem if I navigate to the page and then add the hash.
if (window.location.hash.length && $(location.hash)) {
window.scrollTo(0, $(location.hash).offset().top)
}
check for a hash, find the element's page offset, and scroll there (x, y).
edit: I noticed that, in fact, the page starts at #contact, then scrolls back to the top. I agree with the other answerer that there's something on your page that's scrolling you to the top. I'd search for that before adding a hack.
You can do this with JS, for example` if you have JQuery.
$(function(){
// get the selector to scroll (#contact)
var $to = $(window.location.hash);
// jquery animate
$('html'/* or body */).animate({ scrollTop: $to.offset().top });
});
The name attribute doesn't exists in HTML 5 so chrome looks to have made the name attribute obsolete when you use the DOCTYPE html.
The other browsers have yet to catch up.
Change
<a name="contact"></a>
to
<a id="contact"></a>
Maybe this workaround with vanilla javascript can be useful:
// Get the HTMLElement that you want to scroll to.
var element = document.querySelector('#contact');
// Stories the height of element in the page.
var elementHeight = element.scrollHeight;
// Get the HTMLElement that will fire the scroll on{event}.
var trigger = document.querySelector('[href="#contact"]');
trigger.addEventListener('click', function (event) {
// Hide the hash from URL.
event.preventDefault();
// Call the scrollTo(width, height) method of window, for example.
window.scrollTo(0, elementHeight);
})

How to prevent links to anchors in a child div from affecting main url?

Consider the following snippet:
<div id="help"></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var loadPage = function (){
$("#help").load("http://localhost:3000/manual.html");
}
onload=loadPage;
</script>
This exists on my main page:
http://localhost:3000/
The above code works fine and loads my manual page. But if I click a link like this in manual.html:
<a href='#introduction'>Introduction</a>
Then the page in the help div jumps to the #introduction section, however the url in my browser updates to:
http://localhost:3000/#introduction
This is pointless because the #introduction anchor only exists in manual.html, how can I prevent the links in the #help div from affecting the address bar in the browser?
Try this
$('a').click(function(e) {
e.preventDefault();
$("#help").load($(this).attr('href'));
})
By using offset and preventDefault
$('a').click(function(e) {
// Go to '#introduction'
var targetId = $(this).attr('href');
$('html, body').offset({ top: $(targetId).offset().top, left: 0 });
// this prevent 'http://localhost:3000/#introduction'
e.preventDefault();
});
See this post
I already had a function that could scroll the #help window to a heading, when you click on objects in the parent it scrolls to the relevant section in the help window:
var moveTo = function(destination){
//position of the top of the help window - does not change.
var helpWindow = $("#help").offset().top;
//difference between current scroll position and target position.
var relativeDistance = $(destination).position().top - helpWindow;
//add the distance from current position to the top to get distance to target from top
var absoluteDistance = relativeDistance+ $("#help").scrollTop();
$("#help").animate({
scrollTop: absoluteDistance
}, 1000);
}
Using e.preventDefault() I was able to use this function to do what I want.
For others heading down this path there are two other small things to consider.
Firstly, make sure you nest the .click() function inside the callback from page load, as the hyper links won't exist until the page is loaded. Secondly, You will probably want to use a child selector eg $('#help a').click() to ensure you are only altering the behaviour on links inside the child.
$("#help").load("http://localhost:3000/manual.html", function(){
$('#help a').click(function(e) {
e.preventDefault(); //suppress standard link functionality
moveTo($(this).attr('href')); //scroll to link instead.
})
});

Clicking on anchor takes me to the bottom instead of restoring the previous position

I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}

Using jQuery-Smooth-Scroll from one page to another?

I am currently using jQuery-Smooth-Scroll to smoothly scroll up and down to various anchor positions on one of my pages (Page 1). However, what I would also like to be able to do is, from another page (Page 2), link to Page1 (appending #bookmark to the url) and have jQuery-Smooth-Scroll pick up on the fact I am calling the page with a #bookmark and have it smoothly scroll down to the relevant position once the page has completed loading. I don't know if this is a possibility or not?
This is the version of Smooth-Scroll that I'm using:
https://github.com/kswedberg/jquery-smooth-scroll
I'm still relatively new to jQuery so I may be overlooking something obvious.
Ajma's answer should be sufficient, but for completeness:
alert(location.hash)
Edit: a more complete example:
// on document.ready {
if (location.hash != '') {
var a = $("a[name=" + location.hash.substring(1) + "]");
// note that according to w3c specs, the url hash can also refer to the id
// of an element. if so, the above statement becomes
// var a = $(location.hash);
if (a.length) {
$('html,body').animate({
scrollTop: $(a).offset().top
}, 'slow');
}
}
// }
It's possible, you want to put a call into the smooth scroll function when the page is finished loading. in jQuery, it's using $(document).ready(function () { your code } );
You'll need to put something in to parse your url to extract the #bookmark and then call the smooth scroll.

Categories