Smooth scrolling to anchor on another page - javascript

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben

Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}

Related

jquery go to anchor on page load

i have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand

Script works only on homepage

I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.
Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.

Fixed Floating Elements jQuery Wordpress

I have added this code to my site (without all the stuff to set up the comments and headers): http://jsfiddle.net/WzLG2/3/ Below is the javascript.
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('#smi').addClass('fixed');
} else {
// otherwise remove it
jQuery('#smi').removeClass('fixed');
}
});
});
My site: http://hollyshelpings.com
I'm trying to get the brown box underneath my header to scroll to the top and then stop there like in the jsfiddle. I'm using thesis and I have jquery enabled. I have wordpress and I already looked up how to use jquery in wordpress with replacing $ with jQuery.
I got the basis for the code from this site: Jquery for designers (it won't let me post the link)
I tested and jquery appears to be loading, I used firebug and I'm not seeing errors that pertain to this code (it looks like some plugins may have errors, however). I'm pretty new at coding so I'm not sure what else to test or how to troubleshoot much past this. My end goal is to use this for my social media icons instead of the tabs on the side. Any guidance or suggestions are greatly appreciated.
First step is to check your javascript console and remove any errors you see coming up there, as they can cause problems elsewhere. Not saying it's related, but your call to jQuery('#commentluv') is broken. I also notice you're using jQuery 1.4.2 which is really old, and should consider upgrading (maybe not to version 2 as that changed a lot, but at least to 1.9, maybe 1.10).

Extending a site when scrolling down?

Does anyone have a suggestion on how to extend a site automatically?
For example the site "9gag.com" also known as 9fag. It loads a part into the browser, but as you scroll, the site extends itself, without the need to click on "the next site".
I woule like to use this in on a shop I created.
For example here:
http://saasil.de/wohnraumleuchten/deckenleuchten/
When you scroll down, you see that you can choose to go to the 2nd site...
It would be great if someone could just point me to the correct technology to use here.
As someone mentioned above in comments, you are searching for infinite-scroll. There is plenty of jQuery plugins which can help you achieve desired effect. Of, course if you are loading content dinamicaly, you can fetch your data with AJAX.
Similar technology is used at Twitter, Pinterest, etc, and of course on 9gag.
You can see explanation and working demo at http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
Have a look at this question on SO. In this example, the page will extend 100px before reaching the bottom of the page
function loadMore()
{
console.log("More loaded");
// load your content (e.g. via ajax)
$("body").append("<div>");
$(window).bind('scroll', bindScroll);
}
function bindScroll()
{
if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
{
$(window).unbind('scroll');
loadMore();
}
}
$(window).scroll(bindScroll);​
thanks to JoeFletch!

How do i hide html until its processed with javascript?

I am using some JS code to transform my menu into a drilldown menu.
The problem is before it runs the JS you see a BIG UGLY mess of links. On their site its solved by putting the js at the top. Using recommendations by yahoo/YSlow i am keeping the JS files at the bottom.
I tried hiding the menu with display:none then using jquery to .show(), .css('display', ''), .css('display', 'block') and they all lead up to a messsed up looking menu (i get the title but not the title background color or any links of the menu)
How do i properly hide a div/menu and show it after being rendered?
In the <head> place this:
<script>document.documentElement.className = 'js';</script>
Now, it will .js class to your html element. And it will be the very first thing done by the javascript on the page.
In your CSS you can write:
.js #menu {
display:none;
}
And then:
$(document).ready(function() {
$('#menu').css('display','block').fancyMenu();
});
This is an excellent technique, that allows you to make your pages "progressively enhanced", if your user has JavaScript disabled – she will still be able to see the content, and you can also separate non-JS styling with styling, that is relevant only for JS version of your menu, perhaps "position:absolute" and things like that.
At the top of your page put:
<script type="text/javascript">
document.write('<style type="text/css">');
document.write('#mylinks { display:none; }');
document.write('</style>');
</script>
And at the end of your "processing", call $('#mylinks').show();
document.write is evaluated as the DOM is processed, which means this dynamic style block will be registered in the style rules before the page is first displayed in the viewport.
This is a good case where progressive enhancement works really well - if your users have JS available & enabled, you hide the links until they are ready; but if not, they are still available, albeit ugly.
Life will be gentler with you if you try not to make pages that look like "a big ugly mess" without javascript. Have a heart.
Whatever yahoo says, it would probably be worth it for you to insert a little script that adds a style element with a few rules to the head of ypur document, before the body renders.
I found the solution. I should let the links be hidden with css then .show() BEFORE the ddMenu code executes instead of after. The ddMenu seems to check the parents width and sinces its hidden i guess its 0. The time between .show() and ddMenu is fast enough not to show the ugly links (on my machine/browser). The the majority of the time (page loading, http req for the JS files, JS compiling/exec etc) the links are hidden so it looks pretty good.
$(function () {
$('.menuT1').show(); //do it before not after in this case.
$('.menuT1 > ul').ddMenu({
Well, If you are familiar with jquery then I would do something like this
$("#mybuttom").click(function() {
$("#mydiv").hide(); //hide the div at the start of process
$.post( "mypostpage.php",
{ testvar: testdata },
function(data) {
//callback function after successful post
$('#mydiv').show(); //show it again
}
);
});

Categories